Skip to main content

Build an AR maps app with Cesium

I discovered a neat little trick to overlay geographic information into augmented reality, similar to Google Maps' AR mode.


Cesium is a 3D mapping Javascript library. The inputs to Cesium's camera look awfully similar to the outputs of a phone's motion sensors. What happens if you connect the two?  

Load Cesium from your local app assets, then hide its terrain and background:
var transparentBaseLayer = new Cesium.SingleTileImageryProvider({ url : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=" });
cesiumWidget = new Cesium.Viewer('cesiumContainer', {
       imageryProvider : transparentBaseLayer, 
       baseLayerPicker : false,
       timeline: false,
       skyBox : false,
       skyAtmosphere : false,
       contextOptions : { webgl: {
              preserveDrawingBuffer:true,
              alpha: true }}
       });
cesiumWidget.scene.backgroundColor = Cesium.Color.TRANSPARENT;
cesiumWidget.scene.globe.baseColor = Cesium.Color.TRANSPARENT;
Overlay a transparent web view onto a live camera (Android version):
SurfaceView surView = (SurfaceView)findViewById(R.id.sview);
SurfaceHolder camHolder = surView.getHolder();
// To do: Implement SurfaceHolder.Callback
camHolder.addCallback(this);

WebView webview = (WebView)findViewById(R.id.webview);
webview.setBackgroundColor(Color.TRANSPARENT);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccessFromFileURLs(true);
webview.loadUrl("file:///android_asset/ar.html");

Connect the phone's GPS & motion sensors (eg. Android's LocationManager & SensorManager) to Cesium:
String cesiumCamJS = "cesiumWidget.camera.setView({" +
"    destination: Cesium.Cartesian3.fromDegrees(" +
"       " + myLongitude + "," +
"       " + myLatitude + "," +
"       " + myAltitude +
"       )," +
"    orientation: {" +
"        heading: " + myAzimuth + "," +
"        pitch: " + Math.toRadians(myPitch) + "," +
"        roll: " + myRoll +
"    }" +
"});";
Webview.loadUrl("javascript:" + cesiumCamJS);

It was one of those Aha! moments when I held up my phone and it actually worked! The 3D Cesium space almost exactly matched the real world space around me. This technique allows you to harness the capabilities of Cesium to project a variety of objects and lines onto the world around you.

The caveat is that a phone’s compass can be inaccurate. While the compass is improving in newer phones, it's incumbent on Android & iOS to find a better solution.

We launched an app called Spotup that overlays the names of the places around you - learn about any landmark, mountain, etc by simply pointing your phone at it. Give the above techniques a whirl to create your own AR mapping idea.

Spotup in action:


Comments

  1. Dan - I'd like to use the photo at the top of this page to illustrate use of Cesium data using AR. May I use the image with credit to you and a link to the Spotup website? Thank you ~Tony thodgson@brainwaive.com 832.317.3703

    ReplyDelete

Post a Comment