# RenderTarget on demand rendering

**URL:** <https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128>\
**Category:** Questions\
**Created:** [June 7, 2024, 8:05am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128 "2024-06-07T08:05:28Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![joelutting](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joelutting/32/41753_2.png) [@joelutting](https://forum.babylonjs.com/u/joelutting)\
**Post date:** [June 7, 2024, 8:05am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/1 "2024-06-07T08:05:28Z")

</div>

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

I am trying to get this to work without changing the engine render loop. Is there a way to render a scene - once - to a rendertarget _outside_ the normal rendering?

I want to use this rendertarget output as the input to another rendertarget.

Ideally a scene.render() that I can call from anywhere to render that scene - in the case of this playground it would be rttscene.render()

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [June 7, 2024, 8:59am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/2 "2024-06-07T08:59:40Z")

</div>

You can manually render the RTT as part of the scene’s render loop. Something like this - [Draw plane to render target and show it on material | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#I09BFE#1). Is that the effect you are looking for? (You can also render the other scene, if you are looking for a more complex scenario - [Draw plane to render target and show it on material | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#I09BFE#2))

---

<div class="post-metadata">

**Author:** ![joelutting](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joelutting/32/41753_2.png) [@joelutting](https://forum.babylonjs.com/u/joelutting)\
**Post date:** [June 10, 2024, 4:34am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/3 "2024-06-10T04:34:08Z")

</div>

The thing is I need to use the result of the rendertarget as an input to another rendertarget. Is it not possible to render outside the render loop?

If I daisy chain these up and run the chain inside the render loop will that work? eg; render the first target, and then use that as an input to a shader and then render the next render target, and so on?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [June 10, 2024, 8:37am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/4 "2024-06-10T08:37:44Z")

</div>

you can decide when to render, but you need to be sure the resources needed to render are already available (or “ready”). In your case RTT one needs to wait for the resources to render correctly, and then RTT2 needs to wait for RTT1 to render in order to render correctly.

---

<div class="post-metadata">

**Author:** ![joelutting](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joelutting/32/41753_2.png) [@joelutting](https://forum.babylonjs.com/u/joelutting)\
**Post date:** [June 10, 2024, 11:56am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/5 "2024-06-10T11:56:59Z")

</div>

Thanks - that worked!

---

<div class="post-metadata">

**Author:** ![joelutting](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joelutting/32/41753_2.png) [@joelutting](https://forum.babylonjs.com/u/joelutting)\
**Post date:** [July 19, 2024, 7:51am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/6 "2024-07-19T07:51:31Z")

</div>

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

Hi - I am finally able to get back to this project; I have it working, except when I move the plan…it does not move!

You see I set the position.x to 200 in this playground - but the plane always appears centered at 0,0,0 no mater what I set the position to. I have been tearing my hair out about this - why wouldn’t the plane move?

any ideas would be greatly appreciated.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 19, 2024, 11:40am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/7 "2024-07-19T11:40:00Z")

</div>

> [@joelutting](#):
>
> why wouldn’t the plane move?

You have to rerender the `rttScene`:

```auto
    scene.onBeforeRenderObservable.addOnce(() => {
        rttscene.render()
    })

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/7/c70987a952b079b61c9713035a361b7c32ccd41a.png)

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

---

<div class="post-metadata">

**Author:** ![joelutting](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joelutting/32/41753_2.png) [@joelutting](https://forum.babylonjs.com/u/joelutting)\
**Post date:** [July 19, 2024, 11:43pm UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/8 "2024-07-19T23:43:07Z")

</div>

Thanks - not sure why, but 5 mins after I put up this question I changed the position using;  
mesh.position = new BABYLON.Vector3(10,0,0) and it moved! Strange that changing it that way worked(?)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [July 20, 2024, 4:30am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/9 "2024-07-20T04:30:44Z")

</div>

Nothing strange here 😛

Are you familiar with `dirtty` flags in programming?

> <https://stackoverflow.com/questions/13503243/what-does-dirty-flag-dirty-values-mean>

This happens when you set the `position` as a `Vector3`:

```auto
    public set position(newPosition: Vector3) {
        this._position = newPosition;
        this._isDirty = true; // sets the mesh dirty!
    }

```

Super simply explained: dirty stuff gets rerendered.

If you set the position by changing the property `x` of the `Vector3` object it’s not marked as `dirty`.

---

<div class="post-metadata">

**Author:** ![joelutting](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joelutting/32/41753_2.png) [@joelutting](https://forum.babylonjs.com/u/joelutting)\
**Post date:** [July 20, 2024, 5:16am UTC](https://forum.babylonjs.com/t/rendertarget-on-demand-rendering/51128/10 "2024-07-20T05:16:20Z")

</div>

Yeah - I thought it must be something similar to that - thanks for clarifying, all working now!
