WATER LAB
One question, several answers: what is the best way to put convincing water on a web page? Each exhibit is a complete take on it — a simulation method, a renderer, and an honest list of what it gets wrong. Open one, poke it, and read the card for where it breaks.
Live
Analytic buoyancy
Bodies floating in a pool of waves. There is no fluid: the water is four summed sine waves, and Jolt Physics gives each body its own water plane every step and integrates the displaced volume against it. Splashes are the only thing the bodies send back to the water.
- Jolt
- WASM
- WebGL 2
- Simulates
- Rigid bodies only. The water is geometry.
- Costs
- Nine bodies, ~0.1 ms per step. Runs anywhere WASM does.
- Fails at
- Pouring, sloshing, breaking waves — anything that changes the water's shape.
Particle fluid
A real fluid: 100,000 particles solved with MLS-MPM in WebGPU compute, so waves fold over and sheets tear into spray. The dam-break front runs at 1.2√(gH), inside the range measured for real dam breaks. Six views take the surface apart, from raw particles to shaded water with foam and bioluminescent plankton. Stir the water, drag and shake the tank itself, or tap in Box3D crates to float on it.
- MLS-MPM
- Screen-space surface
- Box3D
- WebGPU
- Simulates
- The fluid itself, weakly compressible: under 6% density change through the collapse. Crates, when added, couple both ways.
- Costs
- 64³ grid, fourteen substeps a frame — roughly 10 ms on a desktop GPU, surface included. High quality doubles the particles for a smoother surface at about 3.5× that.
- Fails at
- Lone droplets and fine spray: a 12.5 cm grid cannot resolve them, so thin films fade out.
Open water
An endless ocean with exhibit A's solver riding it. The sea is an inverse FFT of a wind spectrum, computed fresh every frame, so jumping fifteen minutes ahead costs nothing. Tap to drop crates, switch between calm and gale, and open the tuning drawer to adjust sky, glitter, scatter and foam live.
- FFT ocean
- Jolt
- WebGL 2
- Simulates
- Rigid bodies, on a surface that is a transform rather than a simulation.
- Costs
- One 128² FFT plus eight bodies, ~2 ms per frame. No WebGPU needed.
- Fails at
- Splashes and shores. The sea moves the bodies but never the reverse, and a repeating tile has no edges.
Rain impact
Rain on wet asphalt, from drizzle to cloudburst. Drop sizes and fall speeds follow measured distributions, and every impact feeds a thin-film shallow-water solve before it becomes a dimple, a crown, secondary spray and spreading ripples.
- Shallow water
- WebGPU
- WebGL 2
- Simulates
- Every drop at the measured concentration, wind drift, splash thresholds, crowns, secondary droplets and the film's own sheet flow.
- Costs
- 640×400 film, eight substeps, ~38,000 falling drops and ~10,000 impacts/m²·s in a cloudburst.
- Fails at
- Fully resolved splashes. Crowns follow measured scaling laws and hand over to the grid at their peak.
Sharp-edge wetting
Water poured onto a square glass plate. It spreads as a thin film shaped by surface tension and the glass's contact angle, and pins at the sharp rim.
- Thin film
- Wetting
- WebGPU
- Simulates
- Film mass and momentum, capillary and wetting forces, contact angle and rim pinning.
- Costs
- A 192² WebGPU film, four substeps a frame on isotropic 9-point stencils.
- Fails at
- Anything past the rim. Water reaching the edge leaves the plate with no drops or threads, and high contact angles keep a slight grid bias.
Beyond water
On the bench
Nothing, for the moment — every experiment on the bench has moved to the floor.