Wasserkaustiken im Browser werden in Echtzeit als Lichtstrahlen berechnet

Ein Entwickler unter dem Nickname ScottieFox hat den Quellcode des Projekts CAUSTIC//VOLUME offengelegt — zwei Browser-Szenen mit Wasser, in denen die Kaustiken am Boden in jedem Frame anhand von Lichtstrahlen berechnet werden. Jeder Knoten eines feinen Gitters auf der Oberfläche schickt einen Strahl durch die Wassersäule nach unten, und helle Linien entstehen dort, wo benachbarte Strahlen auf dem Boden zusammenlaufen.

Beide Versionen sind jeweils eine einzige HTML-Datei auf Basis von three.js, ohne Installation und ohne Build: im Browser öffnen, und es läuft. Der Code steht unter MIT, man darf ihn also lesen, ändern und in kommerziellen Projekten einsetzen, sofern der Copyright-Hinweis und der Lizenztext erhalten bleiben.

Wie die Helligkeit der Kaustiken berechnet wird

Die Helligkeit ergibt sich aus dem Flächenverhältnis: Ein Oberflächenabschnitt, dessen Licht auf einen kleineren Bereich des Bodens fällt, konzentriert es stärker, und der Shader erhält dieses Verhältnis über Bildschirmableitungen. Überlappende Bereiche addieren sich — so entstehen die charakteristischen wandernden Lichtfäden. Sonnenstrahlen, die durch die Glaswand unterhalb des Wasserspiegels eintreten, kommen separat hinzu.

Die Oberfläche besteht aus 24 laufenden Wellen mit Längen von 1,2 Metern bis 12 Zentimetern, deren Richtungen über den goldenen Winkel gestreut sind, damit Wellen ähnlicher Länge nicht nebeneinander verlaufen. Dadurch wird das Kaustiknetz zellenartig statt streifig, wie es bei einem gerichteten Wellengang der Fall wäre. Die Wellenhöhen sind so gewählt, dass jede Skala das Licht ungefähr gleich stark ablenkt — genau das erzeugt die schärfsten Linien am Boden.

Die interaktiven Ringe auf dem Wasser berechnet eine separate GPU-Simulation der Wellengleichung auf Basis des GPUComputationRenderer aus three.js: Sie verteilt Nutzerklicks, Windböen und die Kielwelle einer Ente im Aquarium und lässt all das am Glas reflektieren. Das Wassermaterial arbeitet mit den Fresnel-Formeln für die Himmelsreflexion und dem Snelliusschen Gesetz für die Brechung des Blicks in die Tiefe, jenseits des Grenzwinkels setzt Totalreflexion ein, und die Farbe liefert die Absorption nach Bouguer–Lambert: Rot verschwindet schneller als Blau.

Eine Demo fürs Handy, die zweite für die Top-Grafikkarte

CAUSTIC//LITE ist ein Glasaquarium, eine Gummiente auf der Oberfläche und eine umschaltbare Lichtquelle: Sonne oder Hängelampe. Per Klick lässt sich eine Welle erzeugen und die Ente anstoßen, mit Reglern lassen sich Wellenhöhe und Turbulenz verändern. Das gesamte Programm umfasst rund 990 Zeilen samt Kommentaren und ist darauf ausgelegt, gelesen zu werden. Die Seite überwacht selbst die Bildrate und passt die Renderauflösung an, und falls WebGL 2 nicht verfügbar ist oder three.js nicht geladen wurde, wird die Szene samt Ente in reinem JavaScript auf einem 2D-Canvas getraced.

Die Vollversion umfasst etwa 7500 Zeilen, verteilt auf 18 Module, und ist auf starke Hardware ausgelegt: Sie benötigt WebGL 2 mit der Erweiterung EXT_color_buffer_float. Hinzugekommen sind darin:

• ein FFT-Ozeanspektrum über der interaktiven Kräuselsimulation (iWave), Schaum und Spritzer;
• ein kaustisches Volumen, das Lichtschächte durchs Wasser treibt, sowie Photonen-Tracing der Kaustiken mit Farbdispersion;
• physikalischer Auftrieb für ein Spielzeug-Schlachtschiff, ein Piratenschiff, eine Gummiente, eine Flaschenpost, eine Truhe, einen Anker, eine Amphore und einen Taucherhelm;
• schwarmbildende Clownfische und Doktorfische, eine pulsierende Qualle mit wogenden Tentakeln, ein Oktopus mit zwei Saugnapfreihen und eine seitwärts laufende Krabbe;
• eine dreidimensionale Tintensimulation und bunter Sand, der sich in Schichten absetzt — beides wird von der Strömung erfasst, wenn man das Wasser per Ziehen umrührt;
• bis zu drei Lampen mit eigenen Farben und ein Laser, der sich auf halber Wasserhöhe bricht und an den Wänden reflektiert wird;
• Qualitätspresets von Low bis Insane mit zeitlichem Antialiasing, Bloom und Schärfentiefe.

Besonders interessant ist die Unterwasserperspektive: Der Raytracer beherrscht sowohl die Totalreflexion als auch das Snellius-Fenster — jenen Himmelskreis, den man von unten beim Blick auf eine ruhige Oberfläche sieht.

Wo man es bekommt und was man damit machen darf

Das Projekt CAUSTIC//VOLUME liegt vollständig auf GitHub: Das Repository lässt sich als ZIP-Archiv herunterladen, dann öffnet man lite/index.html oder sandbox/index.html lokal. Ein Server ist nicht nötig, three.js in der Version r186 wird über eine Import Map vom CDN jsDelivr nachgeladen und danach vom Browser gecacht. Die Sandbox wird mit einem einzigen Befehl unter Node 18 aus den Modulen neu gebaut, zusätzliche Abhängigkeiten gibt es nicht; optionale Tests lassen beide Szenen über Playwright in einem Headless-Chromium laufen und schlagen bei Shader-Fehlern fehl.

Der Autor bittet Beitragende, zwei Bedingungen einzuhalten: Jede Version bleibt eine einzelne HTML-Datei auf Basis von three.js ohne Installation, und die Lite-Variante darf tausend Zeilen nicht überschreiten und muss einen funktionsfähigen CPU-Fallback behalten.

Warum solche Demos wieder im Browser entstehen

In Echtzeit werden Kaustiken meist auf billige Weise dargestellt — als vorberechnete animierte Textur, die auf den Boden projiziert wird; dieser Kniff kommt auch in den typischen Beispielen für three.js zum Einsatz. In großen Engines taucht eine physikalisch korrekte Berechnung in der Regel erst zusammen mit Raytracing auf oder bleibt in einer geschlossenen Implementierung verborgen, in die ein Artist nicht hineinschauen kann. Der Wert dieser Veröffentlichung liegt vermutlich genau darin, dass eine lesbare Variante vollständig und ohne Lizenzbeschränkungen offengelegt wurde.

Die Methode selbst ist nicht neu: Den Vergleich der Flächen des ursprünglichen und des gebrochenen Oberflächenabschnitts nutzte schon Evan Wallace in seiner WebGL-Demo, die bis heute auf verschiedene Plattformen portiert wird — Links zu solchen Ports führt auch 80 Level an. Neu sind hier Umfang und Zugänglichkeit: dasselbe Prinzip ist zu einer vollwertigen Sandbox mit Auftrieb, Tinte, Sand und Lichtschächten ausgebaut und bleibt dabei eine Datei, die sich per Doppelklick öffnen lässt.

Dass das Projekt gerade jetzt erscheint, wirkt folgerichtig: WebGL 2 ist zum gemeinsamen Nenner aller aktuellen Browser geworden, Safari eingeschlossen, und Float-Targets sind keine Exotik mehr, sodass eine ernsthafte Simulation im Browser deutlich zugänglicher wurde. Bezeichnend ist auch der Hinweis in der Dokumentation, dass Chrome ab Version 141 auf Rechnern ohne funktionierende GPU nicht mehr auf Software-WebGL zurückfällt — daher der Nachdruck auf dem CPU-Fallback in der Lite-Version. Rund um Wasser in three.js ist insgesamt spürbar Bewegung, auch kommerziell, und ein kostenloses Projekt mit einer ausführlichen Analyse der Algorithmen setzt die Messlatte dafür, was in einem Browser-Tab als machbar gilt. Sollte sich das Format offener Einzeldatei-Technodemos etablieren, sammelt sich in der Community nach und nach ein Korpus von Referenzimplementierungen für Effekte an, die früher als ungefähre Hacks von Projekt zu Projekt weitergereicht wurden.