Tag Archives: Cesium

Simple CesiumJS Skydive Sim


Note: updated version with guidance lights here.

On July 30, 2016, a man named Luke Aikins went skydiving, without a parachute, and landed safely in a net. I was curious what that would feel like, so I made this simple skydiving simulation using CesiumJS.

You can track using W, A, S, D to feel how much control you could possibly have on the descent.

The simulation parameters are as follows:

  • the location is similar to the event, but I’m not exactly sure where it took place. Apparently, it was at the Big Sky movie ranch, near Simi Valley, CA. This is the nearest open area to where Google Maps tells me that is.
  • the red target on the ground is 30m x 30m, same as at the event
  • the simulation starts at 7620m (or 25,000 feet), same as at the event
  • you fall at 53.6448 meters/second, which is 120mph, which is at the slower end of the velocity range a human would travel during free fall. I figure he was trying to go as slow as possible, but there’s only so much you can do to make that happen!
  • I was surprised to learn (simultaneously from both @tkw954 and @erikfriesen – thanks!) that a good skydiver can track at 45 degrees (1:1 glide ratio), which made the math for horizontal movement super-simple – it equals the fall rate.

I stole borrowed most of the animation/control code from the Cesium Camera Tutorial.

The simulation ends in blackness, which is because I was too lazy to make a net, however with no net, that seems fitting. Have fun!

edit (08/06/16): this post was featured on Maps Mania!

edit (08/09/16): added guidance lights to this example. This is likely not how the actual light guidance system worked. In my example, the farther you’re aimed from each corner (up to 100m), the more red the circle turns. The closer you’re aimed to each corner, the more green it turns. It would be more useful to code the lights to indicate in which direction to correct, but I only have so much time.

edit (09/01/16): this post was mentioned in the Cesium Blog!

edit (12/29/16): this post was mentioned in the Exploratorium Blog!


3D Grande Prairie Buildings (LiDAR)


Sometime in the last year, the County of Grande Prairie (Alberta) starting providing bare earth and full feature LiDAR through their Open Data Catalogue (LiDAR download map here). Here’s how you can use the data to visualize 3D buildings, using a combination of ArcGIS for Desktop (with Spatial Analyst and LAStools), QGIS, and Cesium JS.

  1. Find and download the bare earth (digital terrain model = DTM) and full feature (digital surface model = DSM) LiDAR zip files for a quarter section of your choice from the LiDAR viewer (I used the files here and here). To familiarize yourself with the concepts of DSMs and DTMs, read this answer.msw8y
  2. Download LAStools and add the LAStools toolbox to ArcMap (or ArcCatalog)
  3. Run the las2dem tool within the LAStools toolbox for each of your downloaded .las files. You can accept all default parameters.
  4. The tool should output a .tif image for each surface, projected to UTM Zone 11. If not, run Define Projection to assign the projection.
  5. The names of each layer will be the same, by default (e.g. “710622NW.tif”). Change them to be unique, so geoprocessing tools (and you) can easily tell them apart (e.g. “710622NW_BE.tif” and “710622NW_FF.tif”).
  6. The DTM and DSM each report elevations in meters above sealevel. Since we are interested in the difference between those elevations (i.e. the difference between rooftop and the ground pixels) we need to subtract the two images. You can do this using the Minus tool, or more generally, Raster Calculator. I used the expression: Int(“710622NW_FF.tif”-“710622NW_BE.tif”) to return the difference between the DSM and DTM, as integer numbers (this will simplify things later on).
  7. Eventually, we are going to want polygons to load into Cesium (on the order of hundreds or perhaps a few thousand), not individual pixels (there are 700,448 pixels in my image). At this point, we have what is called a classified image, classified by height in meter increments. We want to group this classified image by similar height values, and we can do that by processing our classified output. Following the instructions in this link, we are guided through filtering, smoothing, and generalizing our output.
  8. Run Raster to Polygon on your generalized output to produce polygons.
  9. Cesium is going to want lat/long coordinates, so you may as well run the Project tool on your polygons to switch the data to WGS84.
  10. As far as I know, ArcGIS does not support GeoJSON (which we are going to use in Cesium). Conveniently, QGIS does. So, load your polygons in QGIS and “Save As…” GeoJSON.
  11. Upload your GeoJSON to your host.
  12. Switching to Cesium, create a map and load your GeoJSON (general example here). Cycling through the GeoJSON polygons, assign the polygon height to 0, and the extruded height to match the elevation attribute in your data (for me, that was stored in the “GRIDCODE” field).
  13. That’s it! You can see my interactive example here, using a “modern” browser. Here’s a sample, showing the Paradise Inn (pictures from my example, and Tom Shield Realty):



Note: I tried and failed to add a link to the LiDAR Open Data License in my example. Hopefully, this will be sufficient.



Runaway Train Simulation (Regina, SK)


CBC reported on a runaway train car that rumbled through Regina, SK early Wednesday morning (article here). After about 15 minutes, the car stopped itself about 4km away, after crossing several busy streets.

I’ve made a simulation here. I used the default truck model provided by Cesium. The animation takes the full 15 minutes to run at 1x speed, so you may want to speed it up using the green arrow in the control at bottom left.

3D Prince George Buildings Map


I’ve been working through some of the demos for Cesium JS (a JavaScript library for creating 3D maps), and came across this one demonstrating how to display the buildings of Nanaimo.

I was curious to see if the data exists for Prince George, BC, and it turns out, it does (PG Open Data Catalogue, buildings download)! I’m not 100% sure if this dataset was created manually or through automation, but I’m impressed with the level of detail.

The method I used to make this map* is actually shockingly simple. I downloaded the shapefile, saved it as GeoJSON in QGIS, and uploaded it to my server. Then, the JavaScript on the webpage incorporates Cesium, loads the geometry data from the GeoJSON, adds heights from the buildings’ attributes list, and sets the camera view. That’s how easily you can make a pretty neat looking 3D map of Prince George.

*note: there are over 30,000 buildings in this dataset. It takes about 30 seconds to load, for me. It may not work on your mobile devices.

Cesium the weekend!


Looked into Cesium, the WebGL JavaScript library for creating 3D globes, and 2.5D and 2D maps, today.

So far, so good. The tutorials are great, and documentation relatively well populated. Installation was painless. The major quirks so far have been due to funny interactions between Windows Chrome and DirectX, which I won’t pretend to understand, but apparently it makes it so outlineWidth is not supported, which means all polygon outlines are set permanently to 1px. Not a huge deal, but I’m guessing I’ll run into more technical stumbling blocks as I delve further in.

Here’s a quick example, which draws a 10 degree grid over the Earth, and places an LSU beacon above Tiger Stadium.

Note: must use WebGL-enabled browser, which means Chrome or newer version of Firefox/IE/etc. You can check if your browser is compatible here.