MasterMaps

My good colleague, Harald K. Jansson , owns an Oculus Rift headset , and he couldn’t resist creating a virtual reality version of my 3D map of Jotunheimen . It’s very impressive, especially when you know that everything runs in the browser. If you’re lucky enough to own a Oculus Rift headset you can try yourself by clicking on the image below. The demo is built using two Oculus plugins: THREE.OculusRiftEffect  by troffmo5 used to render the scene in stereo 3D side by side with lens distortion. THREE.OculusControls  by possan to allow head tracking. You need to fire up a HTTP server yourself to get head movement data from the headset.    We’ve also switched from TrackballControls to FirstPersonControls which allows you to fly through the landscape. Mouse navigation is disabled as it didn`t work well with the Oculus control, but you can move around with your keyboard: A / “arrow left”: Move left D / “arrow right”: Move right W / “arrow up”: Move fo...

This is the third blog post in my "terrain mapping with three.js" series. With the terrain geometry in place , it's time to create a texture and drape it over the terrain. In  the first blog post in this series, we created a digital elevation model (DEM) for Jotunheimen. We can use this DEM to create color relief and hillshade that will enhance the view of our terrain ( this blog post explains the details). gdaldem color-relief jotunheimen.tif color-relief.txt jotunheimen-relief.tif Creating nice-looking hillshades got easier with GDAL 1.10. By adding the "combined" option to gdaldem  you get a slope-enhanced shaded relief: gdaldem hillshade -combined jotunheimen.tif jotunheimen-hillshade.tif I'm combining color relief and hillshade with Mapnik , and at the same time adding colors for lakes, glaciers and trees using open data from the Norwegian Mapping Authority ( this blog post explains the details). nik2img.py jotunheimen-textur...

In my last blog post , we converted a digital elevation model (DEM) to a WebGL-friendly format ( i.e. easy to transfer and parse by JavaScript in the browser). In this blog post, we'll use the elevation data to build a terrain mesh with three.js .  First we need to transfer the terrain data to the browser. The elevation values are stored in a binary file as 16-bit unsigned integers. This page explains how you can send and receive binary data using JavaScript typed arrays. I've created a TerrainLoader by adapting the  XHRLoader . You can also use this function: function loadTerrain(file, callback) {   var xhr = new XMLHttpRequest();   xhr.responseType = 'arraybuffer';   xhr.open('GET', file, true);   xhr.onload = function(evt) {         if (xhr.response) {       callback(new Uint16Array(xhr.response));     }   };     xhr.send(null); } Loading elevation data with the Terrai...

Three.js is a very promising tool if you want to add a third dimension to your web maps. In my last blog post , I showed how easy it was to create a WebGL Earth in the browser. Today, I'm starting a new blog series about terrain building with three.js. Last year, I wrote a blog series about all the fun you can do with digital terrain data: Digital terrain modelling and mapping Creating hillshades with gdaldem Creating color relief and slope shading with gdaldem Terrain mapping with Mapnik Land cover mapping with Mapnik Using custom projections with TileCache, Mapnik and Leaflet Creating contour lines with GDAL and Mapnik Showing GPS tracks with Leaflet I will continue using map data from Jotunheimen , a mountainous area of Norway. The 29 highest mountains in Norway are all in Jotunheimen, as well as the deepest valley, Utladalen . It's a great spot for 3D terrain mapping. But the same techniques applies to all terrains, - you only need some terrain data. Inst...