Photorealistic Liquid Glass

#liquidglass #webgl #threejs #glsl

I’ve been building a photorealistic Liquid Glass component for React. This started as an exploration of recreating the kind of optical UI effects normally achieved with SVG filters and feDisplacementMap. The problem is that the rendering path I needed for SVG displacement-based backdrop refraction is effectively limited to Chromium-based browsers but not for others. So I built a WebGL2 rendering pipeline instead for cross-browser compatibilities using
• Three.js
• WebGL2
• GLSL fragment shaders and
• html2canvas-pro for dynamic DOM background capture.

The interesting part is not the technical components using to render it. I have been trying to simulate an actual optical lens using Physics.

First, the background DOM is captured into a texture using html2canvas-pro.
Then, the engine calculates optical displacement using a 1D ray-tracing model based on Snell's Law:
η = n₁ / n₂

The lens profile defines the surface geometry. The ray is refracted as it enters and exits the simulated glass, producing displacement values across the surface.

Those values are then synthesized into 2D displacement and specular maps.
The WebGL fragment shader uses these maps to build lens that simulate real refraction.

The component currently supports six different lens profiles:

Convex Squircle
Convex Circle
Concave Circle
Concave Squircle
Lip Circle
Lip Squircle

The result is a UI component where parameters like:
• IOR
• Glass thickness
• Bezel width
• Lens radius and
• Refraction scale which directly influence the optical behavior.

The current architecture is essentially:
DOM snapshot → GPU texture → WebGL2 → GLSL refraction shader

This approach trades native live backdrop sampling for a controlled GPU-based rendering pipeline that works consistently across browsers with WebGL2 support.

The project has become a pretty deep intersection of frontend engineering , computer graphics and Physics.

What started as “I want a liquid glass effect” eventually turned into building a small optical rendering engine for the browser.

Still refining the physical model and edge behavior, but the result is getting closer to the kind of glass UI I had in mind.

Live Demo - https://liquid-glass-five-ashy.vercel.app/
Repo - https://github.com/Hla-aung/liquid-glass

References
https://kube.io/blog/liquid-glass-css-svg/
https://github.com/naughtyduk/liquidGL