Shader Flickering when calling setTexture

Questions
,
1

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

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

    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)?

2

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

Something like:

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));