Wo WebGL auf Liquid Glass trifft

Die meisten Liquid-Glass-Effekte im Web nutzen DOM-Cloning. Dabei werden HTML-Elemente kopiert, verzerrt, mit Unschärfe versehen und unter einer Glasschicht platziert.

Diese Methode scheitert bei WebGL. Ein DOM-Clone kann keine Pixel von einem Live-Canvas kopieren. Ein Canvas ist ein Framebuffer, der sich in jedem Frame ändert.

Um Liquid Glass auf einem Canvas zu realisieren, gibt es zwei Möglichkeiten. Man kann den Canvas in jedem Frame erfassen, was jedoch rechenintensiv ist. Oder man integriert den Glaseffekt direkt in die WebGL-Pipeline selbst.

Ich habe ein Experiment gebaut, um den zweiten Ansatz zu testen. Ich benötigte einen Hintergrund mit Bewegung, um den Effekt zu zeigen. Ich habe mich von einer interaktiven Wasserwellen-Demo von Konmari inspirieren lassen.

Ich habe meine eigene Version mit realistischer Wellenphysik und schwebenden Blumen erstellt.

Das Ergebnis ist eine WebGL-Wasserszene mit einem Liquid-Glass-Panel. Dieses Panel bricht das Licht des darunter liegenden Live-Canvas.

So funktioniert es:

  • Das Wasser nutzt eine Height-Field-Wellen-Simulation.
  • Pointer-Bewegungen erzeugen Wellen auf einem Raster.
  • Ein WebGL-Shader verwandelt diese Wellen in Licht und Verzerrung.
  • Blumen auf einem 2D-Canvas helfen dabei, die Lichtbrechung deutlich zu zeigen.

Das Glaspanel klont nicht das DOM. Stattdessen tastet es Pixel ab.

Der Render-Ablauf folgt diesen Schritten:

  • Das WebGL-Wasser rendern.
  • Die 2D-Blumen rendern.
  • Beides in einem versteckten Source-Canvas kombinieren.
  • Den Glas-Shader verwenden, um diesen Source-Canvas abzutasten.

Der Shader schätzt eine weiche Kanten-Normale. Er nutzt diese, um die Source-Textur zu biegen. Ich habe eine Tönung und einen chromatischen Split hinzugefügt, damit sich das Material massiver anfühlt.

Das Ziel ist keine perfekte Physik. Das Ziel ist es, das Panel wie ein echtes Material wirken zu lassen, das über einer sich bewegenden Szene liegt.

Das funktioniert, weil die Szene bereits aus Pixeln besteht. Eine vollständige Lösung für das gesamte Web ist schwieriger. Echte Websites nutzen Text, Video und Scrolling.

Ich beobachte diesen Bereich genau. Die Performance wird die größte Herausforderung für zukünftige Lösungen sein.

Demo: https://ripple.carsonye.com/ Repo: https://github.com/Whynotmetoo/water-ripples

Source: https://dev.to/_carson_ye_/where-webgl-meets-liquid-glass-401l