Stuttering when loading glbs from URL


I am loading around 40 glb files from an external source at runtime.
Each of these files includes meshes as well as some textures (albedo, metallic and some have others also).

The loaded models are cloned to multiple instances with GPU instancing.

Whenever an asset is rendered for the first time, there is a visible stutter in rendering.

As far as my research goes, there could be two reasons.

a) pushing the texture data from CPU to GPU blocks rendering
b) there are shaders being compiled for each loaded glb

How can I identify wich one of those causes the stuttering?

I am trying to minimize the stuttering, and here are my different approaches.

  1. If the problem is shader compilation, can i use GraphicsDevice.asyncShaderCompilation?
    Found here, but GraphicsDevice.asyncShaderCompilation returns undefined when testing, so i assume it is not implemented?

  2. After loading all glbs, I dumped shaders with; and then include the resulting js into the project. That made no difference

  3. I assume the resulting materials created after loading a glb are Standardmaterials. If so, would it make sense to skip shader compilation entirely and use a new StandardMaterial and assign the textures coming with the glb?

  4. Kind of a shot in the dark, but is there a way to load the model first with a default material and then, in an async way populate with textures once the new material ready?

I found kind of a similar thread here, that’s where i found dumpPrograms()

You should use Chrome profiler to capture the time when you load your glb files and inspect it … you would see shader compilation and also many other things that are slowing you down.

It’s likely a shader compilation takes place. Note that a shader is compiled only for a unique settings of a standard material. So if you have 100 of materials, and they all use the same settings (for example only diffuse texture), only a single shader should be compiled. If some use for example normal map, this should create a single additional shader). So an idea with creating an empty standard material and assigning textures as they load might not be the best … as that would temporarily till all textures are loaded create multiple shader variants that would need to be compiled.

Start with the profiling and report back here, perhaps we can offer further advice.

1 Like

Thanks for your reply.

This is a section where mutiple glb assets are loaded.

Zoomed in:

Playcanvas profiler:

When I override the materials before rendering the models: