Get VR In Your Browser Today
WebVR
Originally conceived by Mozilla back in 2014, the WebVR spec has since been through several iterations and is currently at v1.1. Now every major browser vendor has some support or planned inclusion of the technology, with Google, Microsoft and Apple also having shown interest or commitment to WebVR.
These WebVR APIs allows JavaScript code to access VR hardware that is connected to your computer or smartphone. Graphics are either displayed on your smartphone screen in a special format or sent directly to the headset’s display if on a Desktop PC. An immersive world awaits the user, going far beyond the level of traditional 2D browser experiences. WebVR doesn’t require the user to download an app, meaning users just need to enter the website URL in their browser to get straight into the game or experience.
There’s some quality content available at the moment that’s compatible with WebVR, as well as some innovative multi-user experiences:
- Musical Forest: This experience is a social music creation tool where users can play instruments together in a shared 3D environment. It’s created by Google using A-Frame.
- Decentraland: A blockchain powered social VR platform powered by IPFS, Ethereum and A-Frame. Their editor is currently in alpha and allows multiple users to edit and preview content for the platform in a shared environment with WebRTC voice chat.
- Norman: Create animations in VR using motion controllers, powered
by A-Frame.
- Konterball: A networked 2-player ping pong game.
- Mr. Nom Nom: A small WebVR game about a donut and his hungry friend.
Having access to motion controllers such as HTC Vive, Oculus Touch, GearVR and Daydream controllers makes WebVR even more immersive, allowing users to interact with virtual worlds in a “hands-on” way through representations of their hands in VR or a laser pointer that they can use to activate objects in scenes.
So how can I get it?
Currently WebVR is supported by the following desktop browsers and hardware, so if you have these you’re set:
- Mozilla Firefox 55: HTC Vive, Oculus Rift with Touch
- Microsoft Edge: Windows Mixed Reality Headsets (Acer, Lenovo, Dell,
HP, Samsung)
On Mobile, Android leads the way with WebVR support:
- Chrome: Google Daydream with controller
- Samsung Internet / Oculus Browser: Samsung GearVR with controller
Unfortunately, WebVR doesn’t currently work on iOS devices at this time, but we hope that’ll be changing in the future.
So how can you get into creating VR content for the web right now? If you already have skills in HTML and JavaScript, there a couple of great frameworks out there that’ll let you get stuck in:
A-Frame
Brought to you by Mozilla, this is an HTML-like JavaScript framework for easily creating WebVR scenes. It runs on top of three.js and has a vibrant developer community. In short, you can turn this:
Into this [Live demo]:
Babylon.js
Built by Microsoft employees in their spare time, this JavaScript framework can easily be used to create WebGL & WebVR scenes. It natively runs on top of WebGL for maximum performance.
With slightly more code, this:
Becomes this [Live demo]:
The realtime rendering of the examples above looks pretty close to the original model running in Sketchfab, showcasing the capabilities of both A-Frame and Babylon.js. While Babylon.js looks slightly better in terms of visual quality and speed, A-Frame has a slight advantage with simplified code and automatic support for VR enabled out of the box.
What’s in store
There’s a lot available today for 3D graphics on the web, and support for VR in the browser will only get better as more affordable headsets and devices come to the market. We’re looking forward to the future of web-powered VR!
