Using 3D Web Mapping to Model Offshore Archaeology

Ever since I started working in the renewables industry on offshore wind farms over 8yrs ago and had to analyse shipwrecks, I thought about how much more interactive and informative shipwreck analysis would be in 3D. There are many companies out there at the moment who produce the most amazing visualisations, where is the ability to move along a fixed track to view a 2.5D wreck but there is no ability to relate it to anything, no context and normally the cost is extremely high when the data captured is normally geospatial and used within a GIS such as QGIS, ArcGIS or Fledemaus.

Here is an example of the amazing model of the James Eagen Layne created by Fourth Element and the model of the Markgraf Shipwreck by Scapa Flow Wrecks

Please don’t get me wrong, I admire these models and they provide detail and information that would be almost impossible to render in a GIS web map without some serious development and a lot of modelling but technology has progressed. Five years ago I would have said that creating an offshore 3D web map was the thing of dreams, whereas today it is a few clicks of the mouse. Using ESRI software, I was able to combine both terrain and bathymetry, adjust for tide datum differences, import a 3D model and then add links and images to the web map (called a ‘scene’).

The most exciting thing we found in developing this, was the cost and time in implementing such a solution. With the ability to consume data from Sketchup, ESRI 3D Models and even Google Earth models, we can reduce the time which a scene takes to build from weeks to mere hours, the most time consuming part is adding the links & getting the colours nice!! Have a look below at what we created:

[iframe src=”https://cloudciti.es/scenes/SJaI7ZBO/embed&#8221; width=”836″ height=”470″ frameborder=”0″ style=”border: 1px solid whitesmoke” webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><p><a href=”https://cloudciti.es/SJaI7ZBO”>Wreck of the James Eagen Layne</a> from <a href=”https://cloudciti.es/users/54930bf17b2842080022f175″>Garsdale Design Limited</a> on <a href=”https://cloudcities.io”>CloudCities</a&gt;. ]

The model can be navigated in a similar manner to Google Earth, the model should also be interactive, with the ability to click on areas of the wreck with information returned on the right of the screen. If you look at the bottom left there are a set of icons which I will explain.

Overview of the buttons

Camera Button

 

The camera button, highlighted in green, provides access to the scene bookmarks, click on any of these and the scene will move to the view relating to the text. It will also alter the layers shown to provide the best view (according to the creator)

Animation button

The animation button, highlighted green above, animates the scene by cycling through the bookmarks

Layers buttonThe layers button allows access to the information relayed on the scene. By default, the tidal water is turned off and only one model is shown.

Light Simulation

The light simulation button provides ability to cast shadow and simulate specific times of day. Although not really relevant for an underwater feature, it provides a method for viewing internal features better.

Mobile User Bonus Feature!

For those of you using a mobile device, you will notice one further button:

Cardboard button

Yes, the scene is fully 3D and the viewer fully supports Google Cardboard, so go ahead and have a go!

Future development

This is just the beginning, as you can see this viewer is extremely lightweight and responsive Moving forward, we (Garsdale Design Ltd) are looking to adding further information such as nearby wrecks, more detailed bathymetry, objects which may cause risk such as anchorages and vessel movement in the area. The potential is immense and where this is geographic (hit the map button on the right) you can relate this to a real world location….in future versions we are looking to implementing Admiralty charts and bathymetry maps to view side by side with the site.

Disclaimer

I am not an archaeologist or diver! – Data is sourced from open data sources (Inspire, EA Lidar, Wikipedia) with the exception of the model(s) which were built by myself from images and multibeam data. Photos were obtained from Promare, on the Liberty 70 project – Contains public sector information licensed under the Open Government Licence v3.0, This data is not to be used for navigation or diving.

For further information or to ask how Garsdale Design can assist you, please do not hesitate to contact me.

QGIS 2.5D AGAIN….But on a web map!

You can now export your QGIS 2.5D maps straight to a web map thanks to the genius(es) Tom Chadwin & Luca Casagrande who developed the QGIS2Web plugin. Before I run away with myself and start talking 2.5D and cool effects, I think it’s best I clarify a few things.

No, you didn’t misread that, you can now export your QGIS 2.5D maps straight to a web map thanks to the genius(es) Tom Chadwin & Luca Casagrande who developed the QGIS2Web plugin. Before I run away with myself and start talking 2.5D and cool effects, I think it’s best I clarify a few things.

Firstly, I realise that I told a bit of a fib when I wrote the xyHt article on web mapping where I said that there wasn’t an easier way to build a web map. There is, it is QGIS2Web, the only thing you need is your own website and QGIS. You simply make your map and hit the plugin button….voila! Not only a preview of the web map but also options for measure, popups, scalebar and even basemaps – It is truly a thing of beauty. The only technical knowledge you need is how to copy and paste your folder onto your web host.

It sounds too good to be true, which is why I feel guilty for ignoring it for so long….Having been beaten by the geospatial industry for well over a decade, I naturally assumed it was some scam whereby I would have to buy into something or pay for a subscription but no, this is the real deal. This is what ArcGIS online should have been, you front the cost (or not – have another look at Github pages *ahem*) for your website and the rest is free. You can host as many maps as you want with whatever style and data….of course, with a little know how and you can even link them to other sources using hyperlinks in your fields.

Screenshot from the 2.5D map I made
Screenshot from the 2.5D map I made

So, let’s clarify what 2.5D is

2D is the everyday “flat” maps which you would generate in QGIS/ArcGIS/MapInfo/CadCorp (add your own here) although there is relation of how features lie in comparison to others, there is no depth. Buildings and trees appear as “top-down” flat objects.

In true Dragons8mycat style, the best way to describe this is using a 2D image of Super Mario Bros:

Super Mario Brothers in 2D
Super Mario Brothers in 2D

2.5D Adds depth, though it is not full 3D, it cannot be explored like Google Earth, rather it is an illusion of depth.

This can be seen in the image below of Mario in 2.5D

2.5D Super Mario Bros
2.5D Super Mario Bros

3D provides true depth and the ability to explore the depth, this would be the Google Earth buildings or the CityEngine webscenes. Unlike a fixed view of the 3D features, they allow full movement around the real-world feature. Here is Super Mario once again to show what 3D is:

Super Mario in all three dimensions
Super Mario in all three dimensions

Is this the right time to discuss 4D?….No?….Briefly then – 4D is the medium of time, if we were to add a timeslider to the 3D Super Mario above, and  we could move around not only the features but also the time, then it would be 4D (temporal).

Out of interest I have had many discussions over what 3.5D is and so far the general consensus is that it would be a 2.5D map with temporal capability, so think of a 2.5D map which showed change over time….could this (below) be 3.5D?

3.5D?
3.5D?

Back to the future (qgis2web)

The QGIS2Web plugin provides the ability to create 2.5D features on a web map, there is the option to adjust & change colour and you can add functionality. What really surprised me was how easy it was.

Of course there are some minor things which I found as I worked through but I am sure that these will be fixed before this post goes live as the developers of this plugin are right on the ball.

Tip 1 – Use geojson files.

Although the Plugin uses any QGIS data (WYSIWYG) I found the plugin quicker and gave a more accurate representation with geojson files

Tip 2 – Forget your shadows

I was told that the plugin DOES honour the shadow effects but I found in my experience that the shapeburst fills and shadow effects didn’t work and in some cases caused the map to hang when switched on

Tip 3 – You need to remove the OSM maps in the code.

There are a plethora of basmaps available, I’m not going to knock it, BUT there is no option to turn them all off or to have them off by default. If you want to remove them, find the layers.js file and then remove the baselayers reference. var layersList = [baselayers,lyr_LandParcelsSedbergh,lyr_Trees]; should be changed to var layersList = [lyr_LandParcelsSedbergh,lyr_Trees];

 

[iframe src=”http://dragons8mycat.net/QGIS2WEB/sedbergh2D/&#8221; width=”600″ height=”400″ scrolling=”yes” ]

 

Above is the map I made of Sedbergh, as you can see, the OSM baselayer is still on as I keep going through phases of liking it and then hating it.

I am sure you will agree that, once the shadowing and shapeburst fills work, it will be amazing.

If you need any further information or would like some training, please feel free to contact me.

Nick D