Raymarching Lab 2.0 und Raydancer Light (ehem. 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

Raydancer Light hier direkt online abrufbar:
https://codepen.io/fabmann/pen/wBzyRwE

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.

Mittlerweile ist aus "Demoscene Showcase" ein eigenes Tool entstanden. Es trägt den Titel "Raydancer" und ist ein audioreaktives WebGL 2 Werkzeug mit Party-Modus, einem VJ-Panel mit keyboard hotkeys und vier verschiedenen Szenen.

Raydancer Light kann hier abgerufen werden:
https://codepen.io/fabmann/full/wBzyRwE

Realtime onset audio detection im Browser ist leider eine neverending Story, mittlerweile funktioniert es halbwegs gut,
aber ich fürchte restlos werde ich eine gewisse Latenz und gelegentliche Fehler nicht beseitigen können. Die full version verwendet daher offline audio analysis mittels Essentia Audio, die dauert aber pro Track 60-70 Sekunden.
Andere Browser-Tabs als Audio-Quelle zu verwenden funktioniert nur in Chromium basierten Browsern.

Über Feedback von euch würde ich mich sehr freuen