The concept of virtual reality in itself isn't new, but now we have the technology to have it working as it should be. The good news for the Web is that while companies are working on improving the headsets we already have the JavaScript API for that - WebVR.
The history of VR
Virtual reality concept hasn't started with the recent Kickstarter campaign of Oculus Rift in 2012 - it's much, much older as people were experimenting with that for decades.
In 1939 the View-Master device was created - people were able to see 3D pictures. Those were cardboard disks containing stereoscopic 3D pairs of small color photographs. After the years of development the military got interested in using such technology, and so the project Headsight was born in 1961 - it was a helmet incorporating a video screen with a head-tracking system.
There were various experiments conducted over the next years, but it wasn't resricted to science labs and battlefields anymore. At some point the pop culture took over with movie directors showing their visions of virtual reality. Movies like Tron (1982) and Matrix (1999) were created where people could transfer themselves into a whole new cyber world or were trapped in one without even knowing about it and accepting what they see as the real world.
First gaming attempts were big and expensive - in 1991 Virtuality Group have created a VR-ready arcade machines with goggles and ported popular titles like Pac-Man to virtual reality. Sega introduced their VR glasses at the Consumer Electronics Show in 1993. Companies were experimenting, but the market and the consumers weren't convinced - we had to wait up until 2012 to see the real example of a successful VR project.
VR devices
With the popularity of Oculus Rift, and a lot of other devices in production coming really soon to the market, the future looks bright - we already have the sufficient technology to make the VR experience "good enough" this time. There are many devices to chose from: desktop ones like Oculus Rift or HTC Vive, through consoles with Playstation VR, to mobile experiences like Gear VR or Google Cardboard.
The price range of those is huge - Oculus Rift costs 600 USD and you have to have a powerful PC worth a few hundred dollars to run it, but on the other side of the spectrum there's Google Cardboard worth a few dollars (or free if you're lucky enough and attend a tech event) which you can use with your own smartphone. The technology itself is here, and those expensive headsets will only go cheaper over time, so more people can experience virtual reality on their own in the future.
Browser support
As a technology still in the works the browser support is experimental. Right now only nightly builds of Firefox and experimental builds of Chrome supports it as Mozilla and Google teamed up to work on the implementation together, but it's sooner than later when we'll see it in the regular builds without the need of using add-ons or changing flags in browser's config.
Documentation status
The WebVR documentation is in the Editor's Draft status which means it still might change. The development is led by Vladimir Vukicevic from the Mozilla side and Brandon Jones from the Google side. For more info be sure to visit the MozVR.com and WebVR.info websites - there's not much there yet, but the list of resources will grow in the near future.
Input
Handling the input for virtual reality is an interesting topic - it's a totally new experience for which dedicated user interfaces have to be designed. There are various approaches right now from classic keyboard and mouse, to the new ones like Leap Motion, using the Gamepad API or handling the Device Orientation on mobile. It's a matter of trial and error to see what works in given situations and what input controls fits best to your type of game.
WebVR API
The WebVR API is based on two concepts - sending stereoscopic images to both lenses in your headset and receiving positional data of your head from the sensor, and those two are covered by HMDVRDevice (head-mounted display virtual reality device) and PositionSensorVRDevice.
Get the devices
To get that information from the browser into your JavaScript game you can use the getVRDevices method:
navigator.getVRDevices().then(function(devices) {
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof HMDVRDevice) {
gHMD = devices[i];
break;
}
}
if (gHMD) {
for (var i = 0; i < devices.length; ++i) {
if (devices[i] instanceof PositionSensorVRDevice
&& devices[i].hardwareUnitId === gHMD.hardwareUnitId) {
gPositionSensor = devices[i];
break;
}
}
}
});
It will loop through the available devices and assign proper sensors to the headsets. With HMDVRDevice you can get the eye parameters or set the field of view, and PositionSensorVRDevice allows you to get the state data or reset the sensor.
Tools and techniques
The first experiments and demos were using WebGL and Three.js as it's probably the most popular 3D engine for the web. You can see the VREffect and VRControls functions to help you implement and handle WebVR with Three.js.
There's a concept of Responsive WebVR where one web game can be played on various devices like laptops, PCs with Oculus Rift or smartphones inside Google Cardboard and still deliver unique experience across them. It's like responsive design, but applied to the VR world - write once and run in any VR headset... or without it. You can check the WebVR Boilerplate sources - it's a good example on everything you need to have to start with WebVR, a starting point for web-based VR experience.
The good news are both Unity and Unreal can export your game to WebGL with Asm.js, so you're free to use their tools and techniques to build games that will be exported to the web.
There's also an HTML markup called A-Frame which offers building blocks for WebVR, so you can rapidly build and experiment with VR websites and games: read the Building up a basic demo with A-Frame tutorial for details.
Lessons learned
WebVR is brand new, but you can find articles about some lessons learned by the developers from their experiments already. There are things to consider when building a game for VR compared to the game development known until now.
Motion sickness may be a problem, so try to keep high framerate of your game. Remember that you have two lenses inside the headset and you're trying to refresh the content 90 (!) frames per second to offer the immersive experience - it's noting compared to one screen and 30 frames per second which is still a standard. Try not to move the camera around, or at least make it static and allow player to move it. Try to keep the horizon level - the worst side effects were achieved by running a rollercoaster demo on unexpected testers.
There's this 360 view which is brand new - try to give people a reason to look around and see what's behind them. Make them feel everything is around them and they have to reach out for something that is not visible at the beginning. Describe what's behind their backs.
Immersion is more important than gameplay or graphics - you have to feel you're "inside" the experience. It's not easy to achieve, but it doesn't require realistic images. Quite the contrary as having a basic shapes flying around in high framerate can make a lot. Remember: experimenting is key - see what works for your game in particular.
The future of WebVR
It's happening - consumer devices are reaching the market right now, and we already have a JavaScript API for them. All we need for the bright future is stable specification, good UX and UI, better hardware and more tools and libraries - all of that is a matter of upcoming months. It's the perfect time to dive in and experiment with the bleeding edge technology of the future.
Go and build VR experiments for the Web!