Adding Cardboard VR to your GLAM Apps
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 VR rendering

Turning on Cardboard rendering in GLAM is simple. You just add a <renderer> tag to your content:
<renderer type="cardboard"></renderer>
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.

Adding head tracking

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:
<controller type="deviceOrientation"></controller>

Adding view event handling

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; });
Often view events are combined with a timer to implement some kind of "countdown" so that after a long enough period, the object automatically activates. We don't do that in the Cardboard version of Bubble Pop!; instead we use touch input. When the user taps, the currently selected bubble pops. So running this demo will require an input-capable Cardboard viewer, such as the DIYVR Cardboard viewer from DODOcase.


Well that was pretty much it. As you can see it didn't take too much work to add Cardboard VR support to a GLAM scene. Make sure to try out the demo in your mobile browser, and don't forget to tap on the phone's screen to go full screen!