INITIALIZING SHADER...
Testumgebung
WebGL Raymarching SDF

Raymarching
Lab

Eine Echtzeit-SDF-Raymarching-Szene mit irisierender Faerbung, morphing zwischen geometrischen Formen und interaktiver Kamerasteuerung. Vollstaendig in einem Fragment-Shader berechnet — keine Geometrie, keine Meshes.

Speed1.0
Glow0.8
Distortion0.30
Hue Shift0.00
scroll
Wie funktioniert Raymarching?
01 / SDF

Signed Distance Fields

Statt Dreiecke zu rendern, berechnet der Shader fuer jeden Pixel die Distanz zur naechstgelegenen Oberflaeche. Die Funktion map(pos) gibt zurueck, wie weit ein Punkt von der Oberflaeche entfernt ist.

02 / March

Ray Marching Loop

Von der Kamera aus wird ein Strahl pro Pixel in die Szene geschickt. In jedem Schritt wandert der Strahl um die berechnete Distanz vorwaerts. Nach 80 Schritten oder bei Treffer endet der Loop.

03 / Shading

Normalen und Lighting

Durch zentrale Differenzen wird die Oberflaechennormale geschaetzt. Daraus entstehen Diffuse-Lighting, Specular-Highlights und der irisierende Farbverlauf durch Fresnel-Approximation.

04 / Iridescence

Thin-Film Interferenz

Die Farben entstehen durch Simulation von Duennfilm-Interferenz: abhaengig vom Blickwinkel und der Normalen variiert die Wellenlaengen-Interferenz. Das erzeugt die charakteristischen Oelfleck-Regenbogenfarben.

05 / Morphing

Smooth Blend

Zwischen verschiedenen SDF-Primitiven wird mit smin() — smooth minimum — ueberblendet. So entsteht die fliessende Transformation von Kugel zu Torus, Box oder Oktaeder.

06 / GPU

Vollstaendig auf der GPU

Die gesamte Szene — Geometrie, Beleuchtung, Farbe — wird im Fragment-Shader berechnet. Kein JavaScript pro Frame fuer Rendering. Nur ein Fullscreen-Quad wird gezeichnet.

60 FPS
80 March Steps
5 SDF Shapes
1920x1080 Resolution