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

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.

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.

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.

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.

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.

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.

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.

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.