Achieve Better Rendering and Performance with WebXR Layers in Oculus Browser

We’re excited to announce that Oculus Browser is now shipping with support for WebXR timewarp layers by default. Layers can make immersive experiences faster and better looking with the added bonus of increased battery life. Layers was an experimental feature for the past year, but starting with version 16.1 it is now open to all users.

One of the web’s superpowers is video streaming. While Oculus Browser already provided high quality streaming support via fullscreen HTML video elements, using video in WebXR was complicated and resulted in lower quality. This release includes support for Media Layers, a special type of WebXR layer that allows you to easily set up high-quality, high-performance immersive video playback with just a few lines of code.

Beyond video, WebXR Layers can also be used in a variety of other situations to provide increased performance, improve rendering quality of imagery and text, and simplify rendering common immersive projection formats like cylinder, equirect, and cubemap. For example, 2D UI will look sharper and easier to read if rendered to a layer, and high-resolution backgrounds and skyboxes can look better and be more performant.

Authors that want to display immersive video usually rely on third party frameworks because achieving good performance with high quality can be challenging. With WebXR Media Layers, it becomes much easier to display a video.

To set up an immersive session with a media layer, this is all the code you need to add to your WebXR app:

The browser will take care of sizing the layer and will draw it in the most optimal way possible. Displaying video inside a WebXR app using Media Layers will give you the best quality video with low system overhead. This will work for any supported video format, including video that is cross origin or streaming.

Here is a simple example that demonstrates how easy it is to replay high quality video. This sample runs on Quest 2 at up to 8K resolution at 90fps without dropped frames.

In a standard WebXR app, you must render at the device refresh rate. With layers, you only need to render content when it changes. For instance, if you have a skybox that is static, you only render it once to a cubemap layer and then the system will take care of the rest for you. This leaves more headroom to render the dynamic parts of your experience. As described in our WebXR Layers documentation, in the Cube Layer sample, we saw a rendering time savings of 2.4ms and a reduction in total GPU load of over 25% when using WebXR Layers vs. a traditional rendering approach.

You can also choose to render content at a lower framerate than the native device and the content will still be projected at the right location to the user. This is possible because the system compositor applies asynchronous timewarp to the last rendered frame at every display refresh, resulting in a frame always being rendered and avoiding judder. Furthermore, because ATW is applied at the end of the graphics pipeline using the latest headset orientation, layers reduce motion to photon latency.

Because WebXR Layers allow you to render directly to the final buffer, you can avoid distortions and degraded image quality.

In the regular WebXR workflow, your content is first rendered to a WebGL layer. This layer is then reprojected by the system compositor. This introduces “double aliasing” and manifests itself as additional softness in the final image. By rendering your content directly to a layer that is understood by the system compositor, the layer’s resolution and shape are decoupled from the WebGL layer (also known as the eye buffer) which improves visual quality.

The A-FRAME framework has support for WebXR Layers. Check out these samples to see it in action (A-FRAME Comic Book, OTOY Render The Metaverse). In the Comic Book sample, pressing the thumbstick will toggle between layers and the traditional non-layers approach, making it really easy to see the visual quality improvement WebXR Layers can provide.

Three.js has preliminary WebXR Layers support landing in this month’s release, and Babylon.js is planning to add WebXR Layers support later this year.

Since not all browsers support WebXR Layers, we developed the WebXR Layers polyfill to allow you to emulate Layers on other devices. This polyfill is hosted on the Immersive Web github. Please refer to the documentation on the github page on how to integrate this into your experience. The media layer example also shows you how you can use this library in your experience.

Layers offer developers many options for improving performance and visual quality when building VR experiences on the web. Moreover, Media Layers make it incredibly easy to build high-quality video experiences. We’re excited to see what you do with these new features! And when you do build something awesome, we’d love to feature it on the Oculus Browser New Tab Page.

If you want to learn more about WebXR Layers, you can find additional documentation here. We have also created several samples that demonstrate the various types of layers and examples of how you might use them. You can find those samples here.

If you have questions or feedback, let us know in the comments below or in the Developer Forums.