How a Transformer Works
publicAn interactive Word Machine that explains how transformers like the ones behind chatbots work: words as number cards, attention as listening wires, layers, guessing the next word, and writing one word at a time.
Experiments
These are some of my favorite open source Three.js samples, alongside explorations of the burgeoning WebGPU ecosystem. I'm spending time digging in, extending, combining, and exploring creative new implementations.
3D Learning Experiences
How a Depth Model Learns
publicAn interactive explainer of how depth models like Depth Anything and MoGe learn: guess, check and nudge, a teacher and a student, and lifting a photo into 3D.
An interactive Picture Machine that explains frame time and frames per second: a screen is a flipbook on a beat, and a picture that isn't ready in time means the same picture again.
Core Experiments
TypeGPU + WebGPU
publicA futuristic vehicle explorer with TypeGPU shaders, a procedural supercar, animated telemetry, and exploded component views. Touch-friendly; a WebGPU-capable browser and device are required.
Pipe Screen Saver
publicThe classic Windows 3D Pipes screensaver, rebuilt with TypeGPU and WebGPU: pipes in the original teapot-material colours grow through a box, turning at ball joints and elbows, until the scene dissolves to black and starts again. Click for a new scene.
Cloth Sim Alley
publicWashing strung across a rain-soaked cyberpunk alley, simulated on the GPU with TypeGPU and WebGPU: twenty-three garments cut from cloth grids blow in gusting wind and the warm air of street vents, pushed aside by delivery drones, lit by neon through rain, haze and puddle reflections, with cats and rats underfoot. Fly through it, or grab a drone and fly that.
Vapor Splat
publicA standalone 3DGS experiment exploring spatial web presentation.
A focused Spark.js scene that interpolates between placeholder SOG assets with keyboard controls.
A Spark.js 3DGS scene that drives reflective car paint with generated environment maps.
3DGS Semantic Understanding
privateA Spark.js 3DGS scene that projects image-recognition detections back into world-space markers.
360 Depth Map to 3DGS World
privateAn editable primitive world generator that exports equirectangular depth maps for downstream world synthesis.
4DGS Gracia WebSDK
publicA Gracia WebSDK Three.js sample for exploring streamed 4D Gaussian scenes.
A Spark.js Gaussian world foundation scene with streamed GRACIA 4DGS performers layered into the same experiment.
React Three Fiber
Mixing HTML and WebGL
publicA route-local React Three Fiber scene with HTML occlusion.
SSGI Spheres with Rapier
publicA physics-driven sphere study inspired by the pmndrs SSGI demo.
A reflective sphere with environment blur controls and preset transitions.
Cell Fracture
publicAn interactive text fracture scene with animated GLB fragments.
Image Gallery
publicA reflective spatial image gallery with clickable camera transitions.
Thunder Clouds
publicA stormy cloud scene with physics-driven lightning and camera shake.
A reflective vehicle scene with declarative lightformers and dynamic environment mapping.
Audio Analyser
publicA procedural audio-reactive scene inspired by the pmndrs audio analyser demo.
Envmap Ground Projection
publicA projected HDR environment with reflective car paint and ground contact.
Re-using GLTFs
publicA small scene showing multiple instances from one loaded GLTF asset.
A photosphere navigation study with annotated portals.
Grass Shader
publicA wind-driven instanced grass shader scene.
Color Grading
publicA post-processing color grading study using a LUT.
Water Shader
publicA large procedural ocean plane with animated normals.
Enter Portals
publicThe pmndrs enter-portals demo with blended MeshPortalMaterial scenes.