Showcase 06 · Raymarching

Frozen Glass

Das Frozen-Material des Design-Systems, diesmal als echtes Glas. Ein App-Icon, ein Browserfenster, ein Neuron und das Moralo-„M“ schweben im Studio und verformen sich weich ineinander, drei Glastropfen verschmelzen mit ihnen. Ziehen Sie mit der Maus oder dem Finger, um die Szene zu drehen; ein Klick formt das nächste Objekt.

Standbild: ein gläsernes Moralo-„M“ schwebt über einem gepunkteten Boden, an seinen Kanten bricht sich das Licht in Violett, Pink und Blau

Die Live-Demo benötigt JavaScript und WebGL 2. Das Bild zeigt das gläserne Moralo-„M“; die Erklärung unten ist auch ohne sie lesbar.

So funktioniert es

Kein einziges Dreieck: Jede Form ist eine Distanzfunktion, eine Formel, die für jeden Punkt im Raum den Abstand zur nächsten Glasoberfläche liefert. Ein Fragment-Shader schickt für jedes Pixel einen Strahl los und tastet sich in Schritten dieser Länge voran, bis er die Oberfläche trifft (Raymarching). Beim Wechsel werden die Distanzen zweier Formen gemischt, und die Tropfen verschmelzen über eine weiche Vereinigung (Smooth Union) mit dem Körper.

Am Glas teilt sich jeder Strahl nach den Fresnel-Gleichungen in Spiegelung und Brechung. Rot, Grün und Blau haben eigene Brechungsindizes, so entstehen die Regenbogenränder der Dispersion. Im Inneren wird der Strahl mehrfach reflektiert, auch total, und das Glas schluckt mit der Weglänge etwas Licht. Am Boden sammelt sich das durch das Glas gebündelte Licht zu Kaustiken. Die Szene wird in geringerer Auflösung gerechnet und hochskaliert; Auflösung und Bounces passen sich der Bildrate an. Die Studio-Lichter stammen aus den Design-Tokens.