Figure 1.1 | The model of Google Cardboard I have is sold by DODOcase

Virtual Reality In Mobile Web Browsers

Since the debut of the Oculus Rift (and it’s subsequent purchase by Facebook), virtual reality has become very popular. After seeing Google’s cardboard VR set at Google I/O this year, I decided to take a crack at creating virtual reality in a simple mobile web browser. The result is a virtual reality effect based on CSS 3D transforms and a few lines of JavaScript.

The Hardware

Recently, Google released the cardboard virtual reality kit that works using a mobile phone as the screen. I picked up a clone made by DODOcase for around $20. It is made up of several folded and cut pieces of cardboard and two plastic 40mm lenses. The lenses help you focus on the phone screen, which is approximately two inches away from the lenses themselves.

Figure 1.2 | Unfortunately, the cardboard gets greasy from foreheads.

There is a divider that prevents each eye from seeing more than one half of the screen, allowing us to use each half as an individual display. The phone is placed sideways in front of the lenses, then the flap is folded up. Velcro squares hold it in place.

My Motivation

Google Cardboard works using a mobile phone as the screen. The Cardboard app and SDK were built for Android and Chrome, but I wanted to use it with my iPhone and any mobile browser.

My goal was to use HTML, CSS, and minimal JavaScript to create a simple VR interaction — look around a web page using my head as the input device. If you have an iPhone and Google Cardboard, feel free to try out the example below. Note: Android browsers reports slightly different alpha, beta, gamma values from the accelerometer, so my examples won’t work without some adjustment…which I haven’t done.

A bit of a warning, things get a bit technical below…

Look around you

In order to get 3D CSS transformations working properly, I borrowed from Keith Clark’s CSS First Person Shooter. His approach allows you to apply the rotations only to one element and the other elements inherit the rotations via transform-style: preserve-3d.

Figure 1.3 | The basic HTML structure of the “Keith Clark” model. Rotations are applied to the “camera” element, and translations are applied to the”geometry” element.

Using deviceOrientation

The Javascript deviceorientation event is the main driver for this interaction. On the event, I call a function I named “drawThreeDee” which will apply the 3D rotational values to my HTML”camera” element:

Figure 1.4 | The event is called every time the orientation changes, which is very often.

In order to get my X, Y, and Z rotations, I have to convert the deviceorientation event values into plain 360° values:

Figure 1.5 | The way the iPhone reports deviceorientation, Y rotation is the inverse of “gamma,” X rotation is the “beta” value, and Z rotation is the “alpha” value.

When I apply that rotation to the “camera” element, I get a nice 2D view of 3D HTML elements. JavaScript is doing all of the heavy lifting, and CSS is doing the styling and positioning work.

Figure 1.6 | Moving around in 3D

Let there be depth!

The illusion of depth (stereoscopic effect) is created by placing two images slightly apart from each other. To do this, I created a second set of camera and geometry elements, each contained in a mask element with “overflow: hidden.” I keep the orientation locked on my phone, so the two eyes are positioned absolutely on top and bottom.

Figure 1.7 | I added a”geometry” element that gets cloned into the “leftGeometry” and”rightGeometry” elements.

Spacing the eyes apart

Spacing the cameras is what creates the sense of depth. Calculating the positions of the cameras is the most complex operation. At this point, I had two identical views of the HTML moving in 3D, but I needed to space the viewpoints about eye-width apart. In order to do this, I used two points evenly spaced from the origin (the center of the head) and applied the same deviceorientation rotations to them individually. After determining the relative position each eye would be in, I applied the translations to the “leftGeometry” and”rightGeometry” elements.

1.8 | Virtual reality in HTML, CSS, and JavaScript

The result is a template into which CSS and HTML can be pasted and viewed in 3D space. The default orientation is as though you were looking down at a desk to see elements; all elements start out lying flat facing up and can be transformed from there. If you have an iPhone and Google Cardboard, view the demo here. You can also check out the files on our GitHub.

The big finish

It’s surprising how much CSS3 and JavaScript give you for free. Plugging in the deviceorientation values gives you a compelling page very quickly. I’d love to see this project extended so that you might walk around and possibly interact by gazing at an object for a period time to select it. There are lots of cool possibilities that I haven’t gotten into yet, so try it out! Email me with your 3D environments or if you have any questions: [email protected]

Originally published at blogs.truthlabs.com on September 2, 2014.