ImportMeshAsync blocks other operations

I am trying to download and load an asset from our server on runtime, and it is done based on user requests so I can’t simply batch all the assets at once with AssetsManager. I am trying to load each asset one by one, and I have a separate Loading Screen (rendered with React, so it’s separate from the babylon canvas itself) that should display the progress in percentage as the asset loads.

However, I found out that the ImportMesh and ImportMeshAsync operations are both blocking, meaning any of my other functions (setTimeout, setInterval, or React setState) would not be executed while ImportMesh/ImportMeshAsync are being executed, and thus I have no way to simulate a smooth loading screen.

I have tried using the progress event callback, but that only gives progressive reports from around 0 to 50 to 100 (2 or 3 reports for the entire 5 seconds of loading). Is there a better way to smoothly display a loading percentage?

(Sorry for not providing a PG for this, but I don’t really know how to get React onto PG. I suppose an example could be as simple as trying to execute a setInterval operation while the asset is loading, but whatever callback passed to setInterval will not be called until LoadMesh/LoadMeshAsync finished downloading and importing the asset)

I was also looking at Web Worker, which seems to be able to run resource-intensive code on a separate thread, thought I’m not sure if it will be usable for passing around an entire Babylon.js Mesh object

Hi Madaoism,

I don’t think ImportMeshAsync is supposed to be blocking. It should return a Promise, which will allow you to continue running other things until the promise is resolved. Check out this Playground, which I modified slightly from a preexisting one. Open up a the browser’s console (F12), un-comment line 25, then press Play. You should see the “Doing something!” message begin immediately, even though the SceneLoader is still working on the assets asynchronously. If an approach like that works for you, will it enable you to do the loading screen you described?

That’s quite interesting, I have no clue why it is working on PG but not on my application.

This is what is logged on my app when I tried to use ImportMeshAsync to load an asset in a async/await function:

I’ll try dig into it a bit more, but maybe React just doesn’t get to update while the mesh is being loaded…? Seems like the update is being called (but not as often as before, from about 50ms interval gap to 200+ ms gaps).

Also, the final ‘file reading’ stage of the operation seems to be really blocking, and not the ‘downloading’ part of it.

Paging Dr. @bghgary, who knows all things about asset loading. :smiley:

If you can capture a profile of it, that will help. There are parts of glTF loading that are synchronous, like parsing JSON and decoding images.

Something like this? I’m trying to load 3 different OBJ files during the period shown below.

Actually this is my first time using the profiler, but now it got me wondering if it was because I was trying to merge all the meshes into one single mesh after loading the file…

Yes, that’s the profiler. You should be able to analyze what is taking long frames and, like you say, the MergeMeshes one is rather large taking 8 seconds.

I think @Deltakosh has been working on this recently. Maybe this will be ready soon?

1 Like

I will keep waiting for it then :smiley:
Probably not worth getting the codebase too complicated to improve the loading screen a little bit. It can stuck at 80% for a few seconds, I’m sure no one will mind :eyes:

Thanks for the advices!

1 Like