DOM Overlay

When using mono screen displays for AR sessions, you can use regular HTML and CSS for the UI. This API provides the ability to overlay DOM elements over the AR application screen.

Before starting the AR session, you need to provide an element as a root to the DOM Overlay:

app.xr.domOverlay.root = element;
app.xr.start(camera, pc.XRTYPE_AR, pc.XRSPACE_LOCALFLOOR);

Support

You can check if the DOM Overlay is supported:

if (app.xr.domOverlay.supported) {
    // DOM Overlay is supported
}

app.xr.on('start', () => {
    if (app.xr.domOverlay.available) {
        // DOM Overlay is available
    }
});

Events

You can interact with elements just like with regular HTML. However, the input source's select event will still fire in an application. To prevent input source events from passing through DOM elements, you can intercept them:

const buttons = app.xr.domOverlay.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('beforexrselect', (evt) => {
        evt.preventDefault();
    });
}