Skip to content
A low-polygon representation of the earth, based on elevation
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit bc189da Dec 28, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.

Low-Poly Earth

This is a low polygon count rendering of the earth. I created it using THREE.js / WebGL, with elevation data from the Google Maps API.

Building the data

The first step in this project was to retrieve elevation data so that I could have something to display. I wanted to do this separately from the rendering, because if this was done before the client even loaded the page, that would mean they would not have to wait for it.

To that end, I run build.js using node.js. First I create an icosphere, at a specific level of recursion, using icosphere.js. I then collect each point on the icosphere, figure out the latitude and longitude coordinates of the point, and get the elevation of that point from the Google Maps API.

Once all of the data has been collected, I save it in elevation.dat, to be used in the actual application.

Elevation Data

The elevation data is stored in the following format:

Format Description
int16 recursion level
int16 elevation for 1st point
int16 elevation for 2nd point
int16 elevation for 3rd point
... ...
int16 elevation for nth point

For an explanation of this format and a history showing how I brought the size of my elevation data file from 12.1 MB all the way down to 81 KB, check out my Elevation Data History document.


As this project grew, I realized that I needed a way to manage the files I was linking together, and the assets that I was creating. To that end, I decided to use Webpack to bundle all of my files into one bundle.js. Not only did this allow me to easily link several javascript files together, but it let me load my json files with the rest of my javascript, and even include elevation data file.


An important feature of this project is that I wanted it to look good. Colors are often used to achieve that goal, and I wanted to make sure that it would be fairly easy to switch between different color schemes until I found one that I liked. I also wanted the color to be dependant on the elevation, as that is common for geographic maps / models.

I decided to use a color gradient from a site which offered a wide variety of gradients to choose from. I downloaded a few of the gradients I found there, and made it configurable so you could choose which one to use.

You can’t perform that action at this time.