WebGL2RenderingContext.getProgramParameter freezes app

Questions
,
1

Hi there,

last week i recognized that if i test my app on firefox there is a huge freeze in the start of the app. In chrome it is less noticeable but also there. I tested in both browsers and found the issue. The function calls WebGL2RenderingContext.getProgramParameter needs a lot of time to run. I read about it basically initializing the shaders in the gpu and therefore blocking the main thread until it finishes right? Here comes my question, is there a way to divide the shader initialization into smaller chunks to remove the freeze? The idea is to let the app load a bit longer and initialize not everything at once but one after another. Has anyone experience with this kind of problem?

Here is a screenshot of the firefox profiler:

image
image1867×989 154 KB

2

To add some observations i already made:

  • i do not think textures are the problem because if i swap materials with only meshbasic materials without textures i have the same result.
  • I thought about draco compressing being the issue, because all my objects are compressed through blender
  • i also looked into some other threejs configurators online and each of them had this small freeze on the initial load..
3

Shaders get compiled as they are encountered during the renderer.render …

so if you’re loading up your entire scene at once, then calling render, the renderer has to compile All materials before it can finish.

One approach is to add objects to the scene incrementally… so instead of object.add( x )

thingsToAdd.push({object,x});

and in your animationLoop:

for(let i=0;thingsToAdd.length&&i<5;i++){ //Only add 5 things per frame...
work = things.shift();
work.object.add(work.x);
}
4

@manthrax yes that would exactly be the approach i want to try. Do you have experience with it? My fear is, that the app will then not freeze once for 1.5s but stutter for ~3s but is also not clickable at that time.

What i forgot to mention. The main reason this behavior is not wanted is the fact that on the side of my configurator there is a UI to control it. The user cannot interact with the UI while .getProgramParameter() runs. It is no option to show the UI later and hide the freeze behind a loading state!

5

Maybe precompiling the shaders with renderer.compileAsync() before first render may help. But I remember it is not async on firefox

6

You can throw up a loading spinner .gif
gifs usually animate on a different thread than the main js thread, so even if the js thread is stalled, the gif can still animate and indicate the app is “doing something”.

7

good idea but the problem is that the user should be able to interact with the UI on the side, that freezes aswell. The freezing of the UI is the main problem because the user should be able to interact while the configurator loads.

8

yes as you state thats not a fix for firefox unfortunatly.. thank you anyways for pointing this out i didnt know that function exitsted.