LiquidGlass

Was ist LiquidGlass?

LiquidGlass ist eine leichte JavaScript/TypeScript-Bibliothek, die realistische Glaseffekte auf jedem HTML-Element mit WebGL-Shaders rendert. Sie wendet Brechung, Unschärfe, chromatische Aberration, spekulare Reflexe und zugehörige Beleuchtungseffekte an, indem sie den DOM-Inhalt hinter jedem Glaselement erfasst und in Echtzeit kompositiert.

Die Bibliothek ist für beliebige Seitenhintergründe (Bilder, Videos, Canvas oder einfaches HTML) ausgelegt. Sie nutzt eine Multi-Pass-Rendering-Pipeline und unterstützt mehrere Glasschichten, element-spezifische Konfigurationen und dynamische Updates auf der Seite.

Hauptfunktionen

• WebGL-Shader-basierte Glasdarstellung für HTML-Elemente: Erzeugt das Glas-Optik, indem der DOM-Inhalt hinter dem Glaselement verarbeitet und als Shader-Ausgabe kompositiert wird.
• Echtzeit-Multi-Pass-Pipeline: Unterstützt Effekte wie Brechung, Unschärfenstärke, chromatische Randverfärbung und spekular/rim-Beleuchtung.
• Element- und globale Konfiguration: Konfiguriere jedes Glaselement individuell via data-config (JSON) oder globale Standardwerte über die defaults-Option.
• Schichtweise Glas-Komposition: Unterstützt Glas-auf-Glas-Setups durch den Kompositionsansatz.
• Interaktive Positionierungsoptionen: Kann bei Aktivierung (z. B. floating: true) verschiebbares „schwebendes“ Panel-Verhalten injizieren und enthält einen button-Modus für Hover/Press-Shader-Feedback.
• Realistische Oberflächensteuerungen: Parameter umfassen cornerRadius, zRadius (Fasen-Tiefe), bevelMode (Formkrümmungsmodus), brightness, saturation, shadowOpacity und fresnel-Reflexion.

So verwenden Sie LiquidGlass

1. Installieren oder importieren: Via npm installieren (npm install @ybouane/liquidglass) oder direkt vom CDN importieren (https://cdn.jsdelivr.net/npm/@ybouane/liquidglass/dist/index.js).
2. Positionierten Root-Container erstellen: Das an LiquidGlass.init() übergebene root-Element muss ein Container mit position: relative sein.
3. Glaselemente im Root hinzufügen: Jedes Glaselement muss ein direktes Kind des Roots sein. Bei Initialisierung injiziert LiquidGlass ein <canvas> als erstes Kind des Glaselements für die Shader-Ausgabe.
4. Initialisieren: Instanz mit LiquidGlass.init({ root: document.querySelector('#my-root'), glassElements: document.querySelectorAll('.glass') }) erstellen und später mit instance.destroy() aufräumen.
5. Effekte konfigurieren: Element-spezifische Einstellungen via element.dataset.config = JSON.stringify({ ... }) angeben (z. B. Unschärfe, Brechung, Eckradius). Verwenden Sie das Playground-Muster für visuelle Anpassungen.

Anwendungsfälle

• Individuelle „Glas“-Karten und Panels: Frosted, dunkles oder normales Glas-Styling auf Karten-Elemente durch Anpassung von blurAmount, brightness, cornerRadius und zRadius anwenden.
• Interaktives Lupe-ähnliches Objektiv: bevelMode: 1 mit passendem cornerRadius und zRadius für Halbkugel-/Kuppel-Objektiv-Effekt nutzen (optional floating aktivieren).
• Hover/Press-UI-Feedback: button: true setzen, damit das Glaselement auf Benutzerinteraktion reagiert – Hover erhöht Helligkeit, Press flacht Fasung ab und vertieft Schatten.
• Schichtweise Glas-auf-Glas-Kompositionen: Multi-Layer-UI mit überlappenden Glaselementen aufbauen, unter Nutzung der LiquidGlass-Komposition für gestapelte Effekte.
• Glas über reichen Hintergründen: Glaselemente über Hintergründen wie Bildern, Videos, Canvas oder normalem HTML-Inhalt platzieren, wobei diese im Root als abgetastete Kinder bleiben.

FAQ

Benötige ich eine spezifische DOM-Struktur?
Ja. Der root muss ein positionierter Container (position: relative) sein, und jedes Glaselement muss ein direktes Kind des Roots sein. Verschachtelte Glaselemente werden bei Init mit einer Konsole-Warnung abgelehnt.

Was erfasst LiquidGlass für den Glaseffekt?
Der Shader tastet die Kinder des Roots ab, daher sollte Hintergrundinhalt wie Bilder in einem Geschwister-Element im Root liegen. Der Root selbst wird nicht erfasst.

Erstellt LiquidGlass DOM-Elemente für mich?
Es injiziert ein <canvas> als erstes Kind des Glaselements für die Shader-Ausgabe. Vermeiden Sie daher :first-child-CSS-Selektoren für das Glaselement.

Kann ich mehrere LiquidGlass-Roots auf einer Seite verwenden?
Die Einschränkungen besagen, dass mehrere LiquidGlass-Roots keine Brechung teilen können. Glaselemente in einem Root sehen nicht, was Glaselemente in einem anderen Root rendern.

Gibt es Performance-Aspekte?
Ja. Die Bibliothek basiert auf Echtzeit-DOM-Rasterisierung und einer Multi-Pass-WebGL-Pipeline; das Erfassen von DOM in ein Canvas gilt als aufwendig.

Alternativen

• CSS-only Glaseffekte (backdrop-filter / Blur-Techniken): Einfachere, rein CSS-basierte Ansätze können Frostglas approximieren, bieten aber typischerweise nicht dasselbe Verhalten bei Brechung/chromatischer Aberration/spekularem Pipeline-Verlauf.
• WebGL-Shader-Frameworks oder eigene Three.js/WebGL-Implementierungen: Bei Bedarf an voller Kontrolle können Sie eigene Shader-Pässe implementieren; dies verlagert die Arbeit von einer Bibliotheksabstraktion in Ihre eigene Rendering-Pipeline.
• Andere DOM-to-Canvas/Echtzeit-Effekt-Pipelines: Benachbarte Lösungen, die DOM zu Texturen rasterisieren, eignen sich für Screen-Space-Effekte, unterscheiden sich jedoch in Workflow und Konfiguration von LiquidGlass’ DOM-basiertem Glaselement-Setup.
• Statische Design-Assets: Wo Interaktionen und Echtzeit-Updates nicht benötigt werden, können vorgerenderte Glasbilder oder exportierte Komponenten die Laufzeitkosten senken – auf Kosten dynamischer Brechung/Parameteränderungen.