A photo of Max Glenister Max Glenister

19: Which way is North? Part 1

When developing for Google Cardboard VR with JavaScript we’re depending on the browser’s support of device orientation to know which way the user is looking. You can’t guarantee the user is always looking in the direction you’ve oriented your scene.

This is probably one of the most glaring problems you’ll encounter when you finally get your VR experience in to the hands of a real user, and you’ll kick yourself for not noticing it sooner.

For me this happened while presenting some demos as part of my “20 Minutes into the Future with Google Cardboard and JavaScript” in 2015.

The problem is that I didn’t account for the direction I would be presenting in when I created the demos. All of my demos were created with the default orientation of cardinal North, but the stage I was presenting from was facing South.

On Android devices, device orientation measures this starting at North. On iOS devices, this is measured starting from the direction the phone is facing when the page is loaded.

So what can you do? Well it’s not easy to simply fix the way device orientation (or the way the browser reports rotation on the y-axis while in a landscape orientation) is reported to our JavaScript.

We could create a calibration device to provide an offset delta, and then use that whenever we do anything with the device orientation data.

I’m using Three.js’ DeviceOrientationControls.js plugin to provide my device orientation controlled camera. Helpfully, since Three.js r77 DeviceOrientationControls has a property alphaOffsetAngle, and a method updateAlphaOffsetAngle that allow you to specify the offset to use:

// angle is in radians
controls.updateAlphaOffsetAngle( angle );

Tomorrow I’ll look at creating a device to allow the alphaOffsetAngle to be easily set by the user.

Cardboctober

Check out my other Cardoctober posts here: /cardboctober

About the author

A photo of Max Glenister

Max Glenister is a Front-end Developer based in Oxfordshire. For work he spends his time designing, validating and implementing user interfaces. For fun he tinkers with Virtual Reality, 3D printing, embedded systems, game development and many other things.

You can keep up with Max on Github, Twitter and Reddit