VR Gets Real with WebVR

Like most new technologies, the big debut of VR has been wildly welcomed by early adopters and less so by the average consumer. Even though concepts of virtual reality have been around since the 1950s and have been extensively featured in science fiction books and movies, 2016 is the year where it’s been made available to anyone willing to pay the high price.

Oculus Rift, HTC Vive, and Playstation VR have built a lot of momentum around attracting gamers and enthusiasts but VR’s penetration into the market, as expected, has been much less rapid among most consumers. The head-mounted displays are just one part of the equation. In order to experience VR, the headsets are powered by high-end computers/consoles, elaborate tracking cameras, gadgets and controllers. In short it takes space, money and commitment to embrace VR.

Despite the nature and availability of the technology, there is a big push to market VR units this holiday season. So, will mainstream adoption happen in 2017?

The web is sneaking up on VR

VR headset makers are working on creating a more immersive experience with sophisticated controllers, increasing tracking abilities, as well as resolving usability issues like becoming entangled with the cord. While they are focusing on the “real VR” experience, the WebVR movement has been making large strides in its shadows.

An early web pioneer pioneers again

In January of 2015, WebVR was enabled on Mozilla Nightly and since then, Mozilla and Chrome have been working toward the integration of VR into the web ecosystem. Along with growing WebVR enthusiasm, a lot of progress has been made with the development of a web-based alternative to native VR coding tools (like Unity 3D, Unreal Engine). 3D Javascript libraries like Babylon.js and Three.js are founding the base for WebVR and libraries like A-Frame, tools like Vizor, and most recently React VR by Oculus. A few critical improvements are required in order to experience visual smoothness and comfort for VR users on the web. Browsers are working on optimizing performance to address latency issues and frame rate rendering for VR applications. For example, the ideal frame rate for VR is 75–120fps and browsers currently average around 60fps.

The web is going to be the most powerful distribution channel for VR due to the nature of its scalability and unlimited distribution. Like we have seen in the past in the music or movie industries (e.g., Napster, Spotify and Netflix), and more recently, the software industry by web applications (like Slack or Google Docs), the next big disruption to VR will come from the web. The currently primarily native 3D development for VR environments will have to compete and coexist with browser-based VR apps.

WebVR, like any other web API, is by nature device-agnostic and will require a cross-platform standard for experiencing and navigating virtual reality and augmented reality. The standard will define the weakest hardware setup and browser version and will accommodate an acceptable experience for those devices. Going from there, we can progressively enhance the WebVR experience through the use of stronger newer hardware (GPU or screen resolution) and connected input devices (like leap motion, or bluetooth controllers/gamepads).

Importantly, major players are lining up to support WebVR. For example, in September, Microsoft made an announcement that Edge will support WebVR, instantly validating the web as the biggest distributor of VR content.

Even though WebVR is still in its early stages of development, it’s evident that parallels are being built to translate the way we navigate the web within a virtual environment.

Mozilla’s A-Frame

A-frame was introduced last December by Mozilla. This framework is designed to give web developers and UX designers an easy entry into the world of WebVR by providing an HTML and Entity-Component ecosystem. Web designers can quickly mockup and prototype patterns and VR experiences without a steep learning curve. We, the web community, are going to face uncharted territory with many restrictions and limitations. But as we all know: Restrictions breed creativity.

Takeaways

When considering how WebVR can enhance the experience of browsing the web, imagine translating a website into an immersive experience. We have to consider:

• VR needs accessibility; we can’t assume that the user has full spatial mobility to turn/tilt the head to stare and select interface elements. What kind of input alternatives to the default gaze control are we offering: voice controls or shake gestures? Are we considering user interfaces that cater to different user needs?
• VR on the smartphone is not considered “real VR” because it is really a semi-immersive 360-degree experience that is relatively passive and flat while it surrounds the user. So navigating a virtual environment is done via keyboard keys (WASD) or teleportation by pointing a controller. What are other ways to navigate a three dimensional space? And what are the settings needed to make the user feel adequately represented in her virtual space? Is the user 5 feet or 7 feet tall, is the user standing, sitting or lying down?
• Are images turned into photospheres and are website sections leading us through virtual environments (3D models)? How can we enhance semantic HTML elements in a meaningful and enriching way? How are we navigating lists, how are we filling out form fields?

VR may seem expendable, because it caters mostly to gamers. But we, the web community, will play a vital part in taking VR beyond games and entertainment. We will create experiences that are beneficial to real-world sectors such as education or commerce and make VR a vital part of our future.

This technology is moving fast and we expect to be actively consuming web-based VR content through our smartphones plugged into Cardboard devices in 2017.

I’m Roland Dubois and am excited to be part of this community, which is why we’re hosting the first NYC WebVR hackathon. It’s our way of supporting this development, and bringing smart people together to push it forward.