🌊 Coastal Delta Flood Resilience — 3D
A genuine WebGL/Three.js coastal terrain: an analytic river-delta heightmap with branching distributary channels floods according to a real threshold — sea-level rise plus storm surge, attenuated by a mangrove buffer and held back (up to its crest, then overtopped) by a seawall protecting a coastal town.
A real inundation threshold, not a decorative scene
The heightmap is analytic, not a texture: land elevation rises with distance from the coast and is cut by four branching distributary channels, the way a real river delta forms. The effective water level combines two climate inputs — sea-level rise (0–2 m, spanning the IPCC's projected range for 2100) and storm surge (0–5 m) — with two defenses: a mangrove buffer, which attenuates the surge reaching land following an exponential decay surge × e-width/380 (the same functional form coastal-engineering studies use for wave/surge attenuation through vegetated buffers), and a seawall, which fully blocks water up to its crest height and only lets the residual through once overtopped.
Every vertex of the mesh floods or stays dry by comparing its own ground elevation to the water level that applies at its location — the open delta uses the mangrove-attenuated level, while the protected town polygon behind the seawall uses the wall-reduced level. Drag to orbit and watch how raising the seawall keeps the town dry while surrounding marsh still floods, or widen the mangrove buffer to see the open-delta flood extent shrink from attenuation alone. An optional tide animation oscillates the water level ±0.35 m to show the same threshold recomputed every frame.