Three.js + NASA MOLA

What If Mars Had Oceans?

An interactive Mars globe driven by real NASA elevation data. Drag the slider, watch the planet flood.

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

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 practice I lean into: notice low-effort viral content, then build the interactive answer. The tool invites probing; the debunk asks for trust. Same instinct produces small, factually honest browser experiments that get linked because the reader can poke at the answer themselves.

All experiments
Hire me

Let's talk.

If you'd like a tool like this one built for your stack or your audience, that's exactly the kind of work I do.