Can I use the dom-overlay feature in AR

DOM overlay feature is compatible in BABYLON WEBXR AR mode?

Adding @RaananW

Not yet officially included in babylon.js. You could of course implement it yourself, as we expose all of the native XR objects, but if you want to wait until we have the feature you can track its progress here - [XR] Experiment with and implement the DOM Overlay feature · Issue #8996 · BabylonJS/Babylon.js (github.com)

Should I add DOM overlays as optional features something like this?

navigator.xr.requestSession("immersive-ar", {
        optionalFeatures: ["dom-overlay"],
        domOverlay: { root: document.getElementById("overlay") }
    })

How can i get the right native XR object? And add this optionalFeatures?
I use createDefaultXRExperienceAsync() function.

Or should I wait for the 5.0 release, how soon will it be? :grinning:

can’t promise anything :slight_smile:

I didn’t look into it. You will need to add the feature name, that’s for sure, but if extra elements are required to be added to the session init options you might need to start the session yourself (using the XR Helper insterad of the default experience, or directly the XRSessionManager).

I might find time next week to look into and and maybe offer a preliminary feature implementation.

1 Like

It will be great!)

1 Like

Hi there.

Are there any news regarding the dom-overlay feature?

Is there any workaround so I could use it now, while its not yet added to babylon?

Would be awesome.

The workaround is to develop the feature yourself :slight_smile:

I haven’t found the time to do that yet, I hope to do get to that very soon.

Hi, did you manage to learn this feature?

Hi, I decided to figure it out myself, it turns out that everything is not so difficult.)
I used:

const xrHelper = await BABYLON.WebXRExperienceHelper.CreateAsync(scene);

const xrOptions = { requiredFeatures: [ 'hit-test', 'anchors' ],
        optionalFeatures: ["dom-overlay"],
        domOverlay: {
          root: document.getElementById("xrOverlay")
        }
}
xrHelper.enterXRAsync("immersive-ar", "local-floor",undefined,xrOptions);

This work correct, but now an overlay is front of screen and i can’t to interact with scene, only with overlay elements. Is there any solution?

2 Likes

The overlay should pass pointer events to the back canvas (would be my assumption). Try setting pointer-events: none; and touch-action: none; and see if it helps. Of course this will prevent the users from interacting with the overlays, but will explain why this happens. You might need to set the pointer/touch events only to interactable elements.