Dom Overlay using Babylon optional feature

Questions
1

Hi all,
I am trying to create a floating dom overlay in an active immersive xr session with a semi transparent background, below is what I currently have (based on a demo i found, running in the playground for now). Right now the box model isn’t visible with the AR device in immersive mode (using the Chrome API emulator extension)

I’ve seen online this enables a floating dom with typescript but i’m unsure how to incorporate that.
enum XRDOMOverlayType {
“screen”,
“floating”,
“head-locked”
};
// create semi transparent overlay of type floating
:xr-overlay {
/* force a transparent background
background: rgba(0,0,0,0) !important;

What I have using the dom overlay optional feature:

https://playground.babylonjs.com/#RFTC4B#70

I tried using babylon gui and holographic slate but still cannot get it to work as an overlay with an immersive session:
https://playground.babylonjs.com/#TAFSN0#850

I also tried using the built in feature but know its unstable and get many errors as the overlay outputs as null
https://playground.babylonjs.com/#AYHGEL

Thanks!

2

A repro in the playground would be pretty helpfull as a start so that @RaananW can have a look next week

1 Like
3

Thank you! https://playground.babylonjs.com/#RFTC4B#70

1 Like
4

Hi,

I’m trying to follow what exactly you are trying to achieve. The last demo has no mention that I can see to the overlay. It does have two buttons that are added to the scene when in AR.
What exactly is the final result you are expecting?
Oh, and AFAIK, the WebXR emulator doesn’t support the WebXR overlay feature, nor do the desktop browsers. I might not be updated and will check that later to be sure, but if you want to be 100% sure, use an android device

1 Like
5

Thank you, I am trying to achieve an overlay within the immersive XR session so the scene is like a background with a floating object overlay on top. The last playground link I was trying to use as I saw online that a holographic slate may work instead of using the dom overlay built in or optional features

6

yeah, using babylon’s GUI is one way to achieve that. there is no way currently to use fullscreen UI in XR, but there is already an issue for that, and it does seem to be working correctly in AR mode (because there is only one view).
So just for me to understand - what is the issue with the last playground?

7

With the last example Babylon.js Playground I believe the overlay isn’t visible

8

A few things -

This example mixes native XR (which we don’t support 100%) , the babylon XR experience helper, and general babylon classes. If you start your session on your own, most of babylon’s features won’t work.

You are creating a default xr experience helper, then creating an xr session, requesting session from the navigator, and generate a new xrHelper.
Would be great if you could clean up this example, otherwise it is very hard to understand what’s going on.

Second - the dom overlay requires a reference to an existing HTML element. your selector (which you copied from the documentation), doesn’t correspond to any element in the page. Make sure the selector actually selects the element you created.

2 Likes