Issue Rendering ShaderMaterial Snapshot Using RenderTargetTexture in Babylon.js

Hi,

I create awesome clouds for my game on a plane using ShaderMaterial.

However, it’s resource-intensive, so I would like to take a snapshot of the Babylon plane with ShaderMaterial using RenderTargetTexture and apply it to a new Babylon plane with a StandardMaterial using a DiffuseTexture.

But it does not render as I expected, and I’m struggling to find the issue. Any help would be appreciated. You can look at this playground: Babylon.js Playground

You might want to render your clouds to a procedural texture (Babylon.js docs) and then assign that texture to the StandardMaterial. This would simplify the setup a great deal.

1 Like

Thanks, here is the test I made: Babylon.js Playground using CustomProceduralTexture, now I have to figure out why its greenish :slight_smile:

Figure it out, I missed a property: https://playground.babylonjs.com/#BLOZ5Y#1

1 Like

Note that the texture is still rendered each frame (else, you would not see the animation). So, it’s not really different from your first PG, except that you are using a procedural texture instead of a shader material.

If you don’t want the texture to be generated each frame, you can set refreshRate to 0 to never refresh it (but you won’t get any animation), or a value greater than 1 to update it every 2 frames (refreshRate = 2), 3 frames (refreshRate = 2), etc:

Refresh every 5 frames:

1 Like