Render current frame multiple times to separate images

Questions
1

Hi,

I would like to render each frame of a Babylon scene multiple times with different outputs to multiple images. For example, for each frame I would like to render:

Colour image
Depth
Each item unlit in a distinct colour
Each skeleton

I’d like to render each of these images separately at a specified resolution to an image file that I could download. Additionally, I would like to be in control of the time step so the animations and physics update as though 1/60th of a second has passed between the 4 screenshots being taken regardless of how long it actually takes.

I realise this is not possible out of the box, but was hoping someone could point me towards some documentation or Babylon code files that could help?

Thanks

1 Like
2

you can use Render Target Texture to do most of it : )

for example here, I wanna render only the sphere and just red in color to a texture

image
image946×842 49.1 KB

and also get the depth of the scene
image
image950×849 47.1 KB

so you can, on each render, before your RTT renders, change the scene state to however you want and after the rtt render restore it : )
and you can do this at a resolution you specify!

you can even have a separate camera for each different RTT by changing the rtt.activeCamera

you can get the depth in your chosen rtt like (say if you want it from a different res or cam)

(source: Using a custom depth texture source with post processes, rather than the DepthRenderer)

(you can also use a new DepthRenderer() and the texture inside it like an rtt)

as for timing it for animations, if you change the state before and after that’d work, but idrk about timing the render exactly tbh

3 Likes
3

Hi @Heaust-ops - thanks for the information, its really helpful. The first link to the playground doesn’t seem to be to what you describe. Do you have the correct link?
Thanks

1 Like
4

Here you go, I did this a while back and just saw your post.

2 Likes
5

The first link to the playground doesn’t seem to be to what you describe. Do you have the correct link?

Oh yeah! my bad, just edited the first link : )

you’ll have to click in this order to get to the texture

image
image1712×898 179 KB

1 Like
6

thank you, that is also a huge help :+1:

1 Like
7

thanks again @Heaust-ops :+1:

1 Like
8

@Pryme8 - I’ve been looking to implement this today and I’ve come across something in your code that I don’t understand.

The captureRTTasBlob arrow function takes a renderTargetTexture for the renderTarget parameter. This value is then passed into the BABYLON.Tools.CreateScreenshotUsingRenderTarget method as the 3rd parameter. However, the 3rd parameter for this method seems to be size: IScreenshotSize | number, so I guess I’m missing something and was hoping you could help?

Thanks again.

9

Its just getting the width and the height from the rtt, looking over it it does not look like its actually using the rtts that I made and rather are just modifying a single one with the texture setup phase.

There are other ways to grab the rtts directly but for this you can just do the capture and texture setup.

Here is a cleaned up one showing how to dont need the rtts. They where just a relic of a different process I was doing.

2 Likes
10

@Pryme8 - thanks :+1: