Real-time water caustics

Sunlight through a moving water surface draws bright lines on the pool floor.
Left: the sun through flat water.
Right: the same sun, refracted through the waves and traced to the floor.

The problem

Under water, light isn't even. A wave works like a weak lens: it bends neighbouring rays together in one spot and spreads them apart in the next. A common shortcut is a looping caustics texture scrolled over the floor. It ignores the real waves and the rocks.

How it works

Three GPU passes:

1. A height field holds the water. Each step pulls every height toward the average of its 4 neighbours, keeps the velocity, and damps it by 0.995. Normals come from the height differences.
2. An environment map is rendered from the sun: for each texel, the world position and depth of the first surface the sun sees.
3. A fine grid of the water surface is drawn from the sun. In the vertex shader each vertex refracts the sun ray through the water normal (eta 0.7504, air to water), then marches it through the environment map until it goes behind a stored surface. The vertex moves to that hit point.

The fragment shader compares each triangle's area on the water with its area where it landed, using dFdx and dFdy. Brightness = 0.15 × water area ÷ floor area. Rays that bunch up make small triangles, and small triangles make bright lines. Additive blending sums the overlaps. Then the floor shader looks the result up from the sun's view, like a shadow map.

What I hit

A fan of bright streaks ran out from the centre of the map. The sun saw through thin gaps between the sand and the wall blocks, where the environment map stayed empty at position 0, 0, 0. Every ray through a gap "landed" there. A base slab under the pool fixed it.

The repo projects the refracted direction as a point (w = 1), so the light camera's translation leaks into it. With the repo's sun straight down that barely shows. I tilted the sun about 9°, so I projected it as a direction (w = 0).

Triangles split between a rock top and the floor get very thin and flare into bright lines. I drop triangles stretched more than 6× or squeezed more than 16×.

My build

three.js 0.170. Pool 2 × 2 units, water 0.8 deep, sand and 77 rocks, all procedural. Height field 256 × 256, one step per video frame. Caustics grid 616 × 616 over 2.4 × 2.4 units, caustics map 1536 × 1536, ray march up to 96 steps of one texel.

The left half uses the same pipeline with a flat height field. Same sun, same total light, just no focusing.

Trade-offs

• Follows the actual waves and the actual rocks, no baked texture
• Two extra passes (sun-view map, caustics) and a shadow-map style lookup
• Each vertex reads the map up to 96 times
• Sharpness is capped by the grid and map size
• One refraction, first hit only: nothing under overhangs

When to use it

Pools, shallow seas, fountains: places where the camera looks down at the bottom through calm or rippled water.