Shape-aware refractive glass component
Built with Three.js, WebGL2 fragment shaders, and real-time Snell's Law physics. One shared GL context. Zero per-lens overhead.
Shared Canvas Architecture
Implements real-time refraction using Snell's law physics, displacement mapping, and customizable index of refraction (IOR).
A single shared WebGL2 context and unified render loop (LiquidGlassProvider) powers multiple glass panels concurrently without context loss or GPU thrashing.
Uses html2canvas-pro to capture and refract behind-the-glass page content in real-time.
Hover and press spring physics drive responsive refraction scale and scaling transformations.
Edge highlighting, specular lighting rings, and smooth edge anti-aliasing for a photorealistic glass surface.
Convex Squircle, Convex Circle, Concave Circle, Concave Squircle, Lip Circle, and Lip Squircle — each with distinct optical characteristics.
Shared Canvas Provider Pattern
The component is architected around a Shared Canvas Provider pattern to scale efficiently — many glass panels sharing one WebGL2 context, one canvas, and one render loop.
LiquidGlassProviderOwns the single fixed full-viewport WebGL renderer, orthographic camera, and rAF loop. Mount once at the root.
LiquidGlassLight container that tracks DOM position, captures backdrop snapshots, manages hover/press spring physics, and registers with the provider.
engine.tsPure optical physics pipeline: 1D Snell's Law refraction raytracing, 2D displacement & specular map synthesis, and spring physics engine.
shaders.tsHigh-precision GLSL vertex and fragment shaders for optical UV refraction, shape SDF masking, and Fresnel rim lighting.
types.tsShared TypeScript definitions and the LensType enumeration.
All instances share one GL context via LiquidGlassProvider
Standard spherical convex lens magnification.
Inward curving circle lens displacement.
S-curve lip edge profile on circular geometry.
Smooth squircle profile tapering outward.
Inward curving squircle profile.
S-curve lip edge profile on squircle geometry.
Rendering Pipeline
LiquidGlassProvider initializes a single full-viewport WebGL context and orthographic camera aligned to document coordinates.
When backgroundRef is supplied, html2canvas-pro captures the underlying DOM region into a shared canvas texture.
engine.ts calculates displacement vector arrays across 128 samples using Snell's Law (η = n₁/n₂) over the chosen 2D lens profile function f(x).
Synthesizes RGBA displacement normal maps (R offset, G offset) and specular reflection maps from the physics output.
The GLSL fragment shader in shaders.ts shifts UV sampling coordinates in document-space, adding Fresnel rim lighting and specular highlights.