SHADER·03 Fluid Glass — Four invisible fields merge into a refractive surface. Move one with your pointer, change its density, and send a shockwave around the liquid edge.

Shader Studies · implicit surfaces

Glass that behaves like water.

Four invisible fields merge into a refractive surface. Move one with your pointer, change its density, and send a shockwave around the liquid edge.

compiling WebGL…

A first screen with depth.

native WebGL · CSS-token colour uniforms · Canvas-free fragment field

01 · surface

No mesh exists

The glass is an isocontour of four inverse-square fields evaluated for every pixel.

02 · normal

Refraction from a gradient

Two neighbouring samples approximate a normal that bends the internal line field.

03 · touch

One field belongs to you

The fourth metaball follows mouse or tap input and changes density from the control.