Webxr and DOM overlays for VR

For our mobile and desktop scenes we show/hide DOM elements using CSS when interactivity is needed. This works real well. We want to do the same for HMDs.

However, I’m not sure if this is possible in WebXR. Looks like WebXR has DOMOverlay Module - WebXR DOM Overlays Module but according to the Babylon docs ( WebXR Augmented Reality Features | Babylon.js Documentation ) looks like this feature is AR only?

I also see some work done for webxr dialogs like such - WebXR-friendly pop-up dialog box . Does that mean there is no VR support for DOM overlays?

cc @RaananW
You could also use The Babylon GUI | Babylon.js Documentation since it works on both web and XR :slight_smile:

when the webxr dom overlay feature was implemented, it was only supported in AR scenarios. There is now a comment in the specs, saying “Implementation choices include a fullscreen overlay on a handheld AR device, or a floating rectangle in space for a VR or AR headset.”. I am not sure, to be honest, which VR device supports DOM overlay. but we can enable it for VR sessions, of course.. We don’t imit WebXR DOM Overlay based on session mode. So - you can use it in VR, if the device supports it.

But I do like @carolhmj’s suggestion to use the GUI. no fullscreen support, but you can attach GUI to a mesh or use the 3D GUI elements