I have a working project that loads GLB files into the scene. A 90 MB scene takes just under a second to load in the local development environment. I added an animated GIF loading image to display while loading. It exists as pure HTML/CSS in a div element that gets set to visible to show and hidden to hide. If I show the animated GIF, the GLB file takes about 19 seconds to load. I am trying to understand why it has this much of an impact. Is the browser spending so much time animating the GIF that it can’t process the JS code efficiently?
I also noticed a similar slow down when using onAfterRenderObservable. If this event was processing data while the loading was taking place, it took a really long time to load the GLB. So, I added a flag to only do processing after the GLB was loaded and this solved this problem.
On a similar note, I have noticed that enabling BABYLON.SceneLoader.ShowLoadingScreen also impacts loading times.
I can try to setup a repro in Playground, but what is the best way to integrate HTML / CSS? I can programmatically create elements and try to set style properties directly, I guess. Or I can try to set it up in a different environment such as jsFiddle, etc.
The built-in loading screen does not impact things as much as the GIF does. It only adds a hundred or so ms to the load times. But maybe that is perception because it barely even flashes now that I have re-enabled it. Before it used to take longer in general but I have optimized since then.
Let me try to set this up now. I just added back in the loading GIF and it is definitely at least doubling my load times. The problem is that I am working with large GLTF files that are not publicly hosted. My GIF is not public either. So, I need to get them hosted and them create the playground to reference them.
I can’t recreate my issue in the playground. Here is my attempt:
Displaying or hiding the loading div doesn’t seem to impact load times in the playground. Of course, I have a larger file and a lot more complex stuff getting loaded along with the GLB file. In my environment, it can increase the loading times from about double to over 10x.
In all of my testing, I have determined that it is definitely the GIF file that makes the difference. Because I can comment out the background-image property in my CSS and the problem goes away. I just can’t figure out why this causes such a dramatic difference in my initialization times. It is creating some kind of conflict that the browser doesn’t like. It may not have anything to do with Babylon, but I use this loading mechanism in lots of places without any issues.
If you use your gif as background-image and it has different size with the background which it should fill - browser will recalculate every gif frame to fit into another dimension.
This can be the possible reason of delaying. Anyway, GIFs may often lead to slow page load times and high data usage.
The same may relate to heavy CSS calculations, like blur etc.
I never did solve the actual problem here. I ended up just simplifying the loading screen to text rather than an animated GIF. I will plan to come back and address it at a later point possibly using a custom loading screen in Babylon rather than an external approach.
