HomeNewsThe VR web is here

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.

Powerful platform

qAUAYkrDyMQuvb6tvKk23J.jpg

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

jNdnj9ZzUzRDjAvJUSgcvH.jpg

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

fdfuGBLS2WrPRvXHU46ZuH.jpg

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.

VRDisplay

t7U2FBXXdgRqwzHw2g5NwH.jpg

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.

Mobile VR

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.

Next page: native applications, 3D graphics libraries and beyond JavaScript… 

Native applications

YvGe7JUXWjizrSjisDCX3J.jpg

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:

Samsung’s GearVR browser allows additional metadata to be injected into existing web apps to specify and set environmental values, enabling a hybrid experience that blends traditional and immersive sites. Developers looking to add VR elements to an existing website can use Samsung’s experimental JavaScript or JSON APIs in their sites to customise settings like skyboxes, or enable access to the WebVR API for fully interactive sites.

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

YDdfQeajQ2bcCrgctBEjuH.jpg

The Samsung Internet browser for GearVR displays web content in 2D ‘tabs’ that surround the user

Any 3D experience rendered in a browser will make heavy use of WebGL, a subset of OpenGL framework that serves as the core for graphics rendering on computational devices. Writing graphics applications in pure WebGL is generally a tedious and extensive task, but a number of JavaScript libraries have been developed to sit on top of the WebGL layer and facilitate the development of rich 3D environments within a WebGL canvas.

Gone are the days of specific graphics plugins: WebGL has emerged as the standard for these types of experiences and is supported by all major browsers. Many of the popular 3D JavaScript frameworks, including three.js and BabylonJS, have added direct support for WebVR to further streamline the process of integrating VR functionality into interactive experiences.

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

UgQ8T2TQ5XE5AnmQrQpKwH.jpg

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.

WebVR boilerplate

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.

ReactVR

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.

Beyond JavaScript

gpxe4suvTJuy8JxGbfEAvH.jpg

When rendering content in a VR display, the scene will require a distortion effect to counteract the curved lenses and left-right eye offset

A number of different tools have begun to evolve around the WebVR framework, giving developers more flexibility when choosing an approach for creating VR experiences for the browser. These may be in the form of a markup-styled wrapper around JavaScript, such as Mozilla’s A-Frame, or as a compete visual editor such as the one developed by Vizor.

Unity game engine

dH9dSzYJX4BVEhPcyfFuyH.jpg

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.

Conclusion

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.

This article was originally published in net magazine issue 288. Buy it here.

Related articles:

CreativeBloq?d=yIl2AUoC8zA CreativeBloq?d=qj6IDK7rITs CreativeBloq?i=6-U3RC6BXiM:ma7OxFn7yAY:g

Featured articles on Prototypr: