Experimental Lab

Real-time graphics studies built with WebGPU, Three.js and TSL — shader techniques, GPU particle systems and interaction experiments, each one running live in the browser.

These demos need a browser with WebGPU support, such as Chrome 113 or later.

• Grass

  A wind-swept grass field with hundreds of thousands of blades animated entirely on the GPU, using WebGPU compute shaders written in Three.js TSL.

  WebGPU · TSL compute shaders · GPU instancing · Three.js

• Magnetic Switch

  An interactive exploded view of a Hall-effect magnetic keyboard switch, with scroll-driven assembly animation and physically based materials.

  WebGPU · Three.js · product visualisation · GSAP

• Car

  A real-time car showroom and paint configurator featuring metallic flake car paint, a reflective studio floor and bloom post-processing.

  WebGPU · car paint shader · post-processing · Three.js · configurator

• Animation Particles

  Millions of particles emitted from the surface of an animated skinned mesh, sampling bone transforms on the GPU so the trail follows the character in real time.

  WebGPU · GPU particles · skinned mesh sampling · TSL compute shaders

• Galaxy Particles

  A procedurally generated spiral galaxy built from GPU-simulated particles, with curl-noise motion and HDR colour grading computed in TSL.

  WebGPU · GPU particles · procedural noise · TSL

• CD

  The rainbow diffraction of a compact disc recreated with a thin-film interference model, so the iridescence shifts with the viewing angle.

  WebGPU · thin-film interference · iridescence shader · Three.js

• Interior Mapping

  Interior mapping fakes rooms behind a building's windows from a single flat quad by ray-marching a cube map in the fragment shader — no interior geometry.

  WebGPU · interior mapping · cube map ray-box intersection · TSL

• Parallax Depth

  Parallax occlusion mapping offsets UVs by a height map along the view vector, giving a flat cobblestone plane real depth without extra triangles.

  WebGPU · parallax occlusion mapping · height maps · TSL

• Text Stretch

  A distortion field that stretches and smears typography as the pointer moves through it, driven by a signed-distance falloff evaluated per pixel.

  WebGPU · distortion shader · SDF · TSL