Temporarily poor performance after loading GLTF model

So we’re loading a bunch of large gltf models into a scene. While the models are loading we display some progress bars, and just generally hide the scene from the user. Then the models are added to the scene which is when the initial rendering takes place. When that is done, we show the users a button, clicking on which hides the UI and brings up the scene.

The issue that we’re experiencing is that even though rendering is supposedly done, there’s still a 5-10 second period where performance is sometimes (more often than not) very poor. Looking around (FP controls) at this point results in frames dropping, and it just generally feels very sluggish. Yet when that 5-10 seconds mark passes, performance suddenly improves and it runs pretty smooth.

I don’t think there’s anything in our codebase that runs only at the beginning that would cause something like this. Is there something going on with the models/textures at this point, that we should wait first to be finished?

You may want to run a profile in Chrome devtools to see what is happening during those lag spikes. My guess would be that it’s related to texture upload. The first time a texture is rendered, it is decompressed and uploaded to the GPU. A decompressed 4K texture is 90MB, so this can be slow.

Ways around the problem are to pre-upload textures (renderer.initTexture(texture)), or to use GPU compressed textures (KTX2, Basis Universal) which remain compressed in GPU memory and upload much more quickly.

Shader compilation is also a possibility.

All textures in the models are KTX2 encoded. I’ll try to do a profiling and post the results, thx.