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.

Three.js / fragment shader Canvas Liquid Glass

WebGL pass Loading texture...

Width 0.340 Height 0.260 Radius 0.50 Strength 0.110 Chroma 0.340 Frost 0.180 Tint 0.200

Blur 0.72

Amount 30%

Stage 1 / 0.00-2.40 / 1/4 pyramid

Drag the lens. The background, refraction, chroma and material are all drawn in one custom shader.

Runtime src/labs/liquid-glass/canvasRuntime.ts

Reference Local shader pass