LAB · 09 / 09
Infinite water
A sailboat crosses clear water; the wind shapes the waves and the sun lights the glitter. Gerstner waves · caustics · bloom
A sailboat crosses clear water; the wind shapes the waves and the sun lights the glitter. Gerstner waves · caustics · bloom
Visual mode: HDRI lighting, ambient occlusion, bloom, depth of field and quality that adapts to your device. Light mode: no post-processing, for phones, weak laptops and for studying the technique.
Four summed waves move each surface point in circles, sharpening the crests like real sea. The same sum runs on the GPU and in JavaScript, so the boat floats exactly on the drawn water.
y = Σ A·sin(k·(d·p) − ω·t), ω = √(g·k)The seabed is a known function (island + dunes). The water column at each pixel blends sand, turquoise and deep blue, and caustics show only in the shallows.
Tiny ripples tilt the normal; when the reflection points at the sun, the pixel goes past white and bloom turns it into sparkles.
Foam appears where the Gerstner surface pinches (the Jacobian gets close to folding), in thin bands broken by noise stretched along the wave, and grows with the wind.
espuma ∝ Σ Q·k·A·sin θHull, deck, lateen sail, oars, rigging and wake are generated in code. The sheet follows the sail angle and the sail fills with the wind.
The gulls are boids: each one only looks at its neighbours (separation, alignment, cohesion) and at a point circling the island. Grass and shrubs are instances seated on the same seabed function and sway in the shader with gusts crossing the island.