Home▸Ecology & Conservation Biology▸Interactive Mangrove Coastal Defense

🌊 Interactive Mangrove Coastal Defense

Interactive 3D coastline where adjusting mangrove density and a simulated storm-surge wave shows root systems dissipating wave energy and reducing inland flooding compared to a bare shoreline.

Ecology & Conservation Biology3DModerate60 FPS💧 Water 💨 Air & Wind

A storm-surge wave rolls in from open water and pushes through a belt of mangrove trees; the roots drag against the water and dissipate its energy, so the wave — and the flooding it causes — is far smaller by the time it reaches dry land.

🔬 What It Demonstrates

Wave height decays exponentially as it crosses a mangrove belt, with the decay rate set by root density and maturity. Less energy surviving the belt means a shorter inland flood reach.

🎮 How to Use

Adjust mangrove density, root maturity, and storm surge intensity, then trigger a surge and watch the crest shrink as it crosses the belt. Toggle bare shoreline to compare against unprotected coast.

💡 Did You Know?

Research summarised by McIvor et al. (2012) found that 100 metres of healthy mangrove forest can cut incoming wave height by 13–66%, making mangroves one of the most cost-effective natural flood defences.

⚙ Under the hood

Manipulate mangrove density, root maturity levels, and storm surge intensity to see how these factors affect wave energy dissipation and coastal flooding risk in this dynamic 3D model.

mangrovescoastal-protectionstorm-surgeecosystem-serviceswave-attenuationecology

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install