# RTT with shader material not rendered on first frame

**URL:** <https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735>\
**Category:** Questions\
**Tags:** render-target, rendering\
**Created:** [February 23, 2025, 11:18am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735 "2025-02-23T11:18:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [February 23, 2025, 11:18am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/1 "2025-02-23T11:18:03Z")

</div>

I’m working on using a custom shader to perform certain computation on an RTT and then read the RTT to see the result of the computation.

I understand that I basically have to wait for the shader to compile before the mesh is drawn on the RTT.

The problem is that I have a problem with the method to wait for all the resources needed for rendering. If I read RTT into readPixels on the initial run, I get a byte array of just zeros.

This seems to be some kind of complex timing issue - it only reproduces in PG, and even then, once it happens, it doesn’t reproduce on page reload. (I think the browser is caching the compiled shaders).

> <https://github.com/noname0310/babylon-mmd/blob/main/src/Loader/textureAlphaChecker.ts#L101-L109>

Follow the link to see the full code that uses RTT.

I’ve read through the relevant Babylon.js sources several times, but I can’t figure out what’s causing this and need help. Thank you.

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [February 24, 2025, 9:32am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/3 "2025-02-24T09:32:32Z")

</div>

This response leaves out the context of babylon.js and my code.

looks like it was generated by an LLM.

---

<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:** [February 24, 2025, 9:59am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/4 "2025-02-24T09:59:17Z")

</div>

Try to use `scene.executeWhenReady(callback, true)` instead and see if that helps. You said it reproduces in a PG: are you able to provide a link? It would be much easier to help.

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [February 24, 2025, 10:47am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/5 "2025-02-24T10:47:30Z")

</div>

[Babylon.js Playground](https://www.babylonjs-playground.com/#2GV41W)

Here’s a organized PG.

For a little context, i use RTT to determine the rendering mode of a mesh  
_The `TextureAlphaChecker` takes a mesh and a diffuse texture and renders the geometry once in UV space._  
_And when you read the result, you can see that if the alpha value is not 255, then the mesh should be drawn as transparent._

Here’s the result when PG is doing something wrong (it doesn’t seem to reproduce well in Firefox).

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/c/9c8b79ff7badce7c70df96651fe91d8e2a240d79.jpeg)

And here’s the result when PG works well.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/5/857c7a0731a7dcfcfc7c3ce295cd80f10ec939de.jpeg)

Each time you press the Run button, it will randomly give you one of two outcomes

it will often work well, and a very high chance it will work badly the first time.

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [February 24, 2025, 11:04am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/6 "2025-02-24T11:04:29Z")

</div>

Here’s a better reproduction. This is also reproduced well in Firefox.

If you load the same mesh twice, and the first time you load it, RTT rendering will always fail. The second mesh’s evaluation will succeed probabilistically.

[Babylon.js Playground](https://www.babylonjs-playground.com/#2GV41W#1)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/910d252726374c626cfe158ee6e4c24a33091c6f.jpeg)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/5/b5bdaed448d605e3bcac7824d1c95bbc50e471ad.jpeg)

---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [February 24, 2025, 11:19am UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/7 "2025-02-24T11:19:58Z")

</div>

[Babylon.js Playground](https://www.babylonjs-playground.com/#X9IPLY)

Here is a test that saves the RTT result as a png to make it debuggable. Note that it overwrites the rtt render code part of the library.

Sorry for sending so many PGs. This is the best one to analyze.

---

<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:** [February 24, 2025, 12:48pm UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/8 "2025-02-24T12:48:14Z")

</div>

Assigned @Evgeni\_Popov on February 24, 2025, 12:48pm UTC



---

<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:** [February 24, 2025, 1:46pm UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/9 "2025-02-24T13:46:58Z")

</div>

The root mesh is disabled when `RTT.isReadyForRendering` is called, so the material of the “q302” mesh won’t be tested for readiness. You should move the code lines 42-45 before the `while` loop (though I don’t know why you set these flags by hand, you could call `setEnabled` on the mesh / parent mesh?):

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#X9IPLY%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<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:** [February 24, 2025, 1:47pm UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/10 "2025-02-24T13:47:05Z")

</div>

Unassigned @Evgeni\_Popov on February 24, 2025, 1:47pm UTC



---

<div class="post-metadata">

**Author:** ![noname0310](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/noname0310/32/27103_2.png) [@noname0310](https://forum.babylonjs.com/u/noname0310)\
**Post date:** [February 24, 2025, 2:31pm UTC](https://forum.babylonjs.com/t/rtt-with-shader-material-not-rendered-on-first-frame/56735/11 "2025-02-24T14:31:05Z")

</div>

Maybe this was too simple a question to ask in the forum, I apologize for my laziness.

> (though I don’t know why you set these flags by hand, you could call `setEnabled` on the mesh / parent mesh?):

Like the GLTF loader, my loader basically creates a single root node, disables it, creates meshes and materials asynchronously and adds them to the child.

Then, when all resources are loaded, it enables the root node.

The reason for this is that rendering an incomplete model that is not yet fully loaded can cause more shaders to be compiled than are actually used in the model, and can also slow down the loading process.

During this process, I use RTT(TextureAlphaChecker) to determine the rendering mode of the material when building the material.

The pain is that Babylon.js is not friendly to one-time renders like this.

I run this rendering mode evaluation only once for every mesh, but it creates GPU resources like VAOs that are cached and left unused.

The loader needs to make sure that resources are loaded with the least amount of resources possible given the wide range of device specs, so I use Babylon.js internal members to optimize for that.
