Impact of Animated GIF on GLB Loading

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.

Thoughts?

Would you be able to setup a repro in the Playground?

Showing a gif or the loading screen should not have any noticeable impact on the loading time.

1 Like

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.

The best way would be a repro in the Playground because then we can debug it locally. You can indeed create html/css elements programmatically.