# Shader pre compilation Demo

**URL:** <https://forum.babylonjs.com/t/shader-pre-compilation-demo/53865>\
**Category:** Questions\
**Created:** [October 1, 2024, 12:46pm UTC](https://forum.babylonjs.com/t/shader-pre-compilation-demo/53865 "2024-10-01T12:46:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Florin\_Dumitru](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/florin_dumitru/32/22899_2.png) [@Florin\_Dumitru](https://forum.babylonjs.com/u/Florin_Dumitru)\
**Post date:** [October 1, 2024, 12:46pm UTC](https://forum.babylonjs.com/t/shader-pre-compilation-demo/53865/1 "2024-10-01T12:46:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [October 1, 2024, 3:53pm UTC](https://forum.babylonjs.com/t/shader-pre-compilation-demo/53865/2 "2024-10-01T15:53:47Z")

</div>

Unfortunately there is no such a thing as shader precompilation on the web ☹ 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)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 1, 2024, 8:16pm UTC](https://forum.babylonjs.com/t/shader-pre-compilation-demo/53865/3 "2024-10-01T20:16:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 2, 2024, 8:05am UTC](https://forum.babylonjs.com/t/shader-pre-compilation-demo/53865/4 "2024-10-02T08:05:57Z")

</div>

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.