Control renderorder of interdependant CustomProceduralTextures


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:
Uncaught TypeError: Cannot read properties of null (reading ‘setFloat’) at CustomProceduralTexture.render

code sample:

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


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

Hello :slight_smile:

First of all : I like the project :grin: 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 ^^

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.


1 Like

Thanks for the feedback!

I have created a new post with a simplified case:

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

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