One frame, in the order the GPU draws it, then a lookup from anything you can see on screen to the pass and file that makes it, then the data computed offline that those passes read.
Everything is drawn every frame except the clouds and the sky reflection cube, which are re-baked every 4 s because they move slowly. All of it runs in renderFrame() in js/main.js.
A grid of 800 × 800 sun rays is refracted through the exact water surface and dropped onto the seabed. Where rays bunch up the map gets brighter. It covers a 30 m square ahead of the camera and is refreshed every other frame while you walk around.
Volumetric cumulus are ray-marched into a sky-dome texture, and the sky cube used for water reflections is re-rendered. Both happen only every 4 s.
Two depth maps from the sun: a wide one covering 52 m at 4096² (1.3 cm per pixel) and a near patch covering 12 m at 2048² (0.6 cm per pixel) centred where you're looking.
The costliest part of the frame. The dense band of the water mesh is drawn at half resolution with a shader that only runs the march through the curl. The full-resolution water then reads it back, matching by depth so the lip's silhouette stays sharp.
The water is drawn over a copy of the opaque image, with its own depth test, so it can refract what's behind it.
surf() adds up the reef breaker (from the wave atlas), lumps on its steep face, the shore break, swash, wind chop and the bent swell. A dense band of rows rides each curling crest (bandRowN).marchWave() follows the refracted ray through the baked breaker volume, giving the glassy tube, the lit seabed seen through the wave, the palm shadow through the water and bubbles. It marches at full resolution only at edges where the half-resolution result doesn't fit.At half resolution, rays are marched through a foam density field: the baked splash and bore volume, swirling churn noise, and the foam trail left behind. Each ray stops at the water or the scene.
Eye adaptation, then local tone mapping in log space, which compresses the large-scale lighting and keeps detail. The result goes to the screen.
The same thing on screen is often made by two passes. The curl's shape comes from the water mesh, while its glassy inside comes from the march in the water fragment shader.
| On screen | Made by | Data it reads |
|---|---|---|
| Shape of the breaking wave and lip | water vertex · surf()dense band of rows on the curl | breaker atlasreef timing |
| Glassy inside of the tube, seabed seen through it | water fragment · marchWave() | breaker SDF volumecaustic mapshadow maps |
| Splash where the lip lands, whitewater pile, bore | whitewater pass | whitewater volumephase functions |
| Foam trail left behind the wave | whitewater passtrail term (fades over ~7 s) | break timing only |
| White streaks on the face and surface foam | water fragmentatlas foam channel | breaker atlas |
| Bubbles inside the wave | water fragmentbubble density in the march | chop-seeded streaks |
| Swell lines, bending round the island | water vertexswellField(); sharpens in the shallows | bent swell field |
| Surf on the island's other beaches | far-ocean fragmentswellBreak(): where the swell passes breaking height | bent swell field |
| Lumps and boils on the wave face | water vertexface displacement in surf() | Options → Face lumps |
| Wind chop and fine ripples | water vertexchop; water fragmentripples | ocean slopesnoise textures |
| Shimmering light on the sand underwater | caustic mapread by terrain and the march | live water surface |
| Palm shadow on sand and through the water | shadow mapsnear patch first, wide map outside it | — |
| Water colour with depth | water fragment | water colour table |
| Clouds and sky | clouds and sky cube | — |
| Small waves at the beach and swash | water vertexshore break: a scaled copy of the atlas | breaker atlas |
Nothing about the break is hand-timed any more. Each column of the reef asks the same chain of questions.
These are baked by scripts in tools/ and loaded from data/. Changing the seabed means re-running the swell and timing bakes. Changing the wave shape means re-running the atlas, then the SDF and whitewater bakes.
The 2D wave profile against surface label and time, with vertices crowded into the lip tip. Also stores the surface tangent and 2D lighting.
Distance to the water surface around the crest, through the break. This is what marchWave() steps through.
Dense foam, mist and bubble density through the collapse, with the splash thrown forward from the landing lip.
Steady complex wave amplitude over 3.6 × 3.2 km at 8 m cells, from a GPU wave solver run over the real depths.
Crest arrival time every 2 m along the reef, smoothed, with the peel capped at 14 m/s.
Monte Carlo path tracing of clear tropical water over carbonate sand. It replaces every hand-tuned water colour.
How light scatters off a single bubble and a single droplet, from exact geometric optics.
A looping FFT ocean for fine ripples, and sand albedo and detail maps.
Press R for the traced reference, or Scene → Ray-traced clip to bake a few seconds of your current view both ways and compare them with a split slider. The tracer follows the same surface, seabed and caustic map as the live view. Palms, dry land and sky come from the live image, and the whitewater is drawn over the top.
Still in the git history (tag reef-baseline), no longer in the live code.