# Flickering when updating kernel of BlurPostProcess

**URL:** <https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823>\
**Category:** Questions\
**Created:** [November 19, 2022, 1:34am UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823 "2022-11-19T01:34:21Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![heuristics7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heuristics7/32/27959_2.png) [@heuristics7](https://forum.babylonjs.com/u/heuristics7)\
**Post date:** [November 19, 2022, 1:34am UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/1 "2022-11-19T01:34:21Z")

</div>

Hi folks, not sure if this is a bug or if I’m not using BlurPostProcess as intended. When changing the kernel value of BlurPostProcess, the screen flickers. Here’s an example of the behavior:

> **[Babylon.js Playground](https://playground.babylonjs.com/#94GNMR%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

You can see that after the initial animation to kernel 25, the flickering stops. I think it might be related to compiling the effect, and once it’s cached, everything is smooth?

I’m looking for a way to animate the blur effect, so if there’s another way to do that, or maybe to pre-compile certain kernel levels to avoid the flickering, I’m interested in hearing about it!

---

<div class="post-metadata">

**Author:** ![heuristics7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heuristics7/32/27959_2.png) [@heuristics7](https://forum.babylonjs.com/u/heuristics7)\
**Post date:** [November 19, 2022, 4:43am UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/2 "2022-11-19T04:43:15Z")

</div>

I managed to come up with a workaround for the flickering using multiple BlurPostProcess objects and attaching/detaching them.

> **[Babylon.js Playground](https://playground.babylonjs.com/#94GNMR%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I wonder if PostProcess objects can provide an async compilation function like this one [Material | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/classes/BABYLON.Material#forceCompilationAsync)

---

<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:** [November 19, 2022, 9:29am UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/3 "2022-11-19T09:29:16Z")

</div>

> [@heuristics7](#):
>
> I think it might be related to compiling the effect, and once it’s cached, everything is smooth?

Yes, that is the reason why it is flickering.

> [@heuristics7](#):
>
> I managed to come up with a workaround for the flickering using multiple BlurPostProcess objects and attaching/detaching them.

That’s what I was going to suggest 🙂

> [@heuristics7](#):
>
> I wonder if PostProcess objects can provide an async compilation function like this one [Material | Babylon.js Documentation](https://doc.babylonjs.com/typedoc/classes/BABYLON.Material#forceCompilationAsync)

That would not fix the problem because while it is compiling we would not have any effect to use to render the post process, hence the flickering.

What we could do maybe is to keep the current effect while the new one is compiling, and when it is ready replace the current by the new one… I will have to discuss this with the team.

---

<div class="post-metadata">

**Author:** ![heuristics7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/heuristics7/32/27959_2.png) [@heuristics7](https://forum.babylonjs.com/u/heuristics7)\
**Post date:** [November 19, 2022, 10:31pm UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/4 "2022-11-19T22:31:30Z")

</div>

> [@Evgeni\_Popov](#):
>
> That would not fix the problem because while it is compiling we would not have any effect to use to render the post process, hence the flickering.

Yeah, I was just thinking this would be a “nice to have”, not necessarily to fix this issue. I suppose it should be fairly trivial to implement myself though using `_blockCompilation = true` and `updateEffect` callbacks.

> [@Evgeni\_Popov](#):
>
> What we could do maybe is to keep the current effect while the new one is compiling, and when it is ready replace the current by the new one… I will have to discuss this with the team.

I think that would be a nice feature for PostProcess effects in general since then they would work similarly to materials. Though I don’t know how common this case is.

---

<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:** [November 20, 2022, 8:59am UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/5 "2022-11-20T08:59:21Z")

</div>

Here’s a way to do it by hooking `PostProcess.update`:

> **[Babylon.js Playground](https://playground.babylonjs.com/#94GNMR%2312)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<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:** [November 21, 2022, 3:43pm UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/6 "2022-11-21T15:43:25Z")

</div>

> [@Evgeni\_Popov](#):
>
> What we could do maybe is to keep the current effect while the new one is compiling, and when it is ready replace the current by the new one… I will have to discuss this with the team.

The main issue is to deal with uniform or sampler changes for instance as we tried to do in materials 🙂

I am wondering how frequently we are using defines or dynamic code in Post processes. I would say let’s bookmark this thread and improve this part next time we face the issue ? as it will complexify the code a bit and I d like to only do it if absolutely required ?

---

<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:** [November 21, 2022, 5:52pm UTC](https://forum.babylonjs.com/t/flickering-when-updating-kernel-of-blurpostprocess/35823/7 "2022-11-21T17:52:47Z")

</div>

No problem, I provided a PG that is able to do it for cases where the new effect has the same uniform/sampler lists (as it is the case when we simply update the kernel value of `BlurPostProcess`).
