This tutorial covers how to add Cardboard VR support to your GLAM Apps in a few easy steps.

To demonstrate, we are going to adapt the Bubble Pop! showcase for use with Cardboard. Now, Bubble Pop! is interesting because it not only has fun graphics against a panoramic background - great for VR - but it also features interaction. So, in this tutorial we will learn now to do the three things necessary to create a Cardboard application: stereo rendering in WebGL, head tracking use the phone's accelerometer/gyro, and input.

First, let's try out the app. Using your mobile browser, click on the image below to launch the demo. After it's launched, tap once on the screen to go into fullscreen mode. Then pop your phone into your Cardboard viewer and go! You should be able to look around the scene-- up, down, left and right-- and see the background change.

Now, if you have one of those nifty DIYVR Cardboard viewers from DODOcase, it also has an input level on the right side of the box. Whenever you are looking at a bubble, tap the lever. You should see the bubble disappear and hear the pop!

Let's walk through each of the steps.

Turning on Cardboard rendering in GLAM is simple. You just add a <renderer> tag to your content:

Under the covers, GLAM does a side-by-side rendering. That is, instead of a single camera to render the scene, GLAM creates two cameras, each offset from the other by your interpupillary distance, and renders the scene from each camera to a separate viewport half the size of the screen.

Cardboard VR uses the phone's gyro and accelerometer to track changes in orientation. Mobile browsers generate deviceOrientation events when the phone changes orientation; we use those inside GLAM to implement a camera controller suitable for use in VR.

To add a deviceOrientation camera controller to the GLAM scene, simply create a <controller> element with type deviceOrientation as follows:

One of the most challenging aspects of VR application design is input. Because our vision is cut off from the outside world, we don't have easy access to the mouse or keyboard like we do in regulard desktop applications. For Cardboard VR it's even worse, because the phone is contained in a box, making it hard or impossible to swipe and tap.

The way many VR developers are getting around this is to drive input using the user's eyes: i.e. whatever they are looking at becomes the selected object. GLAM defines events for this, viewover and viewout, that the developer can listen for with an event listener as follows. sphereelt.addEventListener("viewover", function(event) { selectedBubble = groupelt; }); sphereelt.addEventListener("viewout", function(event) { selectedBubble = null; });

Summary