WebXR Workflow

Typically, when developing a WebXR experience, you won’t be interfacing with the API directly. Various renderers and frameworks already have support for WebXR, and you can follow their specific steps to get started with that particular framework.

If you want to learn more about how to work directly with the WebXR API itself, there are also bare-bones samples available here.

General information about testing and debugging web content on Browser can be found on this page.

However, you may also want to test your content without having to enter your headset each time. There are two options for this: use the WebXR emulator, or cast your device to desktop using the Meta Quest Developer Hub.

The Immersive Web Emulator allows you to debug your WebXR Experiences on your desktop (using Chrome, Edge and other Chromium-based browsers), without a headset. It can be installed as a browser plugin for Chrome or Edge.

WebXR uses WebGL to render content under the hood, and so it’s possible to use various tools for debugging WebGL content to also debug WebXR content (rendered on desktop via the WebXR emulator):

Spector.js allows you to examine your WebXR scene’s draw calls, and is a useful debugging tool for diagnosing graphical errors. Note that Spector.js only works on desktop browsers, not Browser, and thus should be used with the WebXR emulator.

Performance may be the single most important factor in making a WebXR experience look complete and polished. There are tools and guidelines for identifying and fixing performance bottlenecks described in the Performance Optimization section.

A WebXR experience is just a normal web page, so it can be served online like any other site.

Browser also features WebXR experiences on the New Tab Page. If you have created a WebXR experience that you’d want to get featured, see the submissions guidelines page.

Members of the Browser team are present on the WebXR Discord community and actively monitor the #browser channel.