WebXR across multiple scenes


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:

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:

And one from 2021:

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 :slight_smile:

Have a great day!


Great research :slight_smile:
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…

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.

1 Like

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.

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. "

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

Vielen dank for pointing me in that direction @RaananW :metal:

1 Like

I’m very happy it solves your issues :slight_smile:

Can’t wait to see what you work on!