Menu

Rendering four billion years of continental drift in the browser
📰

Rendering four billion years of continental drift in the browser

DEV Community: react·Elliot Sturzaker·about 12 hours ago
#hoeQ1MHy
#devtoreact#devto#dev#three#planet
Reading 0:00
15s threshold

Scrub a timeline and watch the planet rebuild itself. That’s the whole idea: a 3D Earth you can drag backwards through geological time, with the continents drifting apart and the entire look of the world, oceans, land, atmosphere, ice, changing to match the era you’re standing in.

It’s a Wildlab experiment, built with React Three Fiber and three.js. Not a product; a place to keep our creative-technology muscles warm. It uses the same WebGL and shader techniques that drive the morphing animals on our own site.

Three ways to draw a planet

The sphere is drawn by a custom GLSL shader that runs in one of three modes depending on how far back you are. The oldest eras have no real paleogeography data, so they’re generated procedurally: a molten mode for the Hadean, a glowing, barely-solid surface, and a noise mode for the Archean, where simplex noise stands in for land that no map remembers.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.