Unlock WebVR: Build Immersive VR Experiences Directly in the Browser

About WebVR

VR is attracting attention, but hardware is expensive; however, front‑end developers can experience VR on phones and start building WebVR applications.

Preface

WebVR is still a W3C draft, so development and testing require a polyfill.

This analysis is based on the webvr‑boilerplate created by Boris Smus (Google) and uses webvr‑polyfill. The demo can be viewed by opening the demo link on a phone placed in a cardboard viewer.

Demo link: http://soaanyip.github.io/webvr-boilerplate-cn/ GitHub repository: https://github.com/SoAanyip/WebVR-Boilerplate-CN/

Start from HTML

The example uses a single index.html. Important meta tags include shrink-to-fit=no to disable Safari's automatic scaling.

JavaScript resources loaded:

// Promise polyfill
<script src="node_modules/es6-promise/dist/es6-promise.js"></script>
// three.js core library
<script src="node_modules/three/three.js"></script>
// VRControls for HMD state
<script src="node_modules/three/examples/js/controls/VRControls.js"></script>
// VREffect for stereoscopic rendering
<script src="node_modules/three/examples/js/effects/VREffect.js"></script>
// WebVR polyfill
<script src="node_modules/webvr-polyfill/build/webvr-polyfill.js"></script>
// UI manager for entering/exiting VR
<script src="build/webvr-manager.js"></script>

VRControls.js – HMD State Sensing

This file obtains HMD pose information and applies it to the camera, allowing device rotation to affect the view.

The process includes fetching the connected VR device via the WebVR API and reading three position parameters, which are updated each frame in requestAnimationFrame.

VREffect.js – Stereoscopic Rendering

VREffect splits the canvas into left‑eye and right‑eye views, enabling binocular depth perception.

Key steps include setting the renderer pixel ratio, handling fullscreen mode, configuring two perspective cameras for each eye, and rendering both views based on the device’s field‑of‑view data.

webvr‑polyfill.js – Enabling WebVR Today

The polyfill implements the draft WebVR API, selecting CardboardVRDisplay or MouseKeyboardVRDisplay based on the environment, and uses the Device API to obtain orientation data on phones. It also provides UI hints for a smoother experience.

Start Building a WebVR Application

The final demo displays a rotating cube. The basic three.js setup includes a scene, renderer, and camera.

Controls and effects are instantiated, a mesh is added, and the animation loop updates both the cube rotation and the camera pose from the HMD.

Conclusion

The walkthrough demonstrates how to set up a WebVR project with three.js, explains the roles of VRControls, VREffect, and the polyfill, and encourages developers to explore VR beyond games.

References

webvr.info, WebVR_API, threejs.org/docs, https://github.com/borismus/webvr-polyfill, https://github.com/borismus/webvr-boilerplate, https://w3c.github.io/webvr/, Eye FOV, and several CSDN blog articles.