The VR web is here
Creative Bloq | Liv Erickson
Over the past several years, the technologies underlying the modern internet have begun to mature. The web has gone through a second renaissance, resulting in the unprecedented growth of more intelligent experiences that can be ported across a growing number of devices.
The browser, more than ever, enables an increasing number of innovative scenarios to come to life. An emerging community of developers have begun to use web technologies to create connected scenarios for a growing field in computing: the recently reborn virtual reality industry.
Web technologies unite a number of different platforms, and the WebVR API extends this to virtual reality devices
Graphics and networking technologies have seen dramatic increases in performance on desktop and mobile devices, and VR has been waiting. Over the past three years, web technologists around the world have been preparing for commercial VR headsets. The development of new libraries, additional features in web browsers, and entirely new definitions for what a website can be have all contributed to the birth of a vibrant and powerful platform for immersive displays.
In an increasingly connected world, there are a number of advantages that browser-based VR provides over the traditional desktop or mobile application development model. A single, central codebase reduces the overhead of managing builds and deploying to multiple platforms, and the open nature of web applications removes the need for app store approval and certification at release time. Developers can easily integrate existing tools, libraries and frameworks into their new VR sites, taking advantage of the ecosystem that has evolved over the past decade around the modern web, while users benefit from ease of access and discovery.
The New VR
Sketchfab is one of many companies working to bring interactive 3D content to virtual reality devices through the browser
In the earliest days of the WebVR API, support was limited to beta builds of Firefox Nightly and Chromium, and browsers required additional plugins to run content built for immersive headsets. Developers faced significant performance challenges to hit VR-ready framerates that would match the 75-120fps benchmark offered by native apps, and a lack of visual development tools made environment creation difficult for new programmers.
Tools and technologies
Today, many of those hurdles have been addressed, and major technology companies are throwing their weight behind immersive technology. Google, Microsoft and Mozilla have all publicly announced their intent to bring support for VR experiences to their desktop browsers in the coming months. Facebook has added native 360 photo and video playback to its site, and mobile browsers are able to seamlessly act as platforms for immersive websites. Oculus announced a Chromium-based, VR-first browser (code-named Carmel), at its recent developer conference, and the industry continues to drive forward at the intersection of the web and immersion.
New frameworks, languages and web-based editors have come onto the scene to aid in the creation of 3D content as technologists turn more frequently to virtual and augmented technologies to create innovative new experiences. The web as we know it is changing.
In the past, browsers were only able to serve 2D sites constrained to a fixed layout. As the mobile revolution enabled more consistent access to information, the web grew to adopt this, and progressive, responsive applications have led to increasingly powerful websites. Now, with the WebVR API, a website is no longer constrained to a device: it can be an entire world. Let’s step inside.
The WebVR API
While ‘WebVR’ often refers to VR sites in general, it is also the name of a proposed standard
The WebVR API, which hit version 1.0 in March 2016, is a browser specification that has been submitted to the W3C for consideration as a standard to define how VR devices will interact with web applications. It provides an implementation for browsers to communicate with attached VR hardware – or in the case of smartphones, read data about the state of the underlying device and pass it into 3D applications so it can then be used to render WebGL scenes in real time, stereoscopically, to the user.
The currently supported, read-only components that a VRDisplay returns when querying for capabilities from the WebVR 1.0 specification
At the core of the WebVR API is the VRDisplay interface, which abstracts out the differences between desktop head-mounted displays, mobile devices and additional peripheral devices, and represents them as a single entity to the developer. These headsets can then be queried for their presentation and connection status, which allows the browser to detect the state for an application to use to determine how to render the scene.
The VRDisplay object also returns information about the state of the headset at any given time (such as when the user looks around) via a VRPose transform. This data can then be applied to a virtual camera within a 3D scene.
With mobile VR experiences, the VRDisplay parameters are generated from the properties of the phone and the rotational tracking is done via the internal gyroscopic sensors. Dedicated desktop headsets such as the Oculus Rift or HTC Vive will return information about the user’s current viewing state, as well as data around the user’s position gathered by the external sensors that track where they are moving in the physical 3D space. Optional peripheral devices, such as game controllers or room-tracking base stations, can be mapped out and surfaced to a web app through the VRDisplayCapabilities dictionary.
Gathering display info
Because of the variety of parameters in display technologies, the WebVR API provides an interface through which to gather information about a given display device when a page connects, in order to allow the scene parameters to reflect that device’s technical specifications. Developers working with the WebVR API directly should ensure they are properly querying for the different supported functionality between devices, and plan their application interactions accordingly.
When implementing functionality supported by the WebVR API, some traditional elements of a web graphics app are replaced by VR-specific function calls: window.requestAnimationFrame is replaced by a VR equivalent that updates at the frequency of the VR device (often 90Hz or higher), and user agents may use predictive technologies to estimate frame data information.
The actual display information of a given headset is calculated through the VRLayer attributes, which specifies the right and left bounds of the display and handles the image distortion based on the parameters of the device.
The HTC Vive includes base station cameras for tracking a player within the room
As support for VR web content grows across desktop and mobile devices, native applications on different platforms have embraced the API in unique ways as well. AltspaceVR, an application for desktop and GearVR, developed an in-app web browser with a custom WebGL renderer to make the 3D objects from WebVR sites appear within the VR world as holographic mixed-reality content. Developers can use A-Frame or three.js to enable web experiences to be viewed in 3D.
This is the minimum required code for creating an A-Frame site that renders 3D content in-world within the Altspace in-VR browser:
For example, setting a 360-degree photo sphere background for an immersive website in Samsung’s mobile browser would look like this:
3D Graphics Libraries
The Samsung Internet browser for GearVR displays web content in 2D ‘tabs’ that surround the user
Creating scenes with a library will vary syntactically between frameworks, but will generally include a representation of each of the following components:
- A scene that wraps and defines all the objects in your 3D environment
- A camera that projects a specific view of the scene to the user
- 3D objects that make up the virtual representation of the 3D world
- Various lighting and physics effects
- Audio elements
VR artist and developer Erica Layton creates intricate virtual worlds within the browser using A-Frame, including this scene in which an anthropomorphised island watches the user as they move around
Developers can utilise 3D frameworks to generate objects, materials, textures, lighting and application components for their experiences. They handle the translation of these concepts so they can be rendered directly to WebGL canvases and displayed in browsers. When a user visits a page with a WebVR-enabled 3D experience, it will appear with a single camera until the browser is told to move into VR mode.
Many of these frameworks rely heavily on the WebVR Boilerplate framework developed by Boris Smus, which surfaces the capabilities of the WebVR API to 3D frameworks via VRManager, VREffect and VRControls functionality. The VRManager handles the browser’s transition between non-VR and VR modes; the VREffect calculates the specific distortion based on the VR device properties; and the VRControls provide the transformational data to the virtual camera within the scene once the browser is in VR mode.
Following on from the success of React and React Native, Facebook announced the launch of ReactVR in October 2016. Although most of the details around ReactVR are still to be announced, we know it will give developers a new way to add to the declarative framework with a VR UI layer.
Individuals looking to work with ReactVR can expect the framework to build off many of the existing principles of the React libraries, with an additional OVRGUI layer to handle the UI elements within a scene, likely optimised for the Rift headset. Additional components may include a framework for audio and video, both spatial and 2D, within the given VR application.
When rendering content in a VR display, the scene will require a distortion effect to counteract the curved lenses and left-right eye offset
Unity game engine
A scene from a development project in Unity after being exported to HTML5. The blue button with the headset handles switching the game into VR mode
The Unity Game Engine is one of the largest developer tools for creating virtual and augmented reality content. It has been quick to support mobile and desktop devices for immersive technologies by offering developers the ability to export 3D applications to a number of different platforms.
With its HTML5 export functionality, games built with the Unity editor can be exported as web apps, and developers can utilise a plugin from Jump Gaming to support WebVR. The flexibility provided by the engine around physics, graphics, asset management, multiple scripting languages and large scenes make it a popular choice.
The final site generated by Unity with WebVR support contains an HTML5 site with a WebGL canvas hosting the game’s content, and converts the underlying .NET code to C++ via IL2CPP before using asm.js to generate a browser-friendly version of the application.
There is still much to be seen in how the web ecosystem will to grow around immersive content. Interaction patterns will vary across different devices, and experiences will need to adapt to the variety of input opportunities that may be surfaced through the VR browsers in different devices. Link traversal and navigation-related security considerations also require a reimagining of how global information is conveyed across the web.
As we redefine what the browser is capable of, the ability to shape new worlds on the web will prove influential in both the web and virtual reality development communities, which are increasingly starting to overlap. Now, more than ever, is the web’s time to shine, and through virtual reality it will continue to enable us to connect, learn, communicate, and experience the world in unprecedented ways.
- Top opportunities for web designers in 2017
- 6 web design trends worth knowing for 2017
- 10 startups web designers should watch in 2017