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.

• Cat Avatar

  A 3D cat at its desk that copies your expressions and head turns through your webcam, with a springy tail and whiskers, all on your device.

  WebGPU · face tracking · morph targets · spring bones · MediaPipe

• Spacetime Cube

  Turn a video of up to 30 seconds into a 3D spacetime cube, a time sculpture of stacked frames you can orbit, scrub and carve, entirely in your browser.

  WebGPU · volume ray marching · 3D textures · TSL

• 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

  Drive a 2024 Xiaomi SU7 Max in your browser: tyre grip, load transfer and a sprung body that squats, dives and leans, simulated live and drawn in WebGPU.

  WebGPU · vehicle dynamics · Magic Formula tyre model · suspension simulation · TSL shaders · car paint shader · procedural Web Audio · Three.js

• 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

  A 3D CD whose rainbow is spectral diffraction from its 1.6 µm spiral track, solved per light with the grating equation. Turn it, zoom in, print your own label.

  WebGPU · diffraction grating · spectral rendering · TSL · PMREM

• 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