Control renderorder of interdependant CustomProceduralTextures

[ilja]

Hi,

I’m trying to implement Tessendorfs FFT water simulation.
So I need to render at least 3 procedural textures:

• waves spectrum
• waves spectrum time
• heightmap (+normal map, …)

The second texture is dependant on the first, and the third texture is dependant on the second.

I am using CustomProceduralTextures.

How can I manually control the order the textures are rendered?

I tried setting the refreshrate to -1 and calling ‘render’ on each of the textures in ‘onRender’.
But then I get the following error:
proceduralTexture.ts:618
Uncaught TypeError: Cannot read properties of null (reading ‘setFloat’) at CustomProceduralTexture.render

code sample:
onSceneReady

this.philipsSpectrumTexture = new CustomProceduralTexture(“philipsSpectrumTexture”, process.env.PUBLIC_URL + “/proceduralTextures/philipsSpectrum”, 256, scene);
this.fourierAmplitubesTexture = new CustomProceduralTexture(“fourierAmplitubesTexture”, process.env.PUBLIC_URL + “/proceduralTextures/fourierAmplitubes”, 256, scene);
this.heightmapTexture = new CustomProceduralTexture(“heightmapTexture”, process.env.PUBLIC_URL + “/proceduralTextures/heightmap”, 256, scene);

onRender:

this.philipsSpectrumTexture.render();
this.fourierAmplitubesTexture.setTexture(“philipsSpectrumTexture”, this.philipsSpectrumTexture);
this.fourierAmplitubesTexture.setFloat(“t”, time.t * 0.001);
this.fourierAmplitubesTexture.render();
this.heightmapTexture.setTexture(“fourierAmplitubesTexture”, this.fourierAmplitubesTexture);
this.heightmapTexture.render();

[Tricotou]

Hello

---

First of all : I like the project As an engineer in Electronics and Signal Processing, I’ve done a lot of FFT signals stuffs… Never tried to put that in a texture, but I’m interested ^^

---

@ilja

Cannot read properties of null (reading ‘setFloat’) at CustomProceduralTexture.render

So this basically means that in the function CustomProceduralTexture.render you are calling SOMETHING.setFloat() and SOMETHING is not defined in the context…

---

Best would be if you can share a reproduction of your issue in a Playground so that we can help.

++
Tricotou

[ilja]

Thanks for the feedback!

I have created a new post with a simplified case:

Manually trigger render of interdependant CustomProceduralTextures

In this playground there are 3 textures: texture1 = red color texture2 = texture1 + green color → yellow color texture3 = texture2 + blue color → white color All textures have refreshrate = 0 If I instantiate the textures in order 1, 2, 3, the sphere has a white color. However, I instantiate the textures in order 3, 2, 1 on purpose → the sphere has a blue color. How can I manually trigger a render of the 3 textures in the order I want (1, 2, 3) to get a white sphere?

Asking both about a praticular error and a general method of rendering order in the same post isn’t ideal.

[Evgeni_Popov]

In case you are interested, we have an implementation with compute shaders in WebGPU:

Babylon.js Playground