Can I use the dom-overlay feature in AR

Questions
1

DOM overlay feature is compatible in BABYLON WEBXR AR mode?

2

Adding @RaananW

3

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)

4

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:

5

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
6

It will be great!)

1 Like
7

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.

8

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.

9

Hi, did you manage to learn this feature?

10

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
12

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.

14

DOM Overlay was implemented and is now available in AR - WebXR Augmented Reality Features | Babylon.js Documentation (babylonjs.com)

with great thanks to @brianzinn

1 Like
15

Just to add as well, the only option is actually the opposite - which is to supress XR events on container element (DOM blocks interaction to scene). I just noticed a bug there as the listener should be cleared on detach, so I will add a patch for that (I wrote the feature before understanding feature lifecycle).

Perhaps for debugging you could add something like this:

document.getElementById("xrOverlay").addEventListener('beforexrselect', (evt) => console.log('evt', evt));

That may provide insight into the events being received on your DOM element. If you want to do more than preventDefault() then maybe we could augment the options with a filter (like mesh selection predicates). If you use a phone in AR with chrome://inspect then you can see the console logs from your AR device. I have an more info here with adb, but you can use USB debugging from your device ( Basic GearVR controller support and WiFi debugging - Announcements - HTML5 Game Devs Forum)

1 Like