Dom Overlay using Babylon optional feature

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!

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

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

1 Like