Hello all!
I have a Babylon scene in my React.js project in which I import several models asynchronously from external URLs with ImportMeshAsync. Once some model is loaded (which is not too heavy, it becomes really noticeable when it is > 15mb), there is a temprorary decrease of FPS after which it is back to normal, even if I hide the new model straightaway or not. Is there a way to get rid of those lags? What are possible solutions?
There is a slight computation needed that is synchronous when a model is loaded. when the model is small you don’t notice that, but if the model is relative large your UI thread will hand for a bit of time until the data is processed.
1 Like
Thank you for your explanation. In order to mitigate the impact of this computation on the UI thread, are there any specific techniques or approaches you could recommend? Or for example, if I need to display the model a while after it is loaded, eg. after click event, may it change the situation? Could using web worker improve it?
until we can move the mesh load to a worker (not quite there yet) there is no way to avoid this time that is blocking the UI thread. One way of fixing it it to separate your large mesh to smaller meshes, and loading them in parallel. The async nature of javascript will make them load in different frames, so it will at feel more fluent.
Even if you move it to a click there will be some time that is blocked. Putting a loading screen might make the application a bit more user friendly (but will not really solve the problem).
2 Likes
Thank you for your help!
1 Like