# Shader Flickering when calling setTexture

**URL:** <https://forum.babylonjs.com/t/shader-flickering-when-calling-settexture/13416>\
**Category:** Questions\
**Tags:** material, shader\
**Created:** [August 16, 2020, 7:42pm UTC](https://forum.babylonjs.com/t/shader-flickering-when-calling-settexture/13416 "2020-08-16T19:42:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hhaamm](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hhaamm/32/7476_2.png) [@hhaamm](https://forum.babylonjs.com/u/hhaamm)\
**Post date:** [August 16, 2020, 7:42pm UTC](https://forum.babylonjs.com/t/shader-flickering-when-calling-settexture/13416/1 "2020-08-16T19:42:27Z")

</div>

Hi. I’m not sure if this is a Babylon js question or a shader / WebGL question. This is what is happening: I have a game which ground is a grid, in which some hexagons are “in shadows” (in the fog of war sense). Because the number of hexagons is high, I don’t want to put an array of hexagons to the shader that creates the “fog” effect. An image of the game:

![shadows](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/6a70f2e3c421563ec5f7c6a382b063eac7816669.png)

I refresh the texture just modifying the original image (which is an HTML canvas) and setting it again in the shader in this way:

```auto
    this.groundMaterial.setTexture("shadowImage", new BABYLON.Texture(this.shadowMap.toDataURL(), this.babylonScene, true, false, BABYLON.Constants.TEXTURE_NEAREST_NEAREST));

```

The problem is that when I do it, there is a “flick”, in which for a small fraction of time the “shadow” is applied to all the ground. I think this is maybe because it’s replacing the original texture with a new one. Is this right? In that case, is there a way to modify the texture in a way I don’t get that flick effect (but I still can change which hexagons are with fog in real time)?

---

<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:** [August 17, 2020, 9:18am UTC](https://forum.babylonjs.com/t/shader-flickering-when-calling-settexture/13416/2 "2020-08-17T09:18:08Z")

</div>

You should set the texture to the material only when it is loaded: use the onLoadedObservable of the texture object for that.

Something like:

```javascript
const texture = new BABYLON.Texture(this.shadowMap.toDataURL(), this.babylonScene, 
     true, false, BABYLON.Constants.TEXTURE_NEAREST_NEAREST);
texture.onLoadedObservable.add(() => this.groundMaterial.setTexture("shadowImage", texture));

```