Experiment 06
One scene, one lens, three rendering approaches
Published: Aug 5, 2026
This comparison puts two published WebGL libraries alongside the custom SVG filter from the Liquid Glass experiment. The WebGL libraries refract rasterised snapshots of the page, while the custom filter works directly on the live DOM. Drag each lens over the pulsing bars and text to see the difference.
Open to new projects, ideas, and conversations
Experiment 06
One scene, one lens, three rendering approaches
Published: Aug 5, 2026
This comparison puts two published WebGL libraries alongside the custom SVG filter from the Liquid Glass experiment. The WebGL libraries refract rasterised snapshots of the page, while the custom filter works directly on the live DOM. Drag each lens over the pulsing bars and text to see the difference.
Drag the lens across
these words.
Compare the distortion
Same scene, same lens — only the glass changes.
An SVG displacement-map filter applied straight to the live DOM.
Drag the lens across
these words.
Compare the distortion
Same scene, same lens — only the glass changes.
A WebGL shader over an html-to-image raster, re-captured on demand.
Drag the lens across
these words.
Compare the distortion
Same scene, same lens — only the glass changes.
A WebGL shader over a one-shot raster snapshot of the page.
There is no universal winner. Working from a rasterised copy is what lets both libraries afford a real Gaussian blur, a Fresnel term and a proper specular model on the GPU — effects an SVG filter chain pays dearly for. The libraries buy inexpensive optics with a stale copy of the page, while the custom SVG filter preserves the live page with a more expensive filter.
This part does not show up in a screenshot. The copy-based approach needs to know which elements move, where they sit in the tree, and whether they survive being cloned.
The controls above stay focused on the lens effect. YB also supports color, shadow, distortion, dome and button treatments; liquidGL also includes shadow, specular, reveal and pointer-tilt options.