play
Experiments in making games with TypeScript & WebGPU.
Getting started
The first triangle, and the primitives every later scene is built from.
Hello Triangle
webgpu / basics
The minimal WebGPU render pipeline drawing a colored triangle.
Barycentric Coordinates
webgpu / basics
How a GPU fills a triangle: every covered pixel gets three weights — one per corner — that sum to one, and the rasterizer uses them to blend whatever each vertex carries. The same interpolation behind colour, UVs, normals and depth, shown on its own.
Transform Matrices
webgpu / basics
What a transform matrix actually does: its columns are the new homes of the x and y axes, and everything else just rides along. Translate, rotate and scale an F and watch the basis vectors — and the shape — follow.
Dot-Product Lighting
webgpu / basics
The one calculation under all diffuse shading: a surface is bright in proportion to how directly it faces the light, and 'how directly it faces' is the dot product of its normal with the light direction. Shown on a sphere you can light by dragging.
UV Coordinates
webgpu / basics
Where a texture lives on a surface: every pixel carries a 2D address — U across, V down, each running 0 to 1. Read it straight out as colour, or use it to look up a pattern. That lookup is what 'texture mapping' means.
The Depth Buffer
webgpu / basics
How a GPU knows what's in front: alongside the colour it keeps one depth per pixel — the nearest thing drawn there so far — and only repaints when something closer arrives. Three overlapping cards, with a slider that moves one through the others.
Sine Wave Sum
webgpu / basics
Fourier's idea, made visible: any repeating wave — even a sharp sawtooth or square — is a sum of plain sine waves at multiples of one frequency. Add the harmonics one at a time and watch the smooth sines pile up into the corner.
Gerstner Wave
webgpu / basics
Why ocean crests are sharp and troughs broad: a Gerstner wave doesn't just push the surface up and down — it also slides each point sideways, bunching them toward the peaks. Raise the steepness and watch a plain sine grow pointed crests, while the tracked dots reveal the closed orbit every surface point really travels.
Alpha Blending
webgpu / basics
How transparency is drawn: each layer keeps a fraction of its own colour — its alpha — and lets the rest of what's already on screen show through. Three overlapping discs make the compositing operators visible.
Real-time rendering
The rasterization pipeline and the lighting tricks built on it.
Shadow Mapping
webgpu / 3d / rendering
Real-time shadows: a depth pass renders the scene from the light into a shadow map, then the camera pass compares each fragment's light-space depth (3x3 PCF) to cast soft shadows.
PBR Materials
webgpu / 3d / rendering
A metallic × roughness grid of spheres shaded with the Cook-Torrance BRDF (GGX, Smith, Fresnel-Schlick) under several point lights.
Deferred Shading
webgpu / rendering / 3d
Deferred rendering: the scene is rasterized once into a G-buffer (albedo, normal, position), then a fullscreen pass accumulates 64 moving coloured point lights in screen space — so the lighting cost is independent of geometry.
Screen-Space Ambient Occlusion
webgpu / rendering / 3d
SSAO from a G-buffer: for each pixel a hemisphere of view-space samples is tested against scene depth to estimate how occluded it is, then blurred and used as ambient shadowing — the soft contact darkening in creases and corners.
Screen-Space Reflections
webgpu / rendering / 3d
SSR on a mirror floor: each reflective pixel bounces the view ray off its normal and marches that ray through the G-buffer's depth, sampling the lit colour at the first crossing — so the floating blocks reappear, fading at grazing angles and screen edges.
Volumetric Light
webgpu / rendering / 3d
Ray-marched volumetric lighting: fog is sampled between the camera and the scene, shadow-marching toward the sun at every step so light only scatters in where the path is clear — the god-ray shafts streaming between the pillars.
2D Global Illumination
webgpu / rendering / 2d
Ray-marched 2D global illumination: each pixel fans rays out through a scene of emissive and occluding discs and averages the light that survives the trip, so the coloured lights cast soft penumbrae and blend where their pools overlap.
Clustered Lighting
webgpu / rendering / compute
Forward+ light culling: the screen is split into tiles, a compute pass tests all 320 moving lights against each tile and records only the ones that touch it, then the shading pass walks just that short per-tile list. The froxel grid is drawn over the lit scene as a heatmap of lights-per-tile, so you can watch the culling structure shift as the lights drift.
Bloom & Tonemap
webgpu / rendering / post-processing
An HDR scene of emissive orbs run through a post-processing chain: bright-pass extraction, a separable gaussian blur ping-pong, then additive composite with exposure tonemapping.
Ray marching & path tracing
Rendering by marching rays through implicit surfaces and light.
SDF Raymarching
webgpu / 3d / rendering
A fullscreen fragment shader sphere-traces a signed-distance field: orbiting spheres smooth-unioned into a morphing metaball, with raymarched soft shadows, ambient occlusion and a fresnel rim.
Marching Cubes
webgpu / compute / 3d
GPU isosurface polygonization: a compute pass evaluates an animated metaball field over a 64³ grid and emits triangles per cell with the classic marching-cubes tables, appended via an atomic counter and drawn indirectly.
Path Tracer
webgpu / raymarch / 3d
A progressive path tracer: rays bounce through a small sphere scene — diffuse, metal, and an emissive light under a sky dome — and each frame's sample is averaged into an accumulation buffer, so the picture refines from grain to a clean, globally-illuminated render with soft shadows and colour bleed.
Black Hole
webgpu / raymarch / 3d
Gravitational lensing by ray-marching light through a black hole's field: each ray bends toward the centre as 1/r², so the starfield warps and the accretion disk's far side arcs up over the shadow — with relativistic beaming brightening the approaching edge.
Voxel Ray Tracing
webgpu / raymarch / 3d
A procedural voxel landscape traced per-pixel: each ray walks the grid one cell at a time with the Amanatides-Woo DDA, so the axis it crosses on a hit gives an exact cube-face normal — crisp blocky terrain with no marching artefacts. Heightfield grown from fBm noise, materials banded by altitude, lit by a sun and sky.
Generative patterns
Abstract structure and motion grown from noise, fields, and aggregation.
fBm Octaves
webgpu / procedural / 2d
Fractal noise, taken apart. Fractional Brownian motion is a sum of noise octaves — each one double the frequency and a fraction of the amplitude of the last — the building block under almost every procedural texture, terrain and cloud in this lab.
Flow Field
webgpu / procedural / 2d
A vector field made visible: a grid of arrows, each turned to follow the angle of an animated fBm noise field and tinted by direction — the steering field behind flocking and particle art.
Domain Warping
webgpu / procedural / 2d
Domain warping: an fBm noise field is fed back into its own input twice, folding the noise into flowing, marbled bands that drift and recombine — the classic technique behind procedural marble, smoke, and clouds.
Truchet Tiles
webgpu / procedural / 2d
Truchet tiling: every cell of a grid drops one of two quarter-circle tiles at random, and because the arcs always meet the edge midpoints, neighbouring tiles join into one continuous web of loops and threads — order emerging from a coin flip per cell. Distance-field rendered as glowing strands.
Voronoi Cells
webgpu / procedural / 2d
An animated Voronoi diagram drawn per-pixel: each fragment finds its nearest and second-nearest of several drifting seeds, tinting the cell, glowing toward the seed and darkening along the equidistant borders.
Diffusion-Limited Aggregation
webgpu / simulation / 2d
Random walkers diffuse until they touch the cluster and freeze in place, growing the branching, self-similar dendrites that DLA is known for — frost, coral, mineral deposits. A distance-jump walk keeps it fast.
Curl-Noise Particles
webgpu / compute / particles
60k GPU particles advected by a divergence-free curl-noise flow field and accumulated into a fading trail buffer — a compute particle system for flowing VFX.
Natural effects
Fire, light, and sky — phenomena to drop into a scene.
Procedural Fire
webgpu / procedural / 2d
A flame built from domain-warped fBm noise scrolling upward, shaped into a column that cools and narrows with height and mapped through a black-body fire ramp — flickering tongues with a warm base glow.
Lightning
webgpu / procedural / 2d
Branching lightning by recursive midpoint displacement: a jagged main channel forks into dimmer side branches, drawn as additive glowing filaments that strike and fade. A fresh bolt every flash.
Aurora
webgpu / procedural / 2d
Aurora borealis: several meandering curtains of light — Lorentzian glow bands whose centres wander with height and time, textured with fBm striations and tinted green to magenta — drifting over a starry night sky.
Caustics
webgpu / raymarch / 2d
Underwater caustics — the bright, restless web that light weaves across a pool floor as it refracts through the rippling surface. An iterated domain warp folds the coordinates so light concentrates into thin moving filaments.
Terrain & nature
Naturalistic 3D landscapes, water, sky, and vegetation.
Real-time Terrain
webgpu / 3d / terrain
GPU fBm noise displaced in the vertex shader, with an orbit camera, depth and lighting.
Hydraulic Erosion
webgpu / compute / terrain
Thousands of water droplets per frame erode and deposit on a GPU height field (atomic scatter), carving dendritic valleys into fBm terrain in real time.
Rivers & Biomes
webgpu / procedural / 3d
A procedural world map seen from above: an fBm heightfield sets elevation, a domain-warped noise's zero-contour traces meandering rivers down to the sea, and elevation crossed with moisture chooses each biome — ocean, sand, grassland, forest, rock, and snow — with a gradient hillshade for relief. The map drifts slowly.
Gerstner Water
webgpu / 3d / water
An ocean from two dozen Gerstner waves sampled from a wind-driven spectrum, with analytic normals, a reflected procedural sky, sun glint and fold-based whitecaps.
FFT Ocean
webgpu / 3d / water
The film-and-game ocean: a whole sea of waves synthesized at once by inverse-FFT of a statistical wave spectrum (Tessendorf), run on the GPU, with horizontal choppiness and fold-based whitecaps.
Voxel Terrain
webgpu / procedural / 3d
A blocky world: each grid column is an instanced cube whose height is fBm noise quantized into terraced levels, coloured by biome (sand, grass, rock, snow) with a flat sea filling the basins.
Volumetric Clouds
webgpu / rendering / procedural
Ray-marched volumetric clouds: a 3D fBm density field confined to a slab is marched per pixel, with a short light-march toward the sun at each step for self-shadowing (Beer's law). The cloudscape drifts on the wind.
Forest
webgpu / 3d / instancing
An instanced low-poly forest — hundreds of stylized pines drawn in one call, with a height-weighted wind sway in the vertex shader.
Grass Field
webgpu / 3d / instancing
100k instanced grass blades on the GPU, each a tapered strip bent by a wind field whose gusts ripple across the field in the vertex shader.
L-System Plants
webgpu / procedural / 2d
Lindenmayer systems: a tiny string-rewriting grammar is expanded over several generations, then drawn by a turtle into branching, tapering plants — trunk to leaf. New species grow in turn.
Maps & levels
Top-down procedural game spaces and the paths through them.
Procedural City
webgpu / procedural / 2d
A city plan grown by recursive subdivision: the map is split again and again by roads into blocks, and each block is filled with a grid of building footprints — tinted and drop-shadowed by height, with the odd park. A drifting sun rakes the shadows across the grid.
Dungeon Generator
webgpu / procedural / 2d
Procedural roguelike dungeons: non-overlapping rooms are scattered across a grid and stitched together with L-shaped corridors.
Wave Function Collapse
webgpu / compute / procgen
Tile-based WFC on the GPU: parallel constraint propagation plus randomized collapse of local entropy minima resolve a terrain-adjacency grid (deep water -> water -> sand -> grass -> forest -> rock) into a constraint-satisfying tilemap.
A* Pathfinding
webgpu / procedural / 2d
The A* search algorithm finding its way across a grid of obstacles: the frontier (open set) fans out, visited cells fill in behind it, and once the goal is reached the shortest path is traced back.
Fluid simulation
Grid and particle solvers for smoke, water, sand, and ink.
Stable Fluids
webgpu / compute / simulation
A 2D Navier-Stokes fluid (Jos Stam's stable fluids): semi-Lagrangian advection with a Jacobi pressure projection on the GPU, carrying dye through the velocity field.
FLIP Fluid
webgpu / compute / simulation
A FLIP/PIC liquid: a block of water is dropped and left to churn and settle. Each step scatters the particles' velocities onto a grid, makes that grid divergence-free with a Jacobi pressure solve (the incompressibility that gives water its body), then gathers the corrected velocity back — blending PIC stability with FLIP's lively splashes. Thousands of particles drawn as soft metaball discs.
Smoke
webgpu / simulation / fluid
Eulerian smoke with Jos Stam's stable fluids: a velocity field carries density and heat, buoyancy lifts the hot source, and a Jacobi pressure solve keeps the flow divergence-free each step — so the plume rises and curls.
3D Smoke
webgpu / compute / 3d
Volumetric smoke on a 3D grid: each step advects the velocity field through itself, adds thermal buoyancy and turbulence, and carries density and heat up from a source at the base. The grid is ray-marched as a participating medium — front-to-back absorption with a shadow sample toward the sun and a warm glow at the hot core.
SPH Fluid
webgpu / compute / simulation
A 2D smoothed-particle-hydrodynamics fluid (Müller's method) on the GPU: each substep computes Poly6 density and equation-of-state pressure, then Spiky pressure gradients and viscosity forces, integrated with wall collisions — a dam break that splashes and settles.
Lattice-Boltzmann Fluid
webgpu / compute / simulation
A D2Q9 Lattice-Boltzmann fluid on the GPU: nine distribution functions per cell are streamed and relaxed (BGK) so flow enters from the left and sheds a von Kármán vortex street past a cylinder, shown by vorticity.
Fluid Paint
webgpu / simulation / fluid
Coloured dye driven through a 2D fluid: each stroke injects dye and a push of velocity, then Jos Stam's stable-fluids solver advects the dye and projects the flow divergence-free, so the colours billow and marble together. Left alone, swirling emitters keep it alive.
Wave Ripples
webgpu / compute / simulation
A 2D wave-equation simulation on the GPU: random drops send ripples expanding and interfering across a height field, shaded as a sunlit water surface.
Falling Sand
webgpu / compute / simulation
A falling-sand cellular automaton on the GPU using a Margolus 2x2 block update: sand and water sink by conservative gravity sorting, with no cell collisions.
Physics
Rigid bodies, constraints, soft matter, and gravity.
Rigid Bodies
webgpu / simulation / 2d
A 2D rigid-body sandbox ported from Erin Catto's box2d-lite: SAT box-box contact manifolds resolved with a sequential-impulse solver (accumulated impulses, warm starting, friction). A pyramid of blocks takes hits from tumbling boxes.
Vehicle
webgpu / simulation / 2d
A 2D buggy with raycast suspension: each axle casts down to the procedural terrain and a spring-damper pushes the chassis up from the contact, so the body pitches and the struts compress over bumps and squash on landing. An engine force at the grounded wheels drives it along the rolling hills.
Rope Physics
webgpu / simulation / 2d
Hanging ropes simulated with Verlet integration and iterative distance constraints — the same position-based method as cloth, in 1D. Their anchors sway.
Cloth Simulation
webgpu / compute / simulation
A 64×64 mass grid simulated with position-based dynamics — predict, then Jacobi distance-constraint relaxation (structural, shear, bend) — pinned at one edge and rippling in the wind.
Soft Bodies
webgpu / simulation / 2d
Pressurized mass-spring soft bodies: each blob is a ring of masses held together by perimeter springs and an internal gas pressure that re-inflates it after every squash, so they wobble, squish and bounce under gravity.
Ragdoll
webgpu / simulation / 2d
A position-based ragdoll: a stick figure of point masses held together by distance constraints (Verlet integration), so gravity makes it crumple and sprawl on the floor like a real ragdoll.
Double Pendulum
webgpu / simulation / 2d
The double pendulum — a textbook chaotic system. Two coupled arms integrated with RK4 trace a tangled, never-repeating path; the smallest change in the start sends it somewhere else entirely.
Buoyancy
webgpu / simulation / 2d
Boxes bobbing on water: each one samples how much of itself is submerged and gets an Archimedes lift at that underwater centroid — so tilting it shifts the centroid and rights it back up, while the passing waves make it rock and bob.
Voronoi Fracture
webgpu / procedural / 2d
A disc pre-split along Voronoi cells: scattered sites carve it into convex shards — each cell clipped from the disc by its neighbours' bisectors — sitting whole until an impact throws them outward with spin.
N-Body Galaxy
webgpu / compute / simulation
A rotating disk of stars under gravity: a central potential plus brute-force O(N²) mutual attraction on the GPU, drawn as additive glow.
Characters & animation
Rigging, skinning, and getting a body to move.
Skeletal Skinning
webgpu / 3d / animation
GPU linear-blend skinning: a tapered tube is bound to a chain of bones, and the vertex shader blends each vertex between two bone matrices. A travelling wave of joint rotations makes it undulate like a tentacle.
Inverse Kinematics
webgpu / animation / 2d
FABRIK inverse kinematics: three jointed arms, each anchored at its base, solve their joint angles every frame to reach a target — backward and forward passes that keep every bone length fixed.
Character Controller
webgpu / simulation / 3d
A third-person capsule controller: gravity pulls it down, it stays glued to the sloped heightfield while walking, and a force-limited move keeps it responsive; left alone it wanders the hills on autopilot.
Locomotion
webgpu / animation / 2d
A procedural walk cycle: the gait's cadence, stride, vertical bounce, and forward lean all blend with speed as the figure eases between a walk and a run, and each leg's knee is solved with two-link IK so the planted foot stays put while the swing foot arcs forward.
Agents & emergence
Many simple agents producing collective behaviour.
Boids
webgpu / compute / simulation
GPU compute flocking — separation, alignment and cohesion over 1,200 agents in a compute shader.
3D Boids
webgpu / compute / 3d
Reynolds' boids in 3D on the GPU: a thousand agents each steer by three local rules — separation, alignment, and cohesion — scanning every other agent in a compute pass, so coherent flocks form, split, and merge in the round. Rendered as shaded cones tinted by heading.
Steering Behaviors
webgpu / compute / simulation
Reynolds path following on the GPU: each vehicle predicts where it's heading, finds the nearest point on the path, and applies a force-limited correction back toward it — plus a little wander — so the swarm flows along the track like traffic.
Crowd Avoidance
webgpu / compute / simulation
Reciprocal velocity-obstacle crowd simulation on the GPU: a thousand agents each cross to the antipodal point, sampling candidate velocities and taking the one that best balances their goal against the soonest predicted collision — so the streams interleave without colliding.
Ant Colony
webgpu / compute / simulation
Ant-colony foraging on the GPU: thousands of ants wander from the nest, and a searching ant follows the food pheromone while laying a home trail, a laden ant follows the home trail back while laying a food trail. Neither knows the map, yet reinforcing nest↔food highways emerge between the four food sources.
Artificial life
Self-organizing systems — cellular automata, reaction patterns, and organisms that grow and settle.
Game of Life
webgpu / simulation / 2d
Conway's Game of Life on the GPU: every cell lives or dies from its eight neighbours by the classic B3/S23 rule, run on a toroidal grid. Cells are tinted by age and leave a slowly fading trail, so gliders and oscillators draw long exposures of where life has been.
SmoothLife
webgpu / simulation / 2d
SmoothLife: Conway's Game of Life lifted into continuous space. Each cell integrates the state over an inner disk (itself) and an outer annulus (its neighbourhood), and a smooth birth/death transition pushes it toward alive or dead — so instead of blocky cells, soft glider-like organisms drift and divide across the field.
Reaction-Diffusion
webgpu / compute / simulation
Gray-Scott reaction-diffusion on the GPU — many compute steps per frame grow coral-like patterns from random seeds.
Lenia
webgpu / simulation / procedural
Lenia — a continuous cellular automaton (Bert Chan): a smooth ring kernel is convolved over a real-valued field and passed through a bell-shaped growth function, so soft, life-like colonies grow, drift and dissolve where Conway's discrete Life would only blink.
Neural Cellular Automata
webgpu / simulation / 2d
A neural cellular automaton: every cell perceives its neighbourhood with Sobel filters, runs a tiny fixed network to decide a stochastic update, and dies without a living neighbour — so a single seed grows into a self-organising pattern that regrows where you damage it.
Slime Mold
webgpu / compute / simulation
A Physarum simulation — tens of thousands of agents sense and deposit into a trail map (atomic compute), self-organizing into transport networks.