Introducing the A-Terrain Component for A-Frame

Have you ever wanted to share your favorite places with your friends? For example your favorite photographs attached to a hike, or just a view of favorite peak, or your favorite places downtown, or a suggested itinerary for friends visiting? Or have you ever wanted to make a game that has real world geography?

Well it’s not quite so hard to do these days. To help with these kinds of explorations I’ve written a browser plugin that lets you render pieces of the earth, stylize them, fiddle with them in various fun ways, and generally playfully show and share whatever information you want — contextualized by real world data.

For example here is a stylized view of San Francisco as viewed from ground level on the Embarcadero:

You can try this example yourself in your browser here:

http://anselm.github.io/aterrain/examples/helloworld/tile.html .

The source code for this project overall is here:

http://github.com/anselm/aterrain

This project is written using A-Frame — a browser based framework that lets users build 3d worlds easily. The A-Frame philosophy is to take complicated behaviors and wrap them up html tags. If you can write ordinary HTML you can build 3d worlds.

A-Frame itself is part of a Mozilla initiative to foster the open web —to raise the bar on what people can create on the web. Using A-Frame anybody can make 3d, virtual or augmented reality experiences on the web. These experiences can be shared instantly with anybody else in the world — running in the browser, on mobile phones, tablets and high end head mounted displays such as the Oculus Rift and the HTC Vive. You don’t need to buy a 3d authoring tool, you don’t need to ask somebody else permission if you can publish your app, you don’t publish your apps through an app store, you don’t need a special viewer to view the experience — it just runs — just like any ordinary web page.

As far as rendering geographic data itself — there are many excellent open source 3d globe viewers. Many of these are focused on high quality 3d rendering and understanding the world in context. I definitely feel Cesium is the best of breed here and in fact this work leverages Cesium. In fact this component can in fact be used as a quick and dirty globe renderer (even though the focus is more on grabbing bits and pieces of the world at low elevation and rendering them into your own projects).

The hope is that you can use this component as part of your own application, with your own navigation controls. I have however added some rudimentary navigation controls using hash arguments on the URL. This isn’t strictly the intended use and I haven’t documented these controls on the website but it can be kind of fun to use this to look at a few places in the world. For example here is a piece of Mt Whitney:

http://anselm.github.io/examples/sanfrancisco/index.html#lat=36.57850&lon=-118.29226&elev=1000

The real strength of a tool like this is composability — to be able to integrate maps into your own projects — especially near field views of close in landscapes with elevation. Since A-Frame has VR and AR integration it means you can also do mixed-reality views and I’d be curious to see if anybody builds some examples using this. For example here is a screen shot of A-Terrain and Mozilla Hubs being used for a collaborative hiking trip planning scenario to the Grand Canyon:

I put the above example on an ec2 instance and you can go to this URL if you want to join in that conversation:

http://18.219.187.134:8080/hub.html?room=1234

As another example of lightweight composability below I place a gigantic duck on the earths surface above Oregon. This is just a few lines of scripting.

The above example can be visited here:

https://anselm.github.io/aterrain/examples/helloworld/duck.html

Overall I’ve been careful to avoid using any shaders in this project — everything is collidable for example. Image draping is manually reprojected from mercator into an ellipsoid model and rendered in such a way that it can be incorporated into your projects with a minimum of effort on your part.

Note that despite the intent to keep this simple it will probably take some work still to use this — navigation on a globe especially requires some thought when you’re building your own applications and also want to incorporate earth data.

I do expect users will want to extend it or use it as a starting point and I hope that contributions or corrections can be directed back to me. There are a few licensing details to work out with respect to the data sources as well. Caveats aside I figured I’d share where this is at even if early.

The data itself is due to an agreement that Mozilla and Cesium ion (see http://cesium.com) are finalizing to provide access to this data for non-commercial uses. This includes world elevation, satellite images and 3d buildings. The initial release has elevation and satellite image data for the whole planet and also offers 3d buildings for the San Francisco Bay Area.

The project is at https://github.com/anselm/aterrain. Please feel free to submit suggestions, critiques, bug fixes through github. You can send praise through twitter :-).

I want to mention just a few of the folks who’ve helped bring this to this point — this includes Lars Bergstrom at Mozilla, Patrick Cozzi at Cesium, Shehzan especially (who was tireless in answering my dumb questions about coordinate re-projections), Blair MacIntyre (who had the initial idea) and Joshua Marinacci (who has been suggesting improvements and acting as a sounding board as well as testing this work).

We’re all especially interested in seeing what kinds of local-scale experiences people build, and what directions this goes in. I’m personally especially interested in Mixed Reality uses cases; say with AR Glasses or Magic Window views using an iPad. If you do have any examples or any spare next-gen AR glasses please send them my way.