Mit der Einführung von Liquid Glass hat Apple auf der WWDC25 einen neuen visuellen Designtrend vorgestellt, der für viel Aufmerksamkeit sorgt. Es handelt sich hierbei um eine innovative GUI-Gestaltung, die an glänzendes, flüssiges Glas erinnert und sich durch eine besonders realistische Licht- und Materialwirkung auszeichnet. Auch wenn die Reaktionen der Nutzer unterschiedlich ausfielen, steht fest, dass Apple mit Liquid Glass eine Designrichtung etabliert hat, die das Interface-Erlebnis neu definiert. Da der genaue Rendering-Mechanismus Apples bislang nicht offengelegt wurde, stellt sich die spannende Frage, wie man diesen Effekt eigenständig realistisch nachbilden kann. Im Folgenden erfahren Sie, wie man diesen Effekt mithilfe moderner Shader-Techniken, Signed Distance Functions und physikalischen Prinzipien der Lichtbrechung konsequent simulieren kann. Zunächst muss die Shape, also die Grundform des UI-Elements, festgelegt werden.
Ob es sich dabei um einen Button, ein Panel oder Text handelt, ist sekundär. Entscheidend ist eine präzise mathematische Darstellung der Form, die dank Signed Distance Functions (SDF) möglich wird. SDFs sind Funktionen, die für jeden Punkt im zweidimensionalen Raum den minimalen Abstand zum Rand eines Shapes liefern. Dieser Ansatz erlaubt eine sehr flexible und dynamische Verarbeitung, da für beliebige Pixelwerte sofort die Nähe zum Shape berechnet werden kann. Eine visuelle Darstellung der SDF kann durch eine Graustufenkarte erfolgen, bei der dunklere Pixel jene Bereiche markieren, die näher am Shape liegen. Die bewegliche Verschiebung des Shapes ist intuitiv, was eine dynamische Interaktion bei der Visualisierung erleichtert. Um den Liquid Glass Effekt glaubwürdig wirken zu lassen, ist es essenziell, die Oberflächenbeschaffenheit im Licht zu simulieren. Dafür ist die sogenannte Normalberechnung zentral, da sie definiert, wie Licht an einem Objekt reflektiert wird.
Im konventionellen 3D-Rendering wird die Normalenberechnung aus den Oberflächendaten des 3D-Modells entnommen. Da wir uns hier aber mit einem zweidimensionalen Shape beschäftigen, ist eine „gefakte“ Berechnung notwendig. Diese erfolgt mithilfe der Gradienten des SDF-Werts entlang der X- und Y-Achse im Bildschirmraum. Ein zusätzliches Element in Z-Richtung entsteht durch eine Gewichtung abhängig von der Nähe zum Rand des Shapes. So simulieren wir eine abgerundete 3D-Form, die sich perfekt für die Lichtinteraktion eignet. Als nächstes folgt die komplexe Aufgabe der Lichtbrechung, ohne die der „glassy“ Look nicht zustande kommt. Die physikalischen Gesetze, die hier verwenden werden, basieren auf Snell’s Gesetz, das beschreibt, wie Lichtstrahlen an der Grenze zweier Medien mit unterschiedlichem Brechungsindex (Index of Refraction, IOR) gebrochen werden. Für Glas wird üblicherweise ein IOR von etwa 1,52 angenommen, während Wasser bei circa 1,33 liegt.
In der Shader-Logik bedeutet das, dass ein Lichtstrahl, der auf das Glas trifft, nicht einfach gerade weiterläuft, sondern in einem Winkel gebrochen wird, das vom Verhältnis der beiden IOR-Werte abhängt. Für die praktische Simulation wird der Strahl vom Beobachter zur Oberfläche hin verfolgt und der refraktierte Vektor berechnet. Dieser ermöglicht es, den Hintergrundtextur durch das Shape gebrochen darzustellen, was den simulierten Glas-Eindruck erzeugt. Ein weiterer wichtiger Aspekt ist die Reflexion des Lichts an der Oberfläche des Glases. Während ein Teil des Lichts durch das Material hindurchgeht und gebrochen wird, reflektiert ein anderer Teil. Diese Spiegelung ist für die charakteristischen Highlights und den realistischen Glanzeffekt verantwortlich. Statt die komplexen Fresnel-Gleichungen komplett physikalisch exakt nachzubilden, ist es in der Shader-Praxis üblich, Reflexion und Brechung heuristisch zu mischen.
Der Reflexionsvektor wird hierbei durch Umkehrung des Einstrahlvektors an der berechneten Normale bestimmt. Kombiniert man dann die reflektierten und gebrochenen Lichtanteile mit dem Hintergrund, erhält man ein nahezu fotorealistisches Glasmaterial mit tiefen, lebendigen Highlights. Die Arbeit mit Signed Distance Functions bietet zudem einen bemerkenswerten Vorteil, wenn es darum geht, mehrere Formen elegant miteinander zu verschmelzen. Das sogenannte Smooth Minimum Verfahren, bekannt geworden durch Inigo Quilez, erlaubt es, zwei unterschiedliche Shapes weich ineinander fließen zu lassen. So entstehen Transitions- und Blendings, die den flüssigen Charakter von Liquid Glass verstärken und ein visuelles Erlebnis erzeugen, das lebendig und dynamisch wirkt. Ein weiteres visuelles Detail, das die Realitätsnähe des Effekts erhöht, ist die chromatische Aberration.
Dieses Phänomen entsteht, wenn verschiedene Wellenlängen (also Farben) des Lichts unterschiedlich gebrochen werden, was zu einem leichten Versatz im Farbkanälen führt. In Rendering-Shadern wird dies dadurch simuliert, dass die Texturkoordinaten für Rot- und Blauanteile leicht verschoben werden. Dieses subtile Farbspiel sorgt für eine reizvolle Verzerrung an den Rändern und ergänzt den Glaseffekt perfekt um eine Dimension mehr Tiefe und Komplexität. Trotz aller technischen Tricks ist klar, dass die originale Liquid Glass Umsetzung von Apple vermutlich noch weiter ausgefeilter ist. Das hier beschriebene Konzept stellt eine erste, schnelle Annäherung dar, die mit relativ wenig Aufwand und fundiertem Shaderwissen bereits recht überzeugende Resultate liefert. Wer sich tiefer mit dem Thema Signed Distance Functions beschäftigen möchte, findet so genannten Raymarching-Algorithmen, die auf 3D-SDFs basieren.
Die Arbeiten von Inigo Quilez stellen hierbei eine exzellente Ressource dar und bieten unzählige Inspirationen für anspruchsvolles Rendering. Liquid Glass zeigt eindrucksvoll, wie moderne Designästhetik und komplexe Shadertechnik verschmelzen, um die Grenzen zwischen digitaler und realer Oberfläche aufzulösen. Apples Innovation führt vor Augen, wie wichtig physikalisch inspirierte Methoden für zeitgemäßes Interface-Design sind und wie mit fundiertem Wissen über Licht, Materialeigenschaften und mathematischen Funktionen faszinierende visuelle Effekte entstehen können. Zusammenfassend lässt sich sagen, dass das Nachbilden von Liquid Glass durch ein Zusammenspiel aus einer präzisen Shape-Definition per Signed Distance Functions, der Normalenberechnung für realistische Lichtreflexion, der Umsetzung von Lichtbrechung nach Snell’s Gesetz sowie der Kombination von Brechung und Reflexion gelingt.
ergänzt wird dieser Effekt durch das kreative Verschmelzen von Formen mittels Smooth Minimum und chromatische Aberration. Für Entwickler und Grafiker eröffnet diese Methodik spannende Möglichkeiten, neue UI-Stile und eindrucksvolle Effekte zu erschaffen, die Nutzer visuell begeistern und technisch beeindrucken.
