# Frame Drops on loaded GLB **URL:** \ **Category:** Questions\ **Created:** [July 31, 2023, 12:50pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852 "2023-07-31T12:50:39Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\ **Post date:** [July 31, 2023, 12:50pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/1 "2023-07-31T12:50:39Z")
Hello Everyone, In my project, I have some GLB’s loaded. There is a huge stutter and frame drops when models enter view. Is there a way to avoid this? Turn around to look at the car and you’ll see how it lags: > **[Babylon.js Playground](https://playground.babylonjs.com/#4N44I4%231)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes After it has already been seen, there’s no stutter or frame drops. I tried doing the things in this thread but it didn’t help: > [@How to preload mesh/materials so that there isn't stutter when a model enters the camera view?](https://forum.babylonjs.com/t/how-to-preload-mesh-materials-so-that-there-isnt-stutter-when-a-model-enters-the-camera-view/32619/20): > > I was able to resolve my loading issues by tracing all calls to [ThinEngine.\_compileRawShader](https://github.com/BabylonJS/Babylon.js/blob/c69ac2e0c4b41af23f6aea31c8372a3a53fd4877/packages/dev/core/src/Engines/thinEngine.ts#L2853) to see what functions were incurring shader compilation, and then preloading materials by manually calling [Mesh.isReady](https://github.com/BabylonJS/Babylon.js/blob/c69ac2e0c4b41af23f6aea31c8372a3a53fd4877/packages/dev/core/src/Meshes/mesh.ts#L1174). Various mesh and material properties sometimes had to be adjusted to get the desired shader variant to compile. In particular, I don’t know how to apply what is mentioned in post 20. Any chance someone can explain this to me? How would I do that do my playground example? ---
**Author:** ![kvbh](https://avatars.discourse-cdn.com/v4/letter/k/54ee81/32.png) [@kvbh](https://forum.babylonjs.com/u/kvbh)\ **Post date:** [July 31, 2023, 2:01pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/2 "2023-07-31T14:01:10Z")
Here is an example of tracking shader compilation calls; I just monkey patched the compilation function. > **[Babylon.js Playground](https://playground.babylonjs.com/#PDN3FY)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes > What I did involved trying to ensure all compilation calls occur during a preload step. I triggered compilation by running something along the lines of `mesh.isReady(true, false)`. I had to make sure the correct material properties were assigned prior to running this, in order to ensure that the correct shader variant was compiled. You can also log the full shader source and inspect that to see what variant is being generated, which basically amounts to inspecting the `#define`s and such. Overall, it wasn’t a very straightforward process and involved a lot inspection of shader source and the Babylon.js source code as well in order to figure out what causes specific shader flags to be set. According to a post in the thread you referenced, `material.forceCompilationAsync` may work also but I didn’t test that at the time. ---
**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\ **Post date:** [July 31, 2023, 2:33pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/3 "2023-07-31T14:33:40Z")
Thanks for getting back to me. I’m limited in terms of technical skill, but I tried to do what you mentioned and it seems everything compiles: > **[Babylon.js Playground](https://playground.babylonjs.com/#4N44I4%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes However the stutter is still there ☹ Loading GLB’s seems like a foundational thing most need to do and as far as I understand, my GLB isn’t that complex. How does everyone use models into their projects without the stutter? For example, the Hill Valley demo has lots of models and when I look around, it’s buttery smooth: [https://www.babylonjs.com/demos/hillvalley/](https://www.babylonjs.com/demos/hillvalley/) ---
**Author:** ![kvbh](https://avatars.discourse-cdn.com/v4/letter/k/54ee81/32.png) [@kvbh](https://forum.babylonjs.com/u/kvbh)\ **Post date:** [July 31, 2023, 3:10pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/4 "2023-07-31T15:10:15Z")
Here is a version with the tracing enabled, and you’ll notice that when you turn the camera, it logs a bunch of new shader compilation events. > **[Babylon.js Playground](https://playground.babylonjs.com/#4N44I4%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes From what I can surmise, this seems to come from [ImageProcessingConfigurationDefines](https://github.com/BabylonJS/Babylon.js/blob/ac3ab8acfef41f37e091f70ba15623b1dcb3e74c/packages/dev/core/src/Materials/imageProcessingConfiguration.ts#L539-L5850) applying some custom defines. Doing a diff of some shader compilations shows that these are some of the flags being modified to trigger a recompile. This may stem from something configured in the GLB model that is being loaded, and without a deep dive into the Babylon.js source, I’m not sure why these flags are only turned on later. Perhaps a contributor can chime in. ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/8/d8a476e1e70ac0365596e70bed928b34c6d8ce75.png) ---
**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\ **Post date:** [July 31, 2023, 3:19pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/5 "2023-07-31T15:19:41Z")
Thanks, I’m still looking into it, but the frame drops seem to be coming from an emissive material and some lights. I’m still trying to figure out how to have these without the lag. ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [July 31, 2023, 3:38pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/6 "2023-07-31T15:38:30Z")
cc @Evgeni_Popov our shader god ---
**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\ **Post date:** [July 31, 2023, 6:14pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/7 "2023-07-31T18:14:06Z")
If you set `compileMaterials` on the loader, it will catch most of the shaders. I’m not sure what’s up wtih the materials that are not compiled beforehand yet. PG: [https://playground.babylonjs.com/#4N44I4#4](https://playground.babylonjs.com/#4N44I4#4) ---
**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:** [August 2, 2023, 9:45am UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/8 "2023-08-02T09:45:56Z")
The asset is using the KHR\_material\_transmission extension, which means we are creating a hidden RTT behind the scene to render opaque objects. You can force compiling the materials used by this RTT this way: > **[Babylon.js Playground](https://playground.babylonjs.com/#4N44I4%238)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes You will see that when the car comes into view, there’s no new shader compilation, but it’s still stuttering. The performance snapshot is something like this on my computer: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/3/d30ba949ea85d0b6de50bb3fc645d55c94f2e9c1.png) It’s the GPU timeline that takes a long time when there’s stuttering… We’re not doing anything to explain why the GPU runs for 1.2 seconds continuously. Maybe it’s the driver that doesn’t do anything until the mesh is visible? I have to say that I don’t really understand this snapshot… ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [August 11, 2023, 3:42am UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/9 "2023-08-11T03:42:22Z")
@vx9 Can you try taking apart your glb model into its subcomponents and then loading into the PG one subcomponent at a time? It will help to isolate, I’m guessing some hierarchy interactions with the scene lighting might be causing the stutter. ---
**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:** [August 11, 2023, 11:37am UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/10 "2023-08-11T11:37:18Z")
It seems it is a bit like in: > [@Refraction texture limit per scene?](https://forum.babylonjs.com/t/refraction-texture-limit-per-scene/43170/10): > > It’s a problem with Angle in Chrome. If you set the Angle setting to OpenGL, the stuttering disappears. Here’s a PG that makes it easier to test, as you don’t need to move the camera yourself: If you browse chrome://flags and do: You will see you don’t have stuttering anymore (after restarting the browser). Unfortunately, we can’t do anything about it… Even if in this case setting Angle to OpenGL does not fix completely the stuttering on my computer, it improves a lot (only a single small stuttering remains). Also, there’s no stuttering in Firefox. ---
**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\ **Post date:** [August 11, 2023, 8:31pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/11 "2023-08-11T20:31:38Z")
I disposed materials and lights to isolate the causes. It seems like there are two reasons: a small stutter results from lights parented to transformNodes. A large stutter results from some materials. I used Blender to make the GLB and the materials which cause problems are: 1. an image hooked up to emission node, 2. objects without materials assigned, and 3. a random material with something in it, I don’t know what, that causes problems. See this with the problem elements removed: > **[Babylon.js Playground](https://playground.babylonjs.com/#4N44I4%2315)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Does anyone know what is the problem with the materials I disposed of in the array? (You can remove the dispose() to see them in inspector. And how can I use them and not have stutter? And is there a way to get around the stutter that results from parenting lights to transformNodes? It doesn’t seem great, but perhaps use an onBeforeRender to sync positions of light with absolute position of the transformNodes? I’m not sure if that would create other problems. ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [August 15, 2023, 6:58am UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/12 "2023-08-15T06:58:16Z")
The stuttering is from the Angle graphics backend that Chrome ships. I believe it was OpenGL prior, so if you switch it back and test your PG in the OP, there is no stuttering. Type `chrome://flags/` in chrome, type `Angle` to bring up the graphic backend option and switch to OpenGL, relaunch your browser and run your PG. Hope it helps. ---
**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:** [August 18, 2023, 3:06pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/13 "2023-08-18T15:06:19Z")
@Evgeni_Popov do we have a bug tracking this on Chromium as it could be a good candidate to follow. It is the second time we have been hit by this behavior. ---
**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:** [August 18, 2023, 4:24pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/14 "2023-08-18T16:24:16Z")
Actually, the latest Chrome version fixed the problem (116.X)! There’s another thread about it somewhere. I tested my PG again, and there’s no stuttering anymore: > **[Babylon.js Playground](https://playground.babylonjs.com/#4N44I4%238)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**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:** [August 18, 2023, 9:45pm UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/15 "2023-08-18T21:45:34Z")
YESSSSS !!! thanks a lot for the feedback ---
**Author:** ![vx9](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vx9/32/28120_2.png) [@vx9](https://forum.babylonjs.com/u/vx9)\ **Post date:** [August 19, 2023, 5:33am UTC](https://forum.babylonjs.com/t/frame-drops-on-loaded-glb/42852/16 "2023-08-19T05:33:42Z")
Amazing! Thanks everyone