webxr demo
Others Web Development

What is WebXR and Why WebVR is Dead

As we have mentioned, WebXR is one of the upcoming web design trend in 2020. Web developers have been trying to integrate Virtual Reality experience into websites for years. However, the first API standard “WebVR” was just introduced in 2016. While WebVR is still in its early state, it will be deprecated soon and superseded by “WebXR”. This because WebVR was designed to support VR headsets only while leaving another important segment “Augmented Reality” behind.

What is WebXR

The XR stands for “Extended Reality” which intended to include AR, VR and all other immersive technologies such as mobile devices with positional tracking or fixed display with head tracking abilities.

webxr demo 2

WebXR is a new API standard for web developers to create VR or AR applications without having to deal directly with each hardware. Users can use only web browser to start viewing VR/AR content without having to install extra plugins or software. Developers can write the code once and it will work with all devices from different brands (Oculus, Vive, Windows Mixed VR, etc.)

WebXR was introduced in 2018 and now being included in Chrome version 79 (WebVR is also removed) Based on MDN, the keys capabilities of WebXR are as follow (but not limited to)

  • Recognize compatible VR/AR devices
  • Render 3D scene to the devices at an appropriate frame rate (usually 90 fps for headsets)
  • Mirror output to 2D display (eg. monitors)
  • Create vectors representing the movement of input controls (ex. move the scene based on head movement)

Most (if not all) of applications will be using WebGL as 3D rendering engine (Ahem.. Three.js) and Web Audio API for sounds. The output will be rendered into HTML canvas.

How WebXR Works

Here is the process flow of WebXR application

  • Determine if the connected device can support the XR content using navigator.xr.isSessionSupported
  • Wait for the user’s response to start the XR content.
  • Request an XRSession with navigator.xr.requestSession.
  • Use the session to respond to input and render the frame
  • Continue running until the session is shut down by the application or user

webxr permission

WebXR will now explicitly asking for user’s permission before starting the application. This because of the nature of the content which usually require access to sensitive data such as camera, location, motion and etc.

Demos

Here are some examples (open with VR Headset or phone with cardboard box)

webxr viewer

And that’s all for now. Developers can start using API on other non-Chrome browsers using polyfill. We’ll keep you updated (and probably a tutorial) when WebXR is finally integrated into all major browsers.

Written By

Leave a Reply

Your email address will not be published. Required fields are marked *