# Control renderorder of interdependant CustomProceduralTextures

**URL:** <https://forum.babylonjs.com/t/control-renderorder-of-interdependant-customproceduraltextures/50375>\
**Category:** Questions\
**Tags:** textures, dynamic-texture\
**Created:** [May 8, 2024, 7:06am UTC](https://forum.babylonjs.com/t/control-renderorder-of-interdependant-customproceduraltextures/50375 "2024-05-08T07:06:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ilja](https://avatars.discourse-cdn.com/v4/letter/i/8baadc/32.png) [@ilja](https://forum.babylonjs.com/u/ilja)\
**Post date:** [May 8, 2024, 7:06am UTC](https://forum.babylonjs.com/t/control-renderorder-of-interdependant-customproceduraltextures/50375/1 "2024-05-08T07:06:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [May 8, 2024, 7:20am UTC](https://forum.babylonjs.com/t/control-renderorder-of-interdependant-customproceduraltextures/50375/2 "2024-05-08T07:20:01Z")

</div>

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](https://playground.babylonjs.com/) so that we can help.

++  
Tricotou

---

<div class="post-metadata">

**Author:** ![ilja](https://avatars.discourse-cdn.com/v4/letter/i/8baadc/32.png) [@ilja](https://forum.babylonjs.com/u/ilja)\
**Post date:** [May 8, 2024, 8:20am UTC](https://forum.babylonjs.com/t/control-renderorder-of-interdependant-customproceduraltextures/50375/4 "2024-05-08T08:20:25Z")

</div>

Thanks for the feedback!

I have created a new post with a simplified case:

> [@Manually trigger render of interdependant CustomProceduralTextures](https://forum.babylonjs.com/t/manually-trigger-render-of-interdependant-customproceduraltextures/50377):
>
> 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.

---

<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:** [May 8, 2024, 5:05pm UTC](https://forum.babylonjs.com/t/control-renderorder-of-interdependant-customproceduraltextures/50375/5 "2024-05-08T17:05:20Z")

</div>

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

> **[Babylon.js Playground](https://playground.babylonjs.com/?webgpu#YX6IB8%23758)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes