Liquid Glass

Liquid glass experiments.

Two focused versions of the same material idea: one keeps the original SVG displacement-map pipeline visible, the other ports the lens into a Three.js fragment shader for canvas/WebGL surfaces.

SVG / DOM filter

SVG displacement glass

A DOM-layer reproduction that generates displacement maps, masks, tint, chroma offsets, and an SVG filter preview.

Open demo

Three.js / WebGL

Canvas shader glass

A fullscreen Three.js pass that draws the background, rounded lens mask, refraction, chroma, frost, and tint in one custom shader.

Open demo

Notes

SVG and Canvas are separated so each runtime can be inspected without the other demo competing for scroll space.
The Canvas version uses Three.js only for the renderer and fullscreen pass; the liquid lens is custom GLSL.
The Canvas radius is computed in pixel space so non-square lenses keep a correct rounded-rectangle shape.