Three.js: Render Real World Terrain from Heightmap Using Open Data
Join the DZone community and get the full member experience.Join For Free
this demo uses a noise generator to generate a random terrain, and adds a whole lot of extra functionality, but we can use this concept to also render maps of real terrain. in this article i'll show you how you can use freely available open geo data containing elevation info to render a simple 3d terrain using three.js. in this example we'll use elevation data that visualizes the data for the island of corsica.
or look at the live site here: http://www.smartjava.org/examples/heightmap
where do we get the data?
the open data that we'll use comes from aster/gdem. which is:
"the aster global digital elevation model (aster gdem) is a joint product developed and made available to the public by the ministry of economy, trade, and industry (meti) of japan and the united states national aeronautics and space administration (nasa). it is generated from data collected from the advanced spaceborne thermal emission and reflection radiometer (aster), a spaceborne earth observing optical instrument."
this project offers us elevation data (geotagged) with a resolution of 30 meters. on this site you can download tiles for specific areas (after free registration):
the tiles you download from there are in geotiff format (which i'll dive into in a future article). this format contains values for specific geo coordinates. three.js, however, can't directly work with geotiff images (which are way to big anyways), so we need to convert them to either jpeg or png. for this we'll use gdal . gdal is a library and a set of utilities that can be used to perform a wide range of gis related functions. if you're on a mac you can install gdal through macports:
sudo port install gdal ---> installing gdal @1.9.0_0+expat ---> activating gdal @1.9.0_0+expat ---> cleaning gdal
so download some tiles and make sure the form you download is a rectangle (see previous screenshot). unzip the tiles and copy all the "*_dem.tif" files into a single directory. this isn't really necessary but will make processing easier. with gdal now you can convert these downloaded tiles to pngs. for this i use the following very basic bash script.
#!/bin/bash for file in `ls -d *dem.tif` ; do gdal_translate -b 1 -outsize 400 400 -scale -20 2200 -of png "$file" ~/output/$file.png done
this will convert all the "dem.tif" tiles to a set of pngs. each tile is 400x400 pixels and we also define the range of the input to -20 until 2200. in other words the elevation from the input is from -20 tot 2200 meters since the gray scale in a png can only be in a range of 256, this will be downsampled. (we can use other input formats, or use an rgb scale, but that would require some custom code, which is a bit out of scope for this article). for most maps though, this should be enough for a general impression of the landscape.
one of the tiles for corsica looks like this:
so now we're stuck with a set of seperate pngs. we need to combine those to a single png that we can use as a heightmap for three.js. for this we'll use another open source library: imagemagick (also available through macports). in the example for corsica we have 8 files, which are combined into a single png using the following batch file:
process="astgtm2_n41e008_dem.tif.png astgtm2_n41e009_dem.tif.png astgtm2_n40e008_dem.tif.png astgtm2_n40e009_dem.tif.png astgtm2_n39e008_dem.tif.png astgtm2_n39e009_dem.tif.png astgtm2_n38e008_dem.tif.png astgtm2_n38e009_dem.tif.png" montage -tile 2x4 -border 0 -frame 0 -geometry '1x1+0+0<' $process combined.png
this results in a single png with the name "combined.png", which looks like this (scaled down):
that's it for the preparation part. we've know got a heightmap in grayscale that we can use in three.js (and in many other programs for that matter).
create a map using three.js
once we got a heightmap we can use it in three.js. the following code shows how you to do this:
and that's all you need to do. once you've got this basic setup working, you can easily add custom textures, fog or other extra objects. if you want to see this basic example in action look here: http://www.smartjava.org/examples/heightmap
Published at DZone with permission of Jos Dirksen, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.