WebXR across multiple scenes

[Basic]

Hello,

I have just started experimenting with Babylon.js, and want to build a WebXR experience with multiple scenes.

So far I have a Lobby Scene and a Game Scene, and I ran into the issue where you can’t use the WebXRDefaultExperience across different scenes.

I found some old posts that addresses the issue, as well as a suggestion for a potential solution:

Jumping between scenes while in WebXR

You can say I did that. I just stole yours via sub-classing, so it is going to look a little similar. 3 classes needed changes (WebXRDefaultExperience, WebXRExperienceHelper, & WebXRSessionManager). Default Experience Sub /** * WebXRDefaultExperience Notes: * - Made a seperate Create Call, so if integrated nothing need change, * unless code reduction for working in functions from here. * - probably should add an engine disposer observer for here */ export class DefExperien…

I can also see that @RaananW has mentioned that maybe a “moveXRToScene” function could be planned in somewhere up the roadmap.

Here are the issues:

From 2022:

EnvironmentHelper issue with enableGroundMirror in 5.x

I believe this is a bug, although I have been unable to figure out why it is happening. The issue is visible with this simple PG: Babylon.js Playground The entire environment seems “darker” when ground mirror is first enabled. That darker effect goes away if EnvironmentHelper is disposed and then recreated. It is not darker on 4.x. I have stepped through the code of EnvironmentHelper and I’m still unable to see why this is happening. (Fwiw, I am running in to this due to trying to have mu…

Jumping between scenes while in WebXR

I don’t mind looking at a “moveXRToScene” function to switch scenes. I can create an issue for that, but sadly my backlog is, as always, rather long

And one from 2021:

WebXR camera in mutiple scenes

Great question! I was waiting to answer that one XR’s session manager requires a scene in its constructor, which is required to generate the resources needed to start an XR scene. This is a limitation in Babylon’s engine as well (as the render target texture used to render the scene is also scene-dependent). Apart from that there are the assets for the controllers, hands (if enabled), that are all scene-dependent. We had a discussion once about multi-scene support, but I never d…

It’s not because I don’t wanna try a workaround solution like the one mentioned previously. Babylonjs and TypeScript is just still very new for me, so I figured I would be more interested in figuring out what the plans (if any) for supporting using the same WebXR experience across multiple scenes?

I don’t have full knowledge of the whole pro/cons scenario of using a single scene and using the assets container to unload assets when changing context versus having multiple scenes where the last one gets disposed when changing to a new one.

Thanks a lot in advance, I’m having a blast learning Babylon.js, and it feels like the community revolving babylon.js is great and very friendly

Have a great day!

[RaananW]

Hey!

Great research
Yes, this is not yet available. Because of the way the experience helper is built (and the functionality it offers), it is tightly coupled to a scene. From the desktop camera, to controller meshes, to assets and textures requires to un webxr correctly, it’s not too trivial moving from one scene to the other. This is a limitation of Babylon’s architecture in general. The same way you can’t (easily) move a mesh from one scene to the other.

I will be very happy to explore solutions for your scenario! If that would help…

[Basic]

Thanks for the response @RaananW.

Since you mention this is a limitation of Babylon’s architecture, I will look into a custom solution.

It seems like the solution is to build a scene-management system that can figure out which assets is not going to be reused, unload them (disposing?) and removing them individually from the assetContainer. Afterwards it should load the new required assets, and finally present the modified scene.

So a simple flow could be like this:

(Show loading transition)

(Load and initialize 'lobby' world)

(Hide loading transition)

[Player presses play]

(Show loading transition)

(Unload assets that will not be reused from 'lobby', Load and initialize 'world-forest' world)

(Hide loading transition)

[Player enters portal]

(Show loading transition)

(Unload assets that will not be reused from 'world-forest', Load and initialize 'world-house' world)

(Hide loading transition)

It might be worth mentioning that I plan to build an entity-component-system that will load a world from a json, so ‘lobby’, ‘world-forest’ and ‘world-house’ will all be individual json files.

Does such approach seem reasonable? I guess with a proper assets unloading management system, I should not worry about the memory usage, as long as the individual worlds is limited.

I also guess that with such approach, that the performance would not be impacted by it.

[RaananW]

You might want to look into the asset container(s) - Asset Containers | Babylon.js Documentation (babylonjs.com). It can help you with loading/unloading assets.

[Basic]

Oh how nice, and there is even a specific demo for my problem.
"This can be used to add/remove all objects in a scene without the need to exit WebVR. "

Babylon.js Playground

Note to self: I should dedicate more time to read the documentation, since it’s so extensive, well written and filled with great examples

Vielen dank for pointing me in that direction @RaananW

[RaananW]

I’m very happy it solves your issues

Can’t wait to see what you work on!