Xr view babylon scene and text/object overlay

Questions
1

Hi,
I am trying to add a babylon scene to an xr session based on the beginning of this blog https://www.devbridge.com/articles/ar-app-development-tutorial/

I currently have an enter xr button and the babylon scene renders before entering the session (using node https & api emulator extension). If anyone has any tips for rendering the scene once the xr session is active, I would greatly appreciate it. I would also like to render an overlay/holographic slate of a 3d object only once the immersive xr session is activated (posted about this earlier, sorry for the repeat!).

I tried creating a javascript function and adding in the babylon scene and calling it with session.addEventListener(‘scene’, babylonjs); in the onsessionstartedfunction however, cannot get the scene to display. Below is an image of the output with the babylon 3d images at the bottom of my html file in no function call.
Thank you all for your help!

I don’t have any errors with the babylon scene in a function but get the following message in the console
"Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive. See Passive event listeners - Chrome Platform Status
TransformControls @ …
_init @ …
ARScene @ …
requestSession @ …
requestSession @ …
CustomWebXRPolyfill.XRSystem.requestSession @ …
onButtonClicked @ (index):64
(index):62 [Violation] ‘click’ handler took 198ms
[Violation] ‘requestAnimationFrame’ handler took 64ms

is it possible that I am trying to request 2 immersive sessions simultaneously and there is a more effective approach?

my start function:
function onSessionStarted(session) {

xrSession = session;

xrButton.innerHTML = ‘Exit AR’;

session.addEventListener(‘bb’, babylonjs);

session.addEventListener(‘end’, onSessionEnded);

image
image1046×382 10.7 KB

2

Hi tlevin,

I may very well have misunderstood the issues you’re facing, but it sounds like you might be trying to do your own WebXR integration directly. If that’s true, I’d recommend taking a look at Babylon’s built-in XR support and perhaps starting from some of the existing Playground demos rather than the blog post you linked, which doesn’t appear to contain any information about how to do things with Babylon. If these resources aren’t helpful or if I’ve misunderstood the issues you’re facing, can you provide a link to a Playground exhibiting the problem so that we can inspect it more directly?

Hope this helps, and best of luck!

1 Like
3

thank you, here’s a link to a playground example https://playground.babylonjs.com/#RFTC4B#70 . I have tried multiple ways, the way I posted earlier I tried with just basic JavaScript. My goal is to create a basic immersive XR session with a dom overlay. In the playground example above a dom overlay is an optional feature ,however, I am unsure how to make it visible.

4

I believe this is the second issue you opened about this. Is there any difference between the two?

I am also making sure you have read the documentation of DOM overlay here - WebXR Augmented Reality Features | Babylon.js Documentation (babylonjs.com) ?

5

Here I was trying to add Babylon to a basic JS XR session but the last comment is the same as the other issue I opened (sorry about that!), I’ll review the documentation again, thank you!

1 Like