Play
Experiments in making games with TypeScript & WebGPU.
Fundamentals
Hello Triangle
webgpu / basics
The smallest possible GPU program: three corners and their colours, smoothly blended across every pixel in between — the single draw call everything else in this lab is built from.
Transform Matrices
webgpu / basics
What a transform matrix really does: its columns are the new homes of the x and y axes, and every point just rides along — translate, rotate and scale an F and watch the axes and the shape follow together.
Real-time rendering
Shadow Mapping
webgpu / 3d / rendering
Real-time shadows cast by first rendering the scene from the sun's view to learn what it can see, so pillars hidden from the light fall into shadow; drag to orbit the camera.
PBR
webgpu / 3d / rendering
A grid of spheres lit with physically-based shading, sweeping from metal to non-metal up the rows and from a tight mirror glint to a broad soft sheen across the columns; drag to orbit.
Deferred Shading
webgpu / rendering / 3d
Drawing the scene's colour, surface direction, and position once, then lighting it afterwards in a single screen pass, so 64 moving coloured lights cost the same no matter how much geometry there is; drag to orbit.
Clustered Lighting
webgpu / rendering / compute
Lighting a scene with hundreds of moving lights efficiently by splitting the screen into tiles and giving each tile only the lights that reach it, shown as a heatmap of lights per tile; drag to gather the lights toward the cursor.
Ambient Occlusion
webgpu / rendering / 3d
Soft contact shadows in the nooks and crevices of a scene, computed by asking how much of the open sky each spot can actually see — corners see less, so they darken.
Screen-Space Reflections
webgpu / rendering / 3d
Mirror reflections built entirely from what's already on screen — each reflective spot traces a ray across the image to find what it should show, so the reflection fades away at the edges where there's nothing left to borrow.
Volumetric Light
webgpu / rendering / 3d
God-ray shafts streaming between pillars, made by letting sunlight glow through fog only where its path to the sun is clear and leaving the shadowed haze dark; drag to orbit.
Radiance Cascades
webgpu / rendering / 2d
Soft 2D lighting where every pixel fans out rays and averages the coloured light that reaches it, so glowing discs cast soft shadows and blend where their pools overlap; drag to move a light.
Post-Processing
webgpu / rendering / post-processing
Glowing orbs given a soft camera-lens bloom by pulling out the brightest pixels, blurring them, and adding the haze back over the scene — take the chain apart with the toggles; drag to orbit.
Ray tracing & ray marching
SDF Raymarching
webgpu / 3d / rendering
Shapes drawn with no mesh — just a distance function each pixel steps along — letting orbiting spheres melt and merge into a morphing blob with soft shadows; drag to orbit the camera.
Marching Cubes
webgpu / compute / 3d
Smooth blending blobs turned into a solid triangle mesh on the fly, by deciding cell by cell where the surface crosses through a 3D grid; drag to orbit, and tap to add or carve blobs.
Voxel Ray Tracing
webgpu / raymarch / 3d
A blocky landscape rendered by shooting a ray from every pixel and stepping it cube by cube through the world, giving crisp clean block faces and terrain shaped from layered noise; drag to orbit.
Path Tracer
webgpu / raymarch / 3d
A GPU path tracer rendering a Cornell box with a mirror-metal block and a glass sphere, tracing light bounce-by-bounce until the image converges; drag to orbit.
Black Hole
webgpu / raymarch / 3d
A black hole bends passing light by its gravity, so the starfield warps and the glowing disk's far side arcs up over the shadow; drag to orbit the camera.
Noise & patterns
fBm Octaves
webgpu / procedural / 2d
Fractal noise taken apart: stacking layers of noise, each finer and fainter than the last, builds the rich detail under almost every procedural texture, terrain, and cloud — toggle the layers on one at a time to see it build up.
Domain Warping
webgpu / procedural / 2d
Noise fed back into its own coordinates folds plain fractal noise into flowing, marbled veins — the classic trick behind procedural marble, smoke, and clouds; press and drag to push the pattern around.
Flow Field
webgpu / procedural / 2d
A grid of arrows that line up to follow a smoothly drifting noise field, forming the coherent swirls that steer particle art and flocking; press and drag to stir in a vortex.
Voronoi
webgpu / procedural / 2d
Drifting points carve the plane into glowing cells, each spot belonging to whichever point is nearest, with dark walls along the lines where two points are equally close; move your pointer to add another point.
Truchet Tiles
webgpu / procedural / 2d
Each cell of a grid gets one of two curved tiles at random, yet because the curves always meet the edges in the same places, a field of coin flips weaves into one unbroken pattern of glowing loops and threads.
By-Example
webgpu / procedural / 2d
Tiling a small swatch across a surface with no visible seams or repetition, by blending randomly shifted copies in a way that keeps the original's contrast intact.
Terrain & erosion
Terrain
webgpu / 3d / terrain
A flat grid lifted into rolling lit hills by layering noise at many scales, so broad mountains and fine ripples appear together; drag to orbit the landscape.
Hydraulic Erosion
webgpu / compute / terrain
Thousands of water droplets run downhill each frame, digging where they speed up and dropping silt where they slow, carving branching river valleys into terrain in real time; drag to orbit.
River Erosion
webgpu / compute / terrain
An artificial fractal landscape ages under the stream-power law — rivers incise where their catchment is largest, slopes creep smooth, and a dendritic valley network emerges; drag to orbit the camera.
Rivers & Biomes
webgpu / procedural / 3d
A procedural world map seen from above, where one noise-built height field decides land and sea, paints each elevation as ocean, sand, grass, forest, rock or snow, and threads meandering rivers to the coast.
Voxel Terrain
webgpu / procedural / 3d
A blocky Minecraft-like world where each column rises to a height from layered noise snapped into terraces, coloured by altitude from sand to snow with a flat sea in the basins; drag to orbit.
Waves & water
Sine Wave Sum
webgpu / basics
Fourier's idea made visible: any repeating wave, even a sharp sawtooth or square, is just a stack of plain sine waves — switch the harmonics on one at a time and watch the smooth sines pile up into crisp corners.
Gerstner Wave
webgpu / basics
Why ocean crests are sharp and troughs broad: each surface point also slides sideways, not just up and down, bunching toward the peaks — the tracked dots reveal the closed loop every point really travels.
Gerstner Ocean
webgpu / 3d / water
An ocean built from two dozen overlapping waves that roll each point in a circle to give real sharp crests and broad troughs, with sky reflections, sun glint and foam on the breaking peaks; drag to orbit.
FFT Ocean
webgpu / 3d / water
The film-and-game ocean: a whole sea of waves built at once from a statistical model of how real water moves, with choppy crests, foam, and clear water you can see through to a sunlit seabed; drag to orbit.
Ripples
webgpu / compute / simulation
A simulated water surface where each point pulls toward its neighbours, so drops send ripples expanding outward and adding up into interference rings; drag to trail your own ripples.
Sky, fire & light
Clouds
webgpu / rendering / procedural
Clouds built from a 3D noise field stepped through ray by ray, checking how much sunlight reaches each point for soft, self-shadowed depth as the sky drifts on the wind; drag to look around.
Aurora
webgpu / procedural / 2d
An aurora borealis built from meandering, folding curtains of light tinted green to magenta by height, drifting over a starry night sky; drag to nudge the curtains.
Caustics
webgpu / raymarch / 2d
The bright, restless web of light on a pool floor: a rippling surface bends light by different amounts so neighbouring rays cross and pile up into shifting filaments; drag to send ripples.
Fire
webgpu / procedural / 2d
A flame conjured from rising, swirling noise shaped into a column and coloured with the black-to-red-to-yellow-to-white glow of real heat — no fluid simulation, just clever pattern; press and drag to blow the flame sideways.
Lightning
webgpu / procedural / 2d
Branching lightning built by repeatedly splitting a line and jittering its midpoints into ever-finer zigzags — the same fractal recipe that shapes mountain ridges — striking and fading in glowing filaments; press to aim the bolt.
Vegetation
Forest
webgpu / 3d / instancing
A low-poly forest of hundreds of stylized pines drawn from one shared model and swayed by wind that leans the treetops while trunks stay planted; drag to orbit.
Grass
webgpu / 3d / instancing
A meadow of 100,000 grass blades, each bent by gusts of wind that sweep across the field as coherent waves rather than random jitter; drag to look around.
L-System
webgpu / procedural / 2d
Branching plants grown from a handful of tiny replacement rules applied over and over, where the same rules at a different turn angle give a completely different species; press to bend the branch angle and reshape the plant.
Cities & levels
Dungeon
webgpu / procedural / 2d
Procedural roguelike dungeons built by scattering non-overlapping rooms across a grid and linking them with bent corridors so every room stays reachable.
Wave Function Collapse
webgpu / compute / procgen
A terrain map that builds itself by letting each cell start as every possibility, then committing cells one at a time and rippling the consequences outward so neighbours always fit — water to sand to grass to rock.
Procedural City
webgpu / procedural / 2d
A city plan grown by splitting the map again and again with roads into blocks, then filling each block with a grid of buildings shaded by height under a drifting sun.
Pathfinding
webgpu / procedural / 2d
A shortest-path search feeling its way across a grid of obstacles, a frontier fanning out toward the goal using a guess of the remaining distance to aim itself instead of searching blindly; drag the start and goal handles or paint walls to reshape the maze.
Rigid & articulated bodies
Rigid Bodies
webgpu / simulation / 2d
A 2D physics sandbox where stacked boxes resolve their collisions with velocity kicks, so a pyramid stands firm and takes hits from tumbling blocks; drag a box to throw it around.
Vehicle
webgpu / simulation / 2d
A 2D buggy on springy suspension that pitches over bumps and squashes on landing as it drives across rolling hills; press right to floor the throttle, left to reverse.
Ragdoll
webgpu / simulation / 2d
A stick figure built from point masses linked by fixed-length bones, so gravity makes it crumple and sprawl on the floor like a real ragdoll; drag a joint to fling it around.
Double Pendulum
webgpu / simulation / 2d
The textbook example of chaos — two linked arms whose tip traces a tangled, never-repeating path where the smallest change in the start sends it somewhere else entirely; drag to grab and re-aim the arm.
Voronoi Fracture
webgpu / procedural / 2d
A disc pre-split into shards that sit whole until you strike it, then burst outward with spin away from the impact and settle into debris; click to shatter, click again to re-form.
Soft bodies & cloth
Rope
webgpu / simulation / 2d
Hanging ropes made of points joined by fixed-length links, so they sag, swing and settle under gravity from their swaying anchors; drag a rope to pull it around.
Cloth
webgpu / compute / simulation
A grid of points held together by springy links: each frame they move freely under gravity and wind, then get pulled back toward their neighbours, so a pinned sheet sags and billows; drag to orbit.
Soft Bodies
webgpu / simulation / 2d
Bouncy blobs, each a ring of masses on springs filled with trapped gas that re-inflates them after every squash, so they wobble, squish and bounce under gravity; drag to grab and stretch one.
Buoyancy
webgpu / simulation / 2d
Boxes bob on waves because the submerged part pushes up harder the deeper it sinks, and that lift naturally rights a tilted box back upright; drag to pick up and toss a box.
Fluids
Stable Fluids
webgpu / compute / simulation
A real-time 2D fluid that carries coloured dye through a swirling flow, curling and mixing like smoke in water; drag to stir and inject dye.
FLIP Fluid
webgpu / compute / simulation
Thousands of particles act as a body of water that's dropped in, churns, and settles, kept from compressing so it sloshes and splashes like the real thing; drag to shove the liquid around.
DFSPH Fluid
webgpu / compute / simulation
Thousands of tiny particles behaving like real water that falls, pools, sloshes and splashes with genuine weight, each one nudged by its neighbours to keep the fluid from compressing; drag through it to stir.
Lattice-Boltzmann Fluid
webgpu / compute / simulation
Fluid flowing past a cylinder, where a simple local rule in every cell builds up real flow and a steady wake breaks into a trail of alternating swirling vortices; drag the cylinder and watch the wake re-form behind it.
Smoke
webgpu / simulation / fluid
Smoke simulated on a grid, where heat lifts a rising plume and an incompressible flow makes it curl and roll instead of just blurring; drag to push the smoke around.
3D Smoke
webgpu / compute / 3d
Smoke simulated in a full 3D volume, rising and swirling from a hot source, then drawn by tracing a ray through the haze per pixel so deeper plumes read as thicker; drag to orbit the camera.
Fluid Paint
webgpu / simulation / fluid
Paint with a real-time fluid: each stroke injects colour and a push of flow, so the dyes billow and marble together; drag to paint, or leave it alone and swirling emitters keep it alive.
Particle systems
Curl-Noise Particles
webgpu / compute / particles
60,000 particles drifting through a swirling flow field that makes them curl like smoke instead of clumping, smearing into glowing fading trails; press to pull the swarm toward the cursor.
N-Body Galaxy
webgpu / compute / simulation
A rotating disk of thousands of stars held together by gravity, each one pulled by the bright core and by every other star at once; press to drop a gravity well and stir the orbits.
Characters & animation
Skinning
webgpu / 3d / animation
A smooth skin bound to a chain of bones, where each point follows a blend of the bones nearest it, so a wave running down the skeleton makes it undulate like a tentacle; drag to orbit the camera.
Inverse Kinematics
webgpu / animation / 2d
Three jointed arms, each anchored at its base, work out how to bend every frame so their tips reach a moving target while keeping all bone lengths fixed; drag to move the target yourself.
Character Controller
webgpu / simulation / 3d
A third-person character that follows the sloped ground, eases into turns instead of snapping, and falls under gravity; use WASD or arrow keys to walk and space to jump, or drag to steer, and left alone it wanders on autopilot.
Locomotion
webgpu / animation / 2d
A walking figure built entirely from one number — its speed — so cadence, stride, bounce and lean all shift together as it eases between a walk and a run, with each knee bending to keep the planted foot from sliding; press to sprint.
Flocking & agents
Boids
webgpu / compute / simulation
Flocking from three simple urges — stay clear of close neighbours, match their heading, and steer toward their centre — so 1,200 agents form lifelike flocks with no leader or plan.
Steering Behaviors
webgpu / compute / simulation
A swarm of little vehicles that each steer smoothly to stay on a looping track, banking into corrections instead of snapping, so the flock flows like traffic; press and hold to draw them toward your pointer.
Crowd Avoidance
webgpu / compute / simulation
A thousand people crossing to the far side each look ahead, predict who they'd bump into, and pick the path that heads for their goal while staying clear — so opposing streams weave through instead of jamming; move the cursor to part the crowd.
Ant Colony
webgpu / compute / simulation
Thousands of ants wander between nest and food, each leaving a scent trail others follow, and well-used paths grow stronger as unused ones fade — so highways emerge with no ant knowing the map; drag to drop extra food.
Cellular automata & artificial life
Game of Life
webgpu / simulation / 2d
Conway's Game of Life — cells live or die by how many neighbours they have, and gliders and oscillators emerge from one simple rule, leaving fading trails of where life has been; drag to paint living cells.
Falling Sand
webgpu / compute / simulation
A pixel sandbox where sand piles up, water spreads and levels out, and walls stay put — each grain following simple local rules; drag to pour the chosen material.
Reaction-Diffusion
webgpu / compute / simulation
Two chemicals spreading and reacting, where tiny changes to how fast each is fed and removed grow spots, stripes, mazes or coral from a few seeds; drag to paint new growth.
Lenia
webgpu / simulation / procedural
Conway's Game of Life made smooth and continuous, so soft, life-like colonies grow, drift and dissolve instead of blinking on and off; drag to paint living cells.
Neural Cellular Automata
webgpu / simulation / 2d
Every cell senses its neighbours and runs the same tiny shared network to update itself, so a single seed self-organises into a pattern that heals and regrows where you damage it; drag to paint and seed cells.
Slime Mold
webgpu / compute / simulation
Tens of thousands of tiny agents that each follow and reinforce the scent trail ahead, weaving on their own into branching networks with no leader; drag to drop a lure they swarm toward.
Diffusion-Limited Aggregation
webgpu / simulation / 2d
Wandering particles drift until they touch the cluster and freeze, growing the branching, self-similar shapes seen in frost, coral, and mineral deposits; drag to paint your own frozen seeds for new branches to grow on.