Terrains using Three.js and SRTM Data

Let’s jump right in to three.js plane buffer geometry. Three.js offers a buffer geometry object which is a simple array of height maps, much like our binary file we used from the SRTM data. Compared to the normally used plane geometry, buffer geometry uses much less overhead and is significantly faster if the object does not need to be modified once initialised. To make things simple, I will assume that the terrain we need to generate is contained only within one binary hgt file, i.e., the terrain is within one latitude and longitude cell (this means that the bounding box of the terrain will be within one integer long and wide: N58.79 - N58.92, E006.22 - E006.33 is within one integer wide and long while N58.79 - N59.12, E006.22 - E007.13 will require more than one hgt file to process and will be needlessly complicated for this example).

Using SRTM Elevation Data in Javascript

1 arc second SRTM Data was made publicly available by NASA a few months ago. SRTM Data is collected by the Shuttle Radar Topography Mission. It sweeps the surface of the earth to find irregularities which form the height map. According to the mission website: To acquire topographic (elevation) data, the SRTM payload was outfitted with two radar antennas. One antenna was located in the shuttle’s payload bay, the other on the end of a 60-meter (200-foot) mast that extended from the payload pay once the Shuttle was in space.

WGS84 Projections

For our WebGL Augmented Reality App, we needed to preprocess latitude and longitude values into localised coordinates. Lat/lng values are great, but they are not very useful if you need to represent them inside a 3D space. It is far better to use [x,y,z] coordinates which are stored as floats natively and can be used directly without projecting them into another coordinate space. Of course, you are better off using lat,lng values if you are looking at very large distances on a globe.