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 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)
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 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.
Here are some examples (open with VR Headset or phone with cardboard box)
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.