What If Mars Had Oceans?

What this is

A Three.js Mars globe displaced by NASA's MOLA elevation map, decoded in-shader as real metres above the datum. Drag the slider, the planet floods. Sea level sweeps from −8 km to +21 km, with a Mars-to-Earth palette blend as coverage rises.

A priority-flood spillmap means isolated highland craters only fill once the sea reaches their rim. No magic basins. ~6 MB of textures, runs entirely in the browser.

The puzzle

It started with an image captioned "this is what Mars would look like with oceans". It looked striking, and I found myself wondering how accurate it actually was.

Most "Mars with oceans" renderings get the geography wrong. The southern highlands sit kilometres above the northern lowlands. Flood Mars with the actual elevation data and a continent the size of Africa survives.

A static image asks the reader to trust the map. A slider on a globe lets them check for themselves.

How I built it

• Decoding the 16-bit MOLA texture in-shader as real metres, not a greyscale lerp.
• A priority-flood algorithm for the spillmap. Mars has thousands of closed basins; the naive approach produces obviously fake craters full of water.
• A palette blend that crossfades raw Mars to Earth-like as water rises, without either extreme looking cheap.
• Keeping the payload under 6 MB.

Why this matters

A habit I lean into: when something makes you curious, build the interactive answer. A static picture asks you to take its word for it; a tool you can poke at lets you check it yourself. The same instinct produces small, factually honest browser experiments rather than another image to scroll past.

This article was drafted with the help of AI to populate the page. I'm in the process of rewriting it - a principle I adhere to across all projects. AI produces boilerplate, not production-quality output.