How to create an interactive 3D landscape model in QGIS 3

It's been a while since I've posted a QGIS tutorial so with the release of QGIS 3.4 I thought I should do another one. This post is about how to create an interactive 3D model in QGIS 3.4 which you can then export and view in a web browser, like the one you see below. You can see the interactive web version here - it's great fun to play around with, particularly when you press R and watch it rotate. This kind of thing was possible in previous versions of QGIS but I think there are some great improvements with the new version of the Qgis2threejs plugin that you create this with (thanks to Minoru Akagi).

This is Kauai, an island in Hawaii

Make sure you read the instructions - very useful

The basics

All you need to make this work in the way that I have is a) QGIS 3.4, b) a DEM layer (that is, a raster layer with elevation data in it), c) some kind of satellite or aerial imagery, d) the Qgis2threejs plugin which you install via the Plugins menu in QGIS and e) a bit of time.

There are many sources of digital elevation model data but for this I used NASA's 30-meter resolution elevation data from the Shuttle Radar Topography Mission, which is very easy to download thanks to Derek Watkins' tile grabber. You need to register (for free, takes only a few minutes) to get the 30 metre resolution data but if you can't be bothered doing that you can get the coarser 90m SRTM data without registration. As is normally the case with this kind of thing, the area I was interested in was split between two tiles so I patched them together in QGIS (Raster > Miscellaneous > Build Virtual Raster). I chose Kauai in Hawaii because of its size and varied terrain.

Derek Watkins, I salute you

For satellite or aerial imagery, the usual approach would be to add a layer in QGIS using the QuickMapServices plugin (e.g. Google Satellite layer) but in this instance I used a Landsat 15m image from the State of Hawaii's Office of Planning GIS pages. This is a bit better quality than those available via QuickMapServices so I used this.

When you have the DEM data and the Landsat imagery in QGIS 3.4 it will look something like this:

Make sure your image fills the whole map view in QGIS

The preview window is a great addition

The process

You then activate the plugin by clicking the icon (see above) and it's a case of playing around with the options until you are happy with what you see. Since qgis2threejs has excellent documentation, I won't go over all the steps and options here but I would just add the following points - and see point 5 in particular.

1. Set the level of vertical exaggeration via Scene > Scene Settings... In my case the vertical exaggeration is 3.0.
2. In Scene Settings under Material you may be baffled by the options - Lambert, Phong, and Toon. I've exported three versions of Kauai, one for each - you can see the difference by opening them in a web browser but basically the lighting will look different depending upon which one you choose.
3. Right click individual layers to set the Properties. On the DEM settings you'll get a much crisper visual with the resolution set to 400% but the file size will be bigger and it will most likely load slower in the browser.
4. If your preview looks wrong, with weird, impossibly high extrusion, change the projection in the bottom right of the QGIS window, as below.
5. In previous versions of qgis2threejs, when you exported the view from QGIS it would automatically open the visualisation in a web browser. When you try this from QGIS 3.4 it will attempt this but if your default browser is Chrome or Internet explorer then you'll get an error message. This is a known issue so you'll have to view in Firefox or Edge (I haven't tried other browsers) to overcome it. This is only a local problem - it's fine viewed over the web in any browser.
6. If you look at the style panel in the image below, you'll see that I've colorized the raster layer. I did this to give the image a kind of 'morning glow' look to it. See below for a comparison between a colorized and non-colorized image.
7. Via Scene > Decorations you can now add in a north arrow (very cool, since it is dynamic) and a footer label to add text (which can be html, like I used to style the font and add the QGIS image).
8. If you want to add labels to a point layer, you can still do this by right clicking the layer in the preview and setting the options. It's no longer Times New Roman font either, so that's an improvement too. You can see an example with labels in a previous map I did of Madeira. I've added another screenshot below to show you how to set this up.
9. You can also now set the view to be in Perspective (the default) or Orthographic, which is another nice advance.
10. There are many things you might want to tweak manually that you can't do from within the plugin options but they can be done by editing the html and the js and css files (see below for more).

Don't worry, just change the CRS

Subtle difference, but I like the effect (this is a looping gif)

Setting labels relative to the DEM surface will usually look good

When you export the scene, qgis2threejs will create a number of files and folders which you can then put on a web server so that the world can see how amazing you are. Or, you can just view them locally on your own computer (but not in Chrome or Internet Explorer, like I said above).

Making it look even nicer

You may now want to change the background colour, font size and other bits and bobs. To do this you need to edit different bits of the .html file, the .css file and the .js file created by qgis2threejs. These files will be named as below.

• index.html (this is the default name, you may have changed it to something else) but it is here you can change the page name and footer text, for example.
• Qgis2threejs.css - you can edit this to change the north arrow position (I put it in the top right, but it's not there by default) and the colour of the sky.
• Qgis2threejs.js - you can edit this to change the font size (edit the value of the MinFontSize under label, where you can also edit the leader line colour) and the colour of the base sides and the overall lighting colours. 

This is how you edit the north arrow size and position (css file)

This is how you edit the sky colour (css file)

This is how you edit the footer text (html file)

This is how you edit the side colour and lighting (js file)

This is how you edit the font size for labels (js file)

If you want to edit the font, search for "font-family: arial, sans-serif;" in the css file and change it to something else. You can see some different options for that on this page. In the example below I just changed the font size to 24 and added font-family: "Comic Sans MS", sans-serif; to the css, as below.

You can use lots of different fonts here

This is the bit you want to edit

Last words

The last thing to say is that you should take some time to figure out how to control the visualisation. On mobile, it works really nicely too and upon export there is now a mobile option. It's worth playing around with the different export options to get a sense of what can be done. My favourite thing is to click on a point and you'll see the lat and long plus elevation and then you have two options - Zoom in here or Orbit around here - self explanatory but the orbit option is really cool. You can of course make it rotate just by pressing R.

Comic Sans has its uses, but this isn't one of them

Okay, that's it. 

Interactive Terrain Mapping in QGIS

During last year's winter break I did a little animation of Arctic sea ice, which eventually ended up being shown in slightly modified format in Svalbard Museum - and they even sent me a nice hat for my efforts. This year's spare time project was to look a bit more at terrain mapping in QGIS, with a purpose. Since I'm a Highlander in exile I dream of the hills quite a lot, and the mountains in particular. If you follow mountain weather reports for the Highlands, you'll hear of fairly regular avalanches. They may not have the ferocity of avalanches elsewhere in the world, but they can be deadly. The Scottish Avalanche Information Service do a great job of recording, documenting, mapping and educating here so I thought I'd add this data to some 3D interactives using Minoru Akagi's Qgis2threejs QGIS plugin and Ordnance Survey Open Data. If that sounds like gobbledygook to you, never mind - just look at the little animation below to see one of the outputs. The red dots are the locations of recorded avalanches since 1991. You can also play around with it in your web browser - it's quite good fun.

Avalanche data is from the Scottish Avalanche Information Service

I extracted the avalanche data from the SAIS webmap and just plotted the locations in QGIS. I decided to focus on an area I know relatively well - the Cairngorm mountain area. It's not high by world standards, at 1,245m/4,085 feet (6th highest in the UK), but at 57 degrees north and nothing much protecting it from the fierce winter weather, conditions up there can be extreme. In fact, I remember growing up sitting many times on the old chairlift as it swung in the wind! Not for the faint hearted. Anyway, as is the way with these things, the area I wanted to look at was split between map tiles, as you can see below in this QGIS screenshot.

I think there must be a name for the law of split map tiles

Methods-wise, I just patched together a few map tiles, clipped out the area I wanted to focus on, overlaid the avalanche location data, generated a hillshade with an azimuth of 180 and elevation of 27 (to simulate shadows at noon on 26 December), and then added some Ordnance Survey map tile data on top of it. I also did a version with Google satellite imagery, just to see what kind of result I could get. I've posted a little gif of the satellite version below, followed by more of the images. You can also play around with a smaller version of this in your web browser. It should also work on phones, but you might have to use three fingers to pan around.

This uses Google satellite imagery - interactive here

What you'll see below in the next five images are just screenshots from the final interactive from my web browser. You should see them in larger size if you click on them. I've modified some of the settings slightly but basically it's quite an easy thing to do in QGIS with the Qgis2threejs plugin. The updated document on this (18 Oct 2016) is also available in a single, handy pdf. If you want to use this tool, you'll find lots of useful tips in here.

Full view of the final interactive - looking north

Focused on Loch Avon (pronounced Loch A'an) 

This shows the main areas of avalanche activity in one view 

This is a view with the Lairig Ghru pass in the foreground

Another more vertical view of the southern part of the area

I like the effect here with the hillshade layer providing some sense of depth and shadow. There is no vertical exaggeration here and in the interactive version you can zoom in quite far before it becomes pixellated. I also wanted to see what kind of quality I could get by adding in a Google satellite layer and then exporting that. For this, I used the OpenLayers plugin in QGIS (though QuickMapServices is also really good for this). The final version was pretty big as I exported at a high resolution, but here are some snapshots.

The full view of the satellite version - click to enlarge

Loch Etchachan - watch this video!

A different view, showing a cluster of recorded avalanches

The resolution here is actually quite good

This is a view from 'over the back' of the ski area

One final overview image, just for completeness

As I said above, I also did a little extract of this focusing on a smaller area around Loch Avon. The satellite imagery changes part way along the loch but it's still quite pleasing. The interactive version works pretty well in the browser and the image quality here is also pretty good (I exported this at 200% in the Qgis2threejs settings).

Loch Avon - a nice little video from March 2016

It's not always winter here - take a look

Along the way, I almost forgot why I started to map this - the purpose was to plot some interesting and important data on top of the terrain in order to try to understand more about which areas are particularly prone to avalanches. Along the way, I learned more about Mike Spencer's snow hydrology research and PhD (more on that here) and found out some stuff that will help me update my teaching material on this topic. I did begin to look at the Ben Nevis area as well (below), but I decided to focus on the Cairngorms instead this time.

25 years of avalanche locations (red dots) for the Nevis Range

That's all for now. Thanks to the kind of data collected by the SAIS, Ordnance Survey Open Data, and great tools like QGIS and Qgis2threejs, it's becoming much easier to explore, analyse, visualise and understand important datasets. That is kind of what I was attempting here, as a little holiday experiment.

Thanks for reading.


Map data: Contains OS data © Crown copyright and database right 2016