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 "Maldives Lagoon": an interactive top-down view of a turquoise Maldives lagoon with a white beach, a coral reef edge and the deep ocean beyond it. The user releases rays and jellyfish into the sea and watches them swim. Output the complete file, no placeholders, no omitted sections.
CAMERA AND LAYOUT
- Perspective camera straight overhead (height ~19, up vector (0,0,-1)). Fit the vertical FOV so the screen shows about ±6.2 world units in the short direction; the long direction scales with the aspect ratio.
- Recompute everything on resize: layout, simulation and baked textures.
- Geography in screen space:
- Top-left corner: a curved white-sand beach (shore signed-distance field = an ellipse centred just off the corner, edge broken up with noise).
- Most of the screen: the shallow lagoon, ~0.05 m at the waterline deepening to ~2.2.
- A reef edge running diagonally across the far part of the screen (second SDF, a large noisy ellipse).
- Bottom-right corner, beyond the reef: a drop-off to the deep ocean (depth up to ~7, dark blue).
WATER SIMULATION
- GPU ripple height field (ping-pong half-float render targets, ~360 texels on the long side, 90 Hz). Update: neighbour average, velocity += (avg − h)*1.8, velocity *= 0.9935, h += velocity, h *= 0.9993. Absorbing sponge edges at the screen borders; zero height on the beach.
- Queued drops (x, z, radius, amplitude, foam) with a smooth cosine bump; a foam channel that diffuses and fades.
STATIC BAKES (render to textures once per resize)
- Sea floor:
- Rippled sand with warped wave crests.
- Seagrass patches and rubble scattered near the reef.
- Coral heads as Voronoi domes, densest along the reef edge: brain/plate colours, knobbly texture, little shading crevices.
- A few orange starfish.
- Pale sand near the beach.
- The alpha channel stores a lighting term.
- Beach overlay: dry white sand with grain and slight dunes, a darker wet band near the water, a few shells. Baked as RGBA and composited by the surface pass.
RENDERING (per frame)
1. A tileable animated caustics texture (512², mipmapped).
2. A shadow pass: creatures projected along the sun onto the floor, into a half-res target with MAX blending.
3. The underwater scene into an off-screen target (alpha = depth*0.25):
- Floor mesh displaced by the depth function.
- Lighting: ambient + sun × caustics focused by the ripple Laplacian × shadows × a swaying palm-tree shadow.
- Water tint: strong red absorption, so shallow water is vivid turquoise and deep water dark ocean blue, e.g. T = exp(−(0.72, 0.078, 0.05)·path − extra absorption below 2.4 m), scatter blending from turquoise (0.03, 0.30, 0.36) to deep blue (0.01, 0.12, 0.34) with depth.
- Bubbles and silt clouds.
4. A full-screen water-surface pass:
- Normal from the ripple field + scrolling wind ripples + a long swell rolling in toward the beach.
- Refraction with chromatic split and depth blur, Fresnel sky reflection with clouds, sun glints, splash craters, foam, a whirlpool funnel with spiral foam arms.
- White surf breaking along the reef edge in time with the swell.
- The shore: each wave breaks, rushes up the beach as a foamy lacy swash, then drains back, leaving a thin shining water film and a wet sheen on the sand.
- The palm shadow (trunk plus 8 drooping fronds, gently swaying) falls across beach and water.
- Composite the baked beach on top; light vignette and tone curve.
5. An overlay pass after the surface: creatures in the air, water droplets (point sprites), rain streaks, expanding rings, soft dark shadow blobs on the water under airborne creatures, a drop-target marker.
CREATURES (procedural, instanced per species, each drawn in under-water, in-air and shadow passes)
- Rays:
- Flat bodies built as two thin sheets meeting at the margin, plus a tail tube and cephalic fins for the manta.
- Wings bend along the span with a wave that travels from body to tip, lagging toward the tip. Translucent wing tips; eyes; white belly underneath.
- Species:
1. Manta, "Giant glider": huge black-backed diamond wings with white shoulder patches, slow powerful flaps, long glides, occasional breach with a somersault and a belly-flop splash.
2. Spotted eagle ray, "White-spotted": dark back covered in white spots, pointed wings, very long thin tail, quick flaps, also breaches.
3. Blue-spotted stingray, "Blue-spotted": small oval ochre disc with electric-blue spots. It stays near the bottom, rests on the sand, kicks up silt clouds when it settles or startles, and has a rippling wing-edge swim.
- Jellyfish:
- A pulsing bell (contract–relax cycle with a thrust phase) plus camera-facing ribbon tentacles and frilly oral arms that trail and sway behind the bell.
- Translucent: fresnel rim, soft inner glow, see-through.
-…Build a single self-contained HTML file (inline CSS and JS; the only external script is Three.js r128 from https://t.co/CQdLRgeyFv) called "Maldives Lagoon": an interactive top-down view of a turquoise Maldives lagoon with a white beach, a coral reef edge and the deep ocean beyond it. The user releases rays and jellyfish into the sea and watches them swim. Output the complete file, no placeholders, no omitted sections.
CAMERA AND LAYOUT
- Perspective camera straight overhead (height ~19, up vector (0,0,-1)). Fit the vertical FOV so the screen shows about ±6.2 world units in the short direction; the long direction scales with the aspect ratio.
- Recompute everything on resize: layout, simulation and baked textures.
- Geography in screen space:
- Top-left corner: a curved white-sand beach (shore signed-distance field = an ellipse centred just off the corner, edge broken up with noise).
- Most of the screen: the shallow lagoon, ~0.05 m at the waterline deepening to ~2.2.
- A reef edge running diagonally across the far part of the screen (second SDF, a large noisy ellipse).
- Bottom-right corner, beyond the reef: a drop-off to the deep ocean (depth up to ~7, dark blue).
WATER SIMULATION
- GPU ripple height field (ping-pong half-float render targets, ~360 texels on the long side, 90 Hz). Update: neighbour average, velocity += (avg − h)*1.8, velocity *= 0.9935, h += velocity, h *= 0.9993. Absorbing sponge edges at the screen borders; zero height on the beach.
- Queued drops (x, z, radius, amplitude, foam) with a smooth cosine bump; a foam channel that diffuses and fades.
STATIC BAKES (render to textures once per resize)
- Sea floor:
- Rippled sand with warped wave crests.
- Seagrass patches and rubble scattered near the reef.
- Coral heads as Voronoi domes, densest along the reef edge: brain/plate colours, knobbly texture, little shading crevices.
- A few orange starfish.
- Pale sand near the beach.
- The alpha channel stores a lighting term.
- Beach overlay: dry white sand with grain and slight dunes, a darker wet band near the water, a few shells. Baked as RGBA and composited by the surface pass.
RENDERING (per frame)
1. A tileable animated caustics texture (512², mipmapped).
2. A shadow pass: creatures projected along the sun onto the floor, into a half-res target with MAX blending.
3. The underwater scene into an off-screen target (alpha = depth*0.25):
- Floor mesh displaced by the depth function.
- Lighting: ambient + sun × caustics focused by the ripple Laplacian × shadows × a swaying palm-tree shadow.
- Water tint: strong red absorption, so shallow water is vivid turquoise and deep water dark ocean blue, e.g. T = exp(−(0.72, 0.078, 0.05)·path − extra absorption below 2.4 m), scatter blending from turquoise (0.03, 0.30, 0.36) to deep blue (0.01, 0.12, 0.34) with depth.
- Bubbles and silt clouds.
4. A full-screen water-surface pass:
- Normal from the ripple field + scrolling wind ripples + a long swell rolling in toward the beach.
- Refraction with chromatic split and depth blur, Fresnel sky reflection with clouds, sun glints, splash craters, foam, a whirlpool funnel with spiral foam arms.
- White surf breaking along the reef edge in time with the swell.
- The shore: each wave breaks, rushes up the beach as a foamy lacy swash, then drains back, leaving a thin shining water film and a wet sheen on the sand.
- The palm shadow (trunk plus 8 drooping fronds, gently swaying) falls across beach and water.
- Composite the baked beach on top; light vignette and tone curve.
5. An overlay pass after the surface: creatures in the air, water droplets (point sprites), rain streaks, expanding rings, soft dark shadow blobs on the water under airborne creatures, a drop-target marker.
CREATURES (procedural, instanced per species, each drawn in under-water, in-air and shadow passes)
- Rays:
- Flat bodies built as two thin sheets meeting at the margin, plus a tail tube and cephalic fins for the manta.
- Wings bend along the span with a wave that travels from body to tip, lagging toward the tip. Translucent wing tips; eyes; white belly underneath.
- Species:
1. Manta, "Giant glider": huge black-backed diamond wings with white shoulder patches, slow powerful flaps, long glides, occasional breach with a somersault and a belly-flop splash.
2. Spotted eagle ray, "White-spotted": dark back covered in white spots, pointed wings, very long thin tail, quick flaps, also breaches.
3. Blue-spotted stingray, "Blue-spotted": small oval ochre disc with electric-blue spots. It stays near the bottom, rests on the sand, kicks up silt clouds when it settles or startles, and has a rippling wing-edge swim.
- Jellyfish:
- A pulsing bell (contract–relax cycle with a thrust phase) plus camera-facing ribbon tentacles and frilly oral arms that trail and sway behind the bell.
- Translucent: fresnel rim, soft inner glow, see-through.
- They drift with currents, slowly tilt the…