In my spare time, I like playing with maps. It is quite amazing just how much information you can portray in a simple image. You can reference volumes, places, differences – you can even create heat maps if you like. I’ve not moved any of my 2D maps over to the playground yet, but I will do eventually. I have, however, uploaded a number of 3D visualisations.

We start out in QGIS, an open-source GIS application. By adding LIDAR data from the Environment Agency, the ground level and building heights can be calculated, giving us our Z-axis. When we add building outline data from Ordnance Survey, we can extrude the shapes to give us a 3D environment. We can then apply shading, or overlay aerial photography to create our final scene. QGIS can then export this to ThreeJS, producing the 3D environment.

The produced output is relatively small in terms of filesize. Expanded in memory, however, a large visualisation can consume Gigabytes of GPU memory. This is all carried out in the browser, using OpenGL. Head over to the playground, where I’ve uploaded a few test renders.