Developing globaltimoto: Moving to CesiumJS, after NASA Web WorldWind and Shockwave

by

This is a guest post by Tim Jules Hull about his app globaltimoto, which visualizes his motorcycle journey around the world to document local games and sports. The 3D visualization in the app has gone through a number of iterations, from Shockwave to NASA Web WorldWind, before moving to CesiumJS.

I’m Tim Jules Hull, a British computer games developer turned games explorer. Since 2003 I have been traveling around the world on a motorcycle documenting indigenous games and sports culture.

I record traditional games and sports through writing, sketches, photos and videos, which include interviews with the games’ participants. The intention of the project is to learn about culture through traditional play, capture data and promote interest in the subject matter. The long term goal is to create a radically interactive museum of indigenous games culture, be that a virtual, mixed or real space experience.

Watercolor world with mountainsglobaltimoto with CesiumJS: zoomed in and tilted to view of 3D watercolour world with mountains in the distance.

Website

globaltimoto is home to all the research data that I have captured and generated over the years. Last year I rebuilt the site using Cesium, to track my travels and research in a 3D custom map, showing the map markers, clusters and path that I was looking for. In this blog post I’ll walk you through the iterations of my website and why I landed on using Cesium in the most recent version.

  • Version 1.0 built in 2003 was a Shockwave 3D object with fully interactive and animated 3D globe.

  • Version 2.0 built in 2005 was pure HTML/CSS and did away with 3D since there was no native browser support.

  • Version 3.0 conceived in 2012 but built in 2018 was only made possible with Cesium.

Version 1.0: Early 3D with Shockwave

Back in 2003 there was no native browser support for 3D. I really wanted to display my journey across a 3D globe, partly because I wouldn’t expect anything less after ten years in video games. A 3D visualization would look cool in a website, and I always disliked the Mercator projection, which gives a very distorted view of the world.

There was only one way to appease my ambition: go against all convention and use a Shockwave 3D object! Yikes—I can hear you all tremble in your boots at the thought of such a horror, powering a website with a plugin. I went ahead and built it anyway.

Shockwave installing…

I created the entire globe and all its separate country objects in 3D Studio Max, one vertex at a time. Each country object had a unique material, which allowed me to select countries to get mouseover labels and to launch country specific views on click. The globe was animated, had horizon fogging, a journey path and even animated objects to point to my current location. The visitor could grab the globe to spin it and zoom.

Shockwave 3D globe.

Version 2.0: 2D with HTML/CSS

In 2005 I realized the error of my ways and built a flat HTML/CSSversion of the site using Dreamweaver. I now had two versions of the site, and yes, you could choose from a 2D or 3D view of the site. This made my life even more complex, managing two versions of a site at the same time, all whilst traveling. It got to the point that I didn’t update the site anymore because the mountain of work required made it unappealing.

Flat HTML/CSS.

Version 3.0: 3D again with WorldWind and now CesiumJS

Eventually in 2012 I hid my old site behind a one-pager, with an iFrame containing a Umap and a slider with links to just my latest videos. It was at this time that I began to hope again for 3D supporting browsers, and seeing HTML3D, thought it was time to start designing a new site. However it was still too early for browsers to do all the things I had in mind. Only in 2018 did it seem like a real possibility.

By this time several technologies had been created that I found very appealing. Map tiles had come a long way and Stamen map tiles were particularly eye catching. In particular I liked Stamen’s “watercolour” tiles, which turn even the most mundane locations into beautiful splashes of watercolour. The new site I was designing was intended to have a sketch and watercolour look about it, since I like to draw and paint with watercolours myself. So the Stamen tiles seemed like a perfect match.

Yet those tiles on a 3D sphere still have a very flat appearance. I was very much used to seeing 3D landscapes in video games and was very pleased to see that a technique to draw height, based on elevation data from tiles, was also possible. I began to imagine and mockup how a combination of these tiles might appear, and I really liked the cartoon 3D video game style that it resulted in.

3D map construction mockup.

At this time I looked at Cesium, but got stuck because there was an issue with clamping polylines to terrain elevation, and I really wanted a polyline representing the journey’s path. However, NASA Web WorldWind already had this working and offered their elevation tiles as a built-in service. So I started experimenting with NASA Web WorldWind instead. Eventually, I threw in the towel with WorldWind for various issues:

  • Their tile services were very patchy, often going down.
  • The browser caching of tiles and subsequent rendering of the tiles had lots of issues resulting in huge chunks of the globe not being rendered, or taking many minutes to render, which was completely unacceptable.
  • There was a lack of project support and a very small community of active developers.

NASA Web WorldWind tile caching and rendering issue.

Ultimately it might have been possible to use external tile sources to mitigate the issue of patchy tile service, but because there was so little response to the browser caching and rendering issues, it was impossible to proceed.

After a month or so of driving into a brick wall with NASA, I checked back with the Cesium forum to see if there had been any movement with clamping polylines to terrain. To my astonishment the issue had been resolved, and my hopes were raised once more.

Journey pathJourney path clamped to the ground elevation data.

Compared to NASA Web WorldWind, Cesium has a much more active community and many people really pushing to make it a viable web technology. There are lots of examples and demos that give you a quick insight as to what is possible and the code required to make it happen. Importantly, whenever I got stuck, it didn’t take too long for someone to come to my aid with very concrete solutions, workarounds, or likelihood of a fix in future builds.

On the whole Cesium has provided a technical solution to all the main requirements I was seeking:

  • custom tile source (layers.addImageryProvider + Stamen watercolour)

  • elevation tiles (createWorldTerrain + MapTiler hills)

  • journey path (PolylinesOnTerrain)

  • post map markers (Billboard)

  • clusters (clusterBillboards) and more.

It is also important to mention how the app is able to filter post types on the map, via switches for categories.

filter buttonsFilter buttons here only displaying “Game” posts on the map.

One of my favorite features is a timescrub control allowing a visitor to drag the journey start and end dates to update the time sensitive path and markers.

TimescrubTimescrub reduces path extents.

Another important, but less talked about feature I like in Cesium is the ability to customize the help popup, which gives the visitor an indication of what the view controls are. Being able to style this exactly the way I want it, helps tie the interface to my own GUI style.

Custom Cesium help popup.

I just checked back with NASA Web WorldWind, and lo and behold they are going to suspend the project from April 5, 2019. If you’re looking for a way to create customized apps for your 3D data, I recommend Cesium for sharing your 3D projects.

Get started with a Cesium ion account

Sign up for free