Thursday, November 5, 2015

Climbing a virtual mountain, Cesium, and other big life moments


Much has happened since my last update, but I'll keep it simple. Last August, my lovely wife finished her awesome dissertation on the roots and development of toxic discourse in science fiction. With her PhD and job offer in hand, we left the University of Illinois for Oklahoma City (Urbana we will always love you).

Initially, I kept working remotely for the National Science Foundation grant, EnLiST, continuing the analysis of our teaching and learning network data and helping UIUC faculty plan for future grants. Eventually I did hit the job market, and became the instructional technologist for the Center for Learning and Teaching at Oklahoma City Community College.

What does that mean? Basically, it means making sure the college stays up-to-date with technological change. Some days this means helping faculty with changes in our learning management system (LMS). Other days, it means building 3D models, visualizations, and applications for learning (such as this digital mountain).

A Cesium application used to track various satellites in orbit.

Lately, this has meant working with CesiumJS. It's one of the largest, if not the largest, open-source JavaScript libraries in development. It's a WebGL virtual globe and map engine, and it's quite versatile and fairly easy to get up-and-running. Think of it like Google Earth, but for your internet browser (Google Earth had a plug-in once, but it was deprecated because it relied on NPAPI).

I first approached Cesium when I was looking to build an app to help new students navigate the college. But I soon realized the library had a multitude of uses beyond navigation. Cesium could be used to model and map historical events, visualize macroeconomic and sociopolitical concepts. It also could help community college students, who often times come from disadvantaged backgrounds, digitally tour places where they could never travel in person.

As a drone and sUAS user, Cesium can provide a rich digital canvas to display drone-gathered images and data. The people behind Cesium also do a good job of curating case studies and examples in their blogdemos, and tutorials pages. Because everything is client-side, it has essentially zero server requirements. It's trivial to host and share your Cesium project on GitHub, for example.

Now, virtual globes are great and all, but at some point you need people in the field to collect the data. My wife and I took advantage of the unusually mild late-summer here in Oklahoma and decided to explore some of the state's natural wonders. We set out for the Wichita Mountains Wildlife Refuge, the oldest managed wildlife facility in the United States, and home to 650 bison and 800 elk.

You can't legally fly a drone or any other remote-controlled aircraft over a U.S. wildlife refuge, but that was fine. Drones have been known to disturb wildlife, and drones couldn't really capture the data I was looking for. Also, I don't know if you could tell from this site, but I have this habit of turning vacations into work projects. So, I kept things simple by taking photos on the ground and tracking my progress with a GPS tracking app on my old smartphone.

Even just 1/3 the way up the mountain, the view was excellent.

Our target was Elk Mountain. With a prominence of just 170 meters (560 feet), this granite dome is not strictly a mountain according to some international definitions. The USGS, however, hasn't recognized strict definitions for mountains since the 1970s. This also was just fine. Having done no vigorous training whatsoever, my climbing legs were only prepared to step over obstinate house cats, Legos, and terrain of similar ruggedness.

Nevertheless, it was an enjoyable climb. It took a little over an hour to climb the 1.79 kilometer (1.1 mile) trail up the mountain. Elk Mountain was more difficult than your average hiking trail, but due to an abundance of stepping stones, it was fairly pedestrian as far as mountains go.

More importantly, the trail was chock-a-block full of wildlife, and the top of the mountain provided an unparalleled view of a wonderfully-preserved mixed grass prairie. I took a number of overlapping photographs at the summit, with the idea of later creating a 360-degree panorama.


We couldn't have asked for a better introduction to our new home.

With the GPS logs of the descent and photographs in hand, I got to work creating the digital tour with the Cesium library. Only a few tweaks were necessary from the "stock" Cesium viewer. The timeline widget was disabled, as time was static in this presentation.

Cesium uses a file format called CZML to describe any number of objects you'd want on a digital globe, like geometries, pins, and billboards, along with information on how those objects move or change over time. It's like what the KML file is to Google Earth. But unlike KMLs, CZML files are essentially just JSON files with a unique schema, so they can be read and used by a wide range of applications. To make things even easier, there is a handy Python library you can use to create a CZML file from whatever data sets you may have.

I could have used a CZML file to describe the descent down Elk Mountain, but since this wasn't a massive set of data points, it was easier just copy the coordinates right out of the KML file that my GPS tracking app created. I then created a groundPrimitive object, and gave it the array of coordinates. Ground primitives are fairly new and special in Cesium; they're the only kind of geometry that can be draped over 3D terrain (like, for example, a trail down a mountain!). While many Cesium apps will work on mobile devices, this particular effect does require some client-side GPU power, so unfortunately this virtual mountain is unlikely to work on smartphones or tablets.

From the Cesium blog: ground primitive geometries draped over Mount St. Helens.

Most style changes with Cesium can be made in CSS. For example, clicking on a pin, geometry, or other object in the Cesium viewer will generate an info box. The default settings made the info boxes too small for my images and panoramas, but this was fixed with a few changes to the cesium-infoBox class in widgets.css. This is a great way of doing things, because you don't necessarily have to make a custom Cesium script for every new application. Sometimes you just need to copy a single CSS file and change a few properties.

Speaking of the panorama -- that was created with Microsoft Image Composite Editor and Pannelum.js. ICE stitched the photographs into an equirectangular panorama, and pannelum.js created the viewer for that panoramic image. Click the map pin at the top of the mountain to generate the info box that contains the panorama.



The final product is simple in terms of interactivity, but still quite illustrative. The user can visualize the path up the mountain, its relationship surrounding mixed grass prairie, and sample the flora and fauna (including the state reptile). The experience could be further enhanced with the aid of a simple VR headset such as Google Cardboard. The educational utility of Cardboard is not lost on Google, who recently launched a virtual field trip program.

Even without the aid of a VR headset, the future for Cesium looks bright. Outside of the classroom, Cesium could become a powerful tool to aid in processing and disseminating the vast trove of geospatial data and digital models created from drone missions. It could play a key role in the effort to create immersive news content. The fact that it has no server requirements, ample documentation, an expanding user base, and an increasing list of features probably means it will have considerable reach beyond GIS professionals.