Filling the lagoon…
01 Classic02 Remix03 Lagoon04 Broadside
Lagoon
three.js. Swell and touch ripples, refraction with depth-tinted water, caustics,
a school of fish you can feed — and you can dive in. Try dusk, night and the storm.
Lagoon
Drag look around (go below the surface to dive) Pinch / wheel zoom Tap the water splash and feed the fish Dive D fly under the surface and back Storm S big swell, rain and lightning Slider time of day; the arrow button runs a full day
What is going on
Waves. Four Gerstner waves displace a 600 m grid in the vertex shader; a 256² GPU ripple simulation (the same one as the Classic tab) is layered on top for your taps and the rain.Water shading. The world is rendered to a texture first. Each water pixel refracts that image, measures how much water the light crossed using the depth buffer and absorbs red first — shallow water stays clear, deep water turns blue. A second mirrored render provides reflections; a Fresnel term blends the two.Below the surface. The same shader shows Snell's window and total internal reflection. Dense fog, rising bubbles and screen-space god rays finish the look.Caustics. An animated pattern injected into three.js's standard material lights the sand, rocks and fish; it fades with depth and follows the sun.Fish. One procedural fish drawn hundreds of times with instancing; boids on the CPU (separation, alignment, cohesion), food attraction and a tail wiggle in the vertex shader. At night they glow.Sky. three.js's physical sky, re-rendered into a cube map and PMREM whenever the sun moves, so materials and reflections stay in sync through sunset and night.
Source: src/lagoon/, bundled with esbuild. Built on three.js r185.