Build a single self-contained HTML file (inline CSS and JS; the only external script is Three.js r128 from https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js called "Reef Lagoon": an interactive top-down view of a sunlit Maldives-style lagoon where the user throws sea creatures into the water and watches them swim. Output the complete file, no placeholders, no omitted sections.
CAMERA AND LAYOUT
- Perspective camera straight overhead (height ~26 world units, up vector (0,0,-1)). Fit the vertical FOV so the visible water is about ±8.4 units in the short screen direction; the long direction scales with the aspect ratio. Recompute on resize.
- The whole screen is water. One world unit is roughly 1 m at toy scale: dolphin ~2.4, white shark ~3.3, hammerhead ~3.1, orca ~4.5, humpback ~6, turtle ~1.35 shell length, manta ~1.6 length / 3.2 wingspan.
WATER SIMULATION
- GPU ripple height field (ping-pong float/half-float render targets, about 440 texels on the long side, stepped at 90 Hz). Update: average of 4 neighbours, velocity += (avg − h)*1.8, velocity *= 0.9935, h += velocity, h *= 0.9993. Absorbing "sponge" edges, so waves leaving the screen don't reflect.
- Drops are queued (x, z, radius, amplitude, foam) and applied with a smooth cosine bump; a second channel stores foam that diffuses and fades.
RENDERING (draw order per frame)
1. A tileable animated caustics texture (512², mipmapped).
2. A shadow pass: creature geometry projected along the sun onto the floor, rendered from the main camera into a half-res target with MAX blending.
3. The underwater scene into an off-screen target. Its alpha stores depth*0.22, which later scales refraction and blur.
- Floor: a large heightfield mesh. Depth goes from ~1.35 near the bottom of the screen to ~4.3 at the top, with gentle undulation.
- Coral heads come from noise masks: raised 1–1.4 units, warm ochre/purple/yellow colours with knobbly and brain-coral detail, plus a rubble ring around them.
- Pale sand with soft irregular ripple shading.
- Lighting: ambient + sun × (base + caustics focused by the Laplacian of the ripple field) × shadow × drifting cloud shadows (large slow noise).
- Water absorption along the light path plus the view path, e.g. T = exp(−(0.30, 0.058, 0.04)·path), plus depth-based turquoise→blue scatter.
4. A full-screen water-surface pass. Each pixel is ray-cast through the inverse view-projection to the plane y=0.
- Surface normal from the ripple field + scrolling wind-ripple gradient noise + a gentle swell.
- Refraction: offset sampling of the underwater target, with chromatic split and depth blur.
- Fresnel sky reflection with clouds, sun glints, foam, splash craters (a short-lived analytic bowl around each impact; brighten it, never let it go dark), and an optional whirlpool funnel with spiral foam arms.
- Mild tone curve.
5. An overlay pass, depth-tested, drawn after the surface: creatures above water, water droplets (point sprites, gravity 20), soft mist sprites, rain streaks, expanding ring quads, and a drop-target marker.
CREATURES (procedural geometry, no external models)
- Local frame: nose at +x (x=0.5), tail toward −x, up +y, body length 1.
- Body: lofted elliptical cross-sections along x. Half-width W(u), half-height H(u) and centre offset C(u) are Catmull-Rom curves through control points, where u runs 0 at the nose to 1 at the tail. Flatten the belly, cap the ends, compute normals from the grid.
- Fins: thin double-sided sheets made as bilinear patches between a root chord and a tip chord, with bowed leading and trailing edges.
- Species:
1. Great white shark: slate-grey back with a ragged countershading line to a white belly, gill slits, tall triangular dorsal fin, big swept pectorals with dark tips underneath, crescent tail with a longer upper lobe.
2. Great hammerhead: flat wide cephalofoil with eyes at its tips, bronze-grey colour, tall sickle dorsal fin.
3. Humpback whale: near-black back, mottled white belly with throat pleats, knobs on the head, very long scalloped white pectorals, small dorsal hump, serrated flukes.
4. Orca: black, with the white eye patch, white chin, belly and flank lobe, grey saddle behind a towering dorsal fin, paddle-shaped pectorals.
5. Bottlenose dolphin: beak and melon forehead, dark cape over grey flanks and a pale belly, curved dorsal fin.
6. Green sea turtle: domed shell with scute pattern and amber streaks, pale belly plate, scaly head, long front flippers and small rear flippers.
7. Manta ray: diamond-shaped swept-back wings, curled horn-like fins at the mouth, whip tail, black top with white shoulder chevrons, white spotted belly.
- Draw each species as one InstancedBufferGeometry. Per-instance data: position, orientation quaternion, (swim phase, wave amplitude, turn, fin phase), (scale, alpha, body arch, fin amplitude), (seed, water-class flag, wetness, flipper angle offset).
- Vertex shader:
- Swimming body wave: side to side for shar…
