Shader pre compilation Demo

Hi, I am currently setting up babylon to run a complex scene where multiple .gltfs models are loaded first and a lighting system consisting in multiple types of lights are loaded soon after. For this reason I am not attaching a sandbox as the models or lights are not relevant. I am waiting on everything to be ready with scene.executeWhenReady. This is done as users shouldn’t see materials flickering as the lights get loaded.

The issue is: because it’s a large scene, the materials take a really long time to be ready as they get compiled with WebGL2 - Parallel shader compilation. And so the scene does will not ‘executeWhenReady’ until the shaders are compiled for each light. I am using 99% standard PBR material.

Is there a way I can have the shaders precompiled to lower the load times? Is there something like a demo or documentation I can consult?

TLDR:
Large scene with multiple materials & lights = large shader compile load time. Can shader precompilation be used?

Unfortunately there is no such a thing as shader precompilation on the web :frowning: One thing you may want to ensure is that you are not compiling not wanted shaders (like compiling them before all the info are in)

I am wondering if compiling shaders in parallel could help for this cc @RaananW

1 Like

You can try starting with simple shaders for your objects, with only a diffuse color. The scene should start up more quickly. Then you can assign the right materials to your objects. As there is a parallel compilation of shaders in WebGL, the simple shaders will remain in effect until the more complex shaders are compiled.