Raymarching Lab 2.0 und Demoscene Showcase

Ich habe Claude Opus 4.6 instruiert ein einsteigerfreundliches Tool für prozedurale Computergrafik zu erstellen, das hier ist das Ergebnis.

Das Raymarching Lab 2.0 ist ein interaktives Lernwerkzeug für prozedurale 3D-Grafik, das direkt im Browser läuft — eine einzelne HTML-Datei, keine Installation nötig, reines HTML/JS/WebGL.

Was es zeigt: Vier aufeinander aufbauende Szenen, die die Kerntechniken vermitteln. In der ersten Szene siehst du, wie man 3D-Objekte rein mathematisch beschreibt (Kugel, Würfel, Ring). Die zweite zeigt, wie man diese Formen kombiniert — verschmelzen, schneiden, ausstanzen. Die Dritte verformt Objekte und verändert die Textur. Die vierte packt alles zusammen zu einer kleinen Demo mit unendlich wiederholten Säulen, Morphing und Nachbearbeitungseffekten.

Was du damit machen kannst: Jede Szene hat Slider, mit denen du die Objekte, Texturen und Kamera in Echtzeit veränderst. Daneben kannst du den kommentierten Shader-Code einblenden — die Stellen, die ein Slider beeinflusst, leuchten orange auf und zeigen den aktuellen Wert live an. So siehst du direkt die Verbindung zwischen Code und Bild.

Wofür es gedacht ist: Als Einstieg in die Erstellung prozeduraler Computergrafik. Die Shader-Techniken (Raymarching, SDFs, Noise, fBm, Domain Warping) sind genau die, die in echten Grafikdemos verwendet werden — und der gesamte GLSL-Code lässt sich später in ein natives C/OpenGL-Framework übertragen.



Im ZIP-Archiv ist die HTML-Datei enthalten.
Version 1 wurde entfernt aufgrund hoher GPU-Last bei gewissen Szenen.

Raymarching Lab 2.0 hier direkt online abrufbar:
https://codepen.io/fabmann/full/myrwXNQ

Demoscene Showcase hier direkt online abrufbar:
https://codepen.io/fabmann/full/NPRgyXJ

Ich habe die ursprüngliche Version entfernt, Szene 03 und 04 waren absurd GPU lastig, ich habe eine Version 2.0 upgeloaded, die sparsamer ist.
git habe ich noch nicht eingerichtet. Ich nutze Claude Opus 4.6 online, da ich auch am Smartphone prompte.

Zugegeben, ich habe wenig Ahnung von Shadercode und ich wette der von Claude ist nicht besonders gut, aber es gibt öffentlich verfügbaren.
Dank geht an IQ für das Teilen von optimiertem! Den konnte Claude lesen und damit selbst deutlich bessere Ergebnisse produzieren, z.B. das demoscene-showcase hier.

Auf codepen.io gehostete Links im ersten Post ergänzt.