Manually trigger render of interdependant CustomProceduralTextures

Questions
1

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?

2

Maybe there is a cleaner solution, but you could always render them once, after they are ready - CustomProceduralTextures render order | Babylon.js Playground (babylonjs.com)

3

I was trying to provide a similar fix but I was struggling with an inconstancy problem.
Same appear in your playground : reload multiple times : sometimes (random) result is cyan (RGB = 0,1,1) :thinking:

4

there is an interesting issue if you set loadJson to false as well, which I was trying to fully understand. I what you are mentioning is a race condition between the isReady() settings of the 3 textures (but I can’t 100% be sure of that…)

Oh, and i just noticed the rendering order in my PG is switched (because I was experimenting a bit). I don’t get cyan anmore after setting them in the right order. - CustomProceduralTextures render order | Babylon.js Playground (babylonjs.com))

5

By the way, the test setup is not ideal since if you deactivate all texture calls, the result is white (default material) which is the intented result :grin:

6

good point, i lowered the color values to 0.5, so the prefered result is grey :slight_smile: )

7

I tested your solution, but sadly the render calls in onBeforeRenderObservable aren’t executed.

You can test this by only assigning the samplers in onBeforeRenderObservable:

scene.onBeforeRenderObservable.add(() => {
    if (updateTextures && texture1.isReady() && texture2.isReady() && texture3.isReady()) {
        texture2.setTexture("previousTexture", texture1);
        texture3.setTexture("previousTexture", texture2); 
        texture1.render();
        texture2.render();
        texture3.render();
        updateTextures = false;
    }
});

→ blue sphere

I have the impression CustomProceduralTextures follow their own refreshrate logic and ignore any other render calls.

8

i’ll be honest and say I haven’t debugged the behavior or know exactly why it behaves this way, but you need to render on the 2nd frame to get that to work - CustomProceduralTextures render order | Babylon.js Playground (babylonjs.com). I’ll find time later to understand what happens there