# Xr-dom-overlay (new feature)

**URL:** <https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854>\
**Category:** Demos and projects\
**Tags:** webxr\
**Created:** [May 17, 2021, 5:03am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854 "2021-05-17T05:03:41Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [May 17, 2021, 5:03am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/1 "2021-05-17T05:03:41Z")

</div>

I’ve added `xr-dom-overlay` support as a Babylon XR feature. Looking for input on my draft PR:  
[Feature dom-overlay by brianzinn · Pull Request #10378 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/10378)  
^^ looks like linting failed 🤦‍♂️ , so feedback besides that! 😄

You will need a browser that supports `xr-dom-overlay` within an `immersive-ar` experience (ie: Android device with new Chrome). Live demo here:  
[xr-dom-overlay demo (brianzinn.github.io)](https://brianzinn.github.io/xr-dom-overlay-react/)

You’ll notice that I brought in a 50% transparent Material UI Switch component, so there is a lot of potential.  
 ![dom-overlay](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/3/9337408fbed3c9130f9ddaba32a498ffa8c175de.gif)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 17, 2021, 7:18am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/2 "2021-05-17T07:18:12Z")

</div>

So great!! Thanks 🙂

I will review this today, as soon as I can.

---

<div class="post-metadata">

**Author:** ![buddy90210](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/buddy90210/32/12955_2.png) [@buddy90210](https://forum.babylonjs.com/u/buddy90210)\
**Post date:** [May 21, 2021, 4:07am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/3 "2021-05-21T04:07:39Z")

</div>

[https://playground.babylonjs.com/#RFTC4B#47](https://playground.babylonjs.com/#RFTC4B#47)  
I added custom XR options to createDefaultXRExperienceAsync() and it’s work with dom-overlay.

---

<div class="post-metadata">

**Author:** ![buddy90210](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/buddy90210/32/12955_2.png) [@buddy90210](https://forum.babylonjs.com/u/buddy90210)\
**Post date:** [May 21, 2021, 4:19am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/4 "2021-05-21T04:19:58Z")

</div>

But when the session is over, the application crashes.

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [May 21, 2021, 4:34am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/5 "2021-05-21T04:34:56Z")

</div>

That’s a great example PG. The equivalent from 5.0.0-alpha.23 (not yet released) will be:

```auto
const xrDomOverlay = fm.enableFeature(BABYLON.WebXRDomOverlay.Name, 1, { element: '#pg-header' }, undefined, false);

```

The last parameter is significant as it marks the ‘dom-overlay’ as an optional feature. Once that version is out then I will update the docs and add a playground.

@buddy90210 - Do you experience those crashes using the demo link in the original post? It looks like passing in the XRSessionInit may have unintended consequences or is misconfigured.

---

<div class="post-metadata">

**Author:** ![buddy90210](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/buddy90210/32/12955_2.png) [@buddy90210](https://forum.babylonjs.com/u/buddy90210)\
**Post date:** [May 21, 2021, 5:04am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/6 "2021-05-21T05:04:32Z")

</div>

> [@brianzinn](#):
>
> Do you experience those crashes using the demo link in the original post?

No it’s work ok, but when i use anchors app crashes.  
This PG without anchors, works fine:

> **[Babylon.js Playground](https://playground.babylonjs.com/#RFTC4B%2351)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

This PG with anchors, it crashes when exiting:

> **[Babylon.js Playground](https://playground.babylonjs.com/#RFTC4B%2352)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![br-matt](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/br-matt/32/22436_2.png) [@br-matt](https://forum.babylonjs.com/u/br-matt)\
**Post date:** [May 23, 2021, 4:25am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/7 "2021-05-23T04:25:19Z")

</div>

Will there be any difference using this than passing

```auto
                    optionalFeatures: ["dom-overlay"],
                    domOverlay: {
                        root: document.getElementById('#somerootelement')
                    }

```

to the options of WebXRExperienceHelper ?

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [May 23, 2021, 4:52am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/8 "2021-05-23T04:52:31Z")

</div>

hi @br-matt - Good Question. Simple answer is that there is no difference, but there will hopefully be more functionality added and the feature itself will be future proof (the feature itself is a draft proposal state in the unlikely event of changes).

In terms of updates one thing that I wanted to add was the ability to hide the DOM overlay. I tried to set the display type to “none” and got a blank screen (Pixel 4 + Chrome). I will do some more testing before posting an issue about that, but that would become a method on the feature. So, besides the option for event deduplication with `supressXRSelectEvents` option property ( [dom-overlays/explainer.md at master · immersive-web/dom-overlays (github.com)](https://github.com/immersive-web/dom-overlays/blob/master/explainer.md#input-event-deduplication)) there are no advantages currently.

One thing made easier with the feature is that you can get the overlay type (screen,floating,head-locked) from the feature itself without needing to know where to look on the session object:

```javascript
const domOverlayFeature = featureManager.enableFeature(WebXRDomOverlay.Name, 1, {
    element: '.dom-overlay-container'
}, undefined, false);
xr.baseExperience.onStateChangedObservable.add((eventData: WebXRState) => {
    console.log('overlay type:', domOverlayFeature.domOverlayType);
})

```

Once dom-overlay is available on more devices/browsers then any polyfills (if needed) or enhancements will make their way into the feature. Once the next alpha release goes out I will update the docs to include many of those details. Thanks for asking.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 26, 2021, 10:18am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/9 "2021-05-26T10:18:10Z")

</div>

> [@brianzinn](#):
>
> Once dom-overlay is available on more devices/browsers then any polyfills (if needed) or enhancements will make their way into the feature.

Exactly that! 🙂

Technically you can implement any of those features yourself. Babylon gives you the full freedom to do that. You don’t even have to use the features manager - everything is exposed publicly, you can interact with the XR session directly. Babylon is simply trying to simplify and unify the process. And also provide a public API that will work in the future, even if the webxr draft changes for some odd reason 🙂

---

<div class="post-metadata">

**Author:** ![geometry](https://avatars.discourse-cdn.com/v4/letter/g/22d042/32.png) [@geometry](https://forum.babylonjs.com/u/geometry)\
**Post date:** [May 10, 2023, 10:35am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/10 "2023-05-10T10:35:07Z")

</div>

Hi, this example works fine for me, but when I try (in a React app) the DOM overlay is visible before switching to AR mode, not visible on the first switch to AR, but is visible on subsequent switches.  
Any clues? Is there a link to your repo for the example posted here?  
Also, supressXRSelectEvents doesn’t seem to work for me…  
The DOM overlay is perhaps the most powerful feature in WebXR, thanks for adding to BabylonJS!  
Cheers

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [May 10, 2023, 12:03pm UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/11 "2023-05-10T12:03:37Z")

</div>

Feels like an issue with react-rendering or context update, but it iss very hard to tell. The dom overlay is rather straightforward - it will render the HTML element you passed to it.  
If you can provide some more information we might be able to help, but it does seem like it is more related to your react context.  
Would also be great if you opened a new thread for that

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [May 10, 2023, 1:31pm UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/12 "2023-05-10T13:31:38Z")

</div>

I suspect you are not rendering in React when you think you are. That example was written in React and could use a code refresh, but the source is there:

> <https://github.com/brianzinn/xr-dom-overlay-react/blob/main/src/App.tsx#L40>

---

<div class="post-metadata">

**Author:** ![geometry](https://avatars.discourse-cdn.com/v4/letter/g/22d042/32.png) [@geometry](https://forum.babylonjs.com/u/geometry)\
**Post date:** [May 13, 2023, 6:09pm UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/13 "2023-05-13T18:09:51Z")

</div>

Many thanks both for responding: the sample code was useful…it helped me realize I was doing something really dumb with brackets! I’d managed to only enable the DomOverlay inside my onHitTestResultObservable callback! Doh!

---

<div class="post-metadata">

**Author:** ![rdurnin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rdurnin/32/11381_2.png) [@rdurnin](https://forum.babylonjs.com/u/rdurnin)\
**Post date:** [June 19, 2023, 6:59am UTC](https://forum.babylonjs.com/t/xr-dom-overlay-new-feature/20854/14 "2023-06-19T06:59:07Z")

</div>

Thanks for sharing this, and I was able to use the code example directly in my React project. It required me to wrap my canvas element in a parent div, and to move my fullscreen code to the parent object. Using modal objects (material ui) also required some changes to the CSS (z-index), but overall an easy transition.

Thanks again (from a fellow Vancouverite),  
r