# Xr view babylon scene and text/object overlay **URL:** \ **Category:** Questions\ **Tags:** gui\ **Created:** [July 23, 2021, 1:23am UTC](https://forum.babylonjs.com/t/xr-view-babylon-scene-and-text-object-overlay/22558 "2021-07-23T01:23:39Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![tlevin](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@tlevin](https://forum.babylonjs.com/u/tlevin)\ **Post date:** [July 23, 2021, 1:23am UTC](https://forum.babylonjs.com/t/xr-view-babylon-scene-and-text-object-overlay/22558/1 "2021-07-23T01:23:39Z")
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/](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](https://www.chromestatus.com/feature/5745543795965952) 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/0/7083b1f38bc1c52969fa93e679b20b9042d959e7.png) ---
**Author:** ![syntheticmagus](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/syntheticmagus/32/395_2.png) [@syntheticmagus](https://forum.babylonjs.com/u/syntheticmagus)\ **Post date:** [July 23, 2021, 4:56pm UTC](https://forum.babylonjs.com/t/xr-view-babylon-scene-and-text-object-overlay/22558/2 "2021-07-23T16:56:15Z")
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](https://doc.babylonjs.com/divingDeeper/webXR) and perhaps starting from some of the [existing Playground demos](https://doc.babylonjs.com/divingDeeper/webXR/webXRDemos) 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! ---
**Author:** ![tlevin](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@tlevin](https://forum.babylonjs.com/u/tlevin)\ **Post date:** [July 26, 2021, 2:18pm UTC](https://forum.babylonjs.com/t/xr-view-babylon-scene-and-text-object-overlay/22558/3 "2021-07-26T14:18:54Z")
thank you, here’s a link to a playground example [https://playground.babylonjs.com/#RFTC4B#70](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. ---
**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:** [July 26, 2021, 4:31pm UTC](https://forum.babylonjs.com/t/xr-view-babylon-scene-and-text-object-overlay/22558/4 "2021-07-26T16:31:37Z")
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)](https://doc.babylonjs.com/divingDeeper/webXR/webXRARFeatures#dom-overlay) ? ---
**Author:** ![tlevin](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@tlevin](https://forum.babylonjs.com/u/tlevin)\ **Post date:** [July 26, 2021, 4:50pm UTC](https://forum.babylonjs.com/t/xr-view-babylon-scene-and-text-object-overlay/22558/5 "2021-07-26T16:50:04Z")
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!