Augmented City - VR

vraframewebvraugmented city

Hello! This guide is written for the Augmented City AR/VR lab in Singapore on July 15th 2017, but might be helpful for anyone looking to jump into A-Frame. The first post is introduced A-Frame as a tool for creating 3D content for the web. This post introduces VR on the web. The next and final post in the Augmented City prep series will be about AR on the web.

A post shared by rockintosh (@rockintosh) on

VR

With every passing day, virtual reality is becoming less weird and more a fact of life for developers and designers everywhere.

VR hardware isn't ubiquitous yet, and is actually still both cumbersome and expensive. Momentum is gathering regardless, both in experimentation and business investment.

The web is the largest deployment surface with the least friction for content of any kind. Given the still early stage that VR is at, being able to make it and publish it on the web provides the innovation vector that is required for VR to succeed.

WebVR

WebVR is a standard for exposing VR hardware capabilities to the software context of web applications, and then rendering the page to that hardware. The specification describes an API in JavaScript for enumerating HMDs and controllers, among other things.

Mozilla, Google and others have been working together over the last couple of years to develop the standard, and are now starting to ship the initial versions. The specification was tagged at version 1.1 but is not yet finalized, so implementations may yet change.

Browser Support for WebVR

Mobile and the WebVR Polyfill

Smartphones can be used for WebVR experiences inside "cardboard" or other devices designed to contain a smartphone for HMD-like experiences.

These most often use the WebVR Polyfill, a JavaScript library created by Google which mimics the WebVR API functionality, rendering the scene for each eye in software. Libraries like Three.js and A-Frame use the polyfill when no hardware is detected.

If you open an A-Frame scene on your mobile phone and touch the HMD icon, the polyfill will kick in and you'll see the scene rendered for each eye separately, and you can then insert the phone inside a VR viewing device.

The polyfill uses the orientation web API, so even responds to your movement, allowing you to look all around within the scene.

HMD Support

Currently both retail versions of the HTC Vive and the Oculus Rift work with Firefox and Chrome's implementations of WebVR. Instructions for all of these combinations are at Mozvr.com.

Microsoft Edge only supports their Mixed Reality hardware at this time.

David Rousset wrote a great overview of writing a WebVR application that works in all hardware platforms, with this excellent visualization of browsers and hardware platforms. One thing to add is Firefox Android also supports WebVR from version 55.