Skip to content

WebGl terrain mesh

Create terrain mesh from NASA satellite data

London Height map from SRTM

WebGL rendered satellite data of London

Experimenting with various formats, from JPEG greyscale to GeoTiffs, I've found JPEG to be quick but lacking in accuracy, with potential inconsistencies in referencing to maxima.

In the end, I've opted to decode GeoTiffs via an API call to a node server using the npm library geotiff.js. It serves as a wrapper module for gdal and imagemagick, extracting all pertinent GDAL metadata and asynchronously returning sampled elevation points along with world coordinates, proving invaluable for mapping purposes.

London SRTM Data

The technique is later applied to create a miniature world, using a satellite image of Mallorca to generate both the terrain as a bump map and a colorized texture map.

Rendered geo data of Mallorca

By extracting elevation data from the satellite image, the miniature landscape's topographical features are recreated with depth.

See the project