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.
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.
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.