WebXR DOM Overlay

[Maksims]

Implements WebXR DOM Overlays Module Specs. It allows using regular DOM elements in AR session.

This API is already available today in release Chrome on Android, and no flags/origin trials are required for it.

New APIs:

// pc.XrManager
app.xr.domOverlay // interface to access dom overlay

// pc.XrDomOverlay
domOverlay.supported // true if dom overlay is supported
domOverlay.available // true if dom overlay is currently available, this is only possible if supported, during active AR session and if root were provided before the session start
domOverlay.state // string of DOM overlay state, which indicates how the root element is rendered by the browser, possible options are: screen, floating, head-tracked
domOverlay.root // DOM element to be used as the root for overlay

Example:

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

To prevent Input Sources firing select events behind DOM elements, a new event is available:

someElement.addEventListener('beforexrselect', function (evt) {
    evt.preventDefault();
});

Test project: https://playcanvas.com/project/747233/overview/webxr-ar-dom-overlay
Test Demo: https://playcanv.as/p/S01LYTIU/

I confirm I have signed the Contributor License Agreement.