Visualizing 100k Years of Earth in WebGL

Summary

What did Earth look like when humans migrated to the Americas? Changing sea levels and large ice sheets during the last ice age played a key role in human migration and explain many archaeological sites now buried under the sea. I wanted a better way to visualize how geography shaped our history. So I built an interactive historical model of Earth, covering the last 100,000 years. It includes elevation, rising sea levels, changing climate and moving ice sheets. And it works in your browser. In this post I will explain how I built this using multiple scientific datasets, data processing, THREE.js and shaders. Want to skip ahead? Try out the demo Elevation map The most important data that I need is a global elevation map of Earth. This data contains terrain height at a specific resolution. Each pixel represents a height between -8714 and 5724 meters, peaks like Everest are not included because the actual highest point is too small. I used the ETOPO Global Relief Model from NOAA (National Centers for Environmental Information) for this. But this dataset is way more detailed than I actually need. The resolutions here are given in arc-seconds. One arc-second is 1/3600 of a degree, that’s about 30 meters at the equator. For my purposes, I only need about 180 arc-second resolution (~ 6 km), so I downloaded the 60 arc-second file and downsampled it to this size. This brings it down to an 7200x3600 pixels. I then loaded this into Node.js using geotiff and wrote a script to compress it even further. I only need high resolution near sea level to determine the exact shoreline, so I make a custom value range for this. I compress every height value to a byte (max 256 values), by allocating 25 values for underwater, 25 for land, and the remaining 206 values for the sea level. Since sea levels only fluctuated by around 160 meters, this range is more than enough for my purposes. The result is saved to a 1 channel (no color) PNG file. I render this using a custom shader and a sphere ...