Suggestions needed for implementing a loading screen in VR while fetching and rendering assets

I’m developing a VR application with multiple rooms. The assets and textures are fetched from WordPress and rendered in VR, with only one room being displayed at a time. Users can navigate to other rooms by clicking on a door. Currently, I’m managing this by using a single scene—removing the existing meshes and nodes before rendering the new ones that are fetched.

However, the transition between rooms is quite laggy, and I’m unable to show a loading screen (for example, engine.displayLoadingUI() doesn’t seem to work).

This causes the entire VR experience to become sluggish while the new room is loading.

I’m relatively new to this area and am struggling to find an effective solution. Do you have any suggestions on how to implement the loading process smoothly?

cc @RaananW

2 questions that will help me understand the use case:

  1. Is every room in a new URL? i.e. - would I be able to go to mysite.com/room1 and then click on something and move to mysite.com/room2?
  2. What do you mean with laggy? Is it the standard “I am loading an asset” lag, or something in VR prevents it from working?

I’ll explain why I ask - XR has an awesome feature that lets you get straight into an XR session in a different page, if you are already in a session. So theoretically, you could use the browser’s “loading” mechanism to load a new page, wait for it to be ready and enter the XR session. So every room is a different scene witha. different URL, and loading is done by the browser itself.

If the lag comes from loading the assets, there is sadly little that can be done. This has been discussed many times, but in general - the assets’ buffers need to be processed and converted to a babylon mesh. This takes computation time and is sadly blocking the main UI. the best way to avoid this is to make the assets smaller (thus making it not block for so long that the user notices) or load all assets beforehand - which might cause a huge memory usage that I assume you are trying to avoid. New room per URL kind’a solves this, but requires a different architecture.

XR doesn’t have a loading screen, because it doesn’t show the DOM (where the engine adds the loading screen). Meaning, when in session, anything that blocks the main thread will block the rendering loop. Keep that in mind.