How to Build VR on the Web Today

Category: google cardboard, JavaScript, oculus rift, patrickc, Three.js, Tools and Libraries, virtual reality, VR, WebGL, webVR

Virtual reality is set to be worth up to $7 billion by 2020. The web is definitely not going to remain an exclusively 2D environment during this time. In fact, there are already a few simple ways to bring VR into the browser. It is also incredibly fun to work with!

[author_more]

To begin your development adventure into the Virtual Web, there are three potential ways to do this:

JavaScript, Three.js and Watching Device Orientation
JavaScript, Three.js and WebVR (My new preferred method!)
CSS and WebVR (still very early days)

I’ll go over each one and show a short summary of how each works.

JavaScript, Three.js and Watching Device Orientation

One of the ways that most browser based virtual reality projects work at the moment is via the deviceorientation browser event. This tells the browser how the device is oriented and allows the browser to pick up if it has been rotated or tilted. This functionality within a VR perspective allows you to detect when someone looks around and adjust the camera to follow their gaze.

To achieve a wonderful 3D scene within the browser, we use three.js, a JavaScript framework that makes it easy to create 3D shapes and scenes. It takes most of the complexity out of putting together a 3D experience and allows you to focus on what you are trying to put together within your scene.

I’ve written two demos here at SitePoint that use the Device Orientation method:

If you are new to three.js and how to put together a scene, I’d recommend taking a look at the above two articles for a more in depth introduction into this method. I will cover key concepts here, however it’ll be at a higher level.

The key components of each of these involve the following JavaScript files (you can get these files from the example demos above and also will find them in the three.js examples download):

three.min.js – Our three.js framework
DeviceOrientationControls.js – This is the three.js plugin that provides the Device Orientation we discussed above. It moves our camera to meet the movements of our device.
OrbitControls.js – This is a backup controller that lets the user move the camera using the mouse instead if we don’t have a device that has access to the Device Orientation event.
StereoEffect.js – A three.js effect that splits the screen into a stereoscopic image angled slightly differently for each eye just like in VR. This creates the actual VR split screen without us needing to do anything complicated.

Device Orientation

The code to enable Device Orientation controls looks like so:

[code language=”js”]
function setOrientationControls(e) {
if (!e.alpha) {
return;
}

controls = new THREE.DeviceOrientationControls(camera, true);
controls.connect();
controls.update();

element.addEventListener(‘click’, fullscreen, false);

window.removeEventListener(‘deviceorientation’, setOrientationControls, true);
}
window.addEventListener(‘deviceorientation’, setOrientationControls, true);

The DeviceOrientation event listener provides an alpha, beta and gamma value when it has a compatible device. If we don’t have any alpha value, it doesn’t change our controls to use Device Orientation so that we can use Orbit Controls instead.

If it does have this alpha value, then we create a Device Orientation control and provide it our camera variable to control. We also set it to set our scene to fullscreen if the user taps the screen (we don’t want to be staring at the browser’s address bar when in VR).

Orbit Controls

If that alpha value isn’t present and we don’t have access the device’s Device Orientation event, this technique instead provides a control to move the camera via dragging it around with the mouse. This looks like so:

[code language=”js”]
controls = new THREE.OrbitControls(camera, element);
controls.target.set(
camera.position.x,
camera.position.y,
camera.position.z
);
controls.noPan = true;
controls.noZoom = true;
[/code]

The main things that might be confusing from the code above is the noPan and noZoom. Basically, we don’t want to move physically around the scene via the mouse and we don’t want to be able to zoom in or out – we only want to look around.

Stereo Effect

In order to use the stereo effect, we define it like so:

[code language=”js”]
effect = new THREE.StereoEffect(renderer);
[/code]

Then on resize of the window, we update its size:

[code language=”js”]
effect.setSize(width, height);
[/code]

Within each requestAnimationFrame we set the scene to render through our effect:

[code language=”js”]
effect.render(scene, camera);
[/code]

Continue reading %How to Build VR on the Web Today%

blog