Is there a way to read the pixels from a RenderTargetTexture?

Questions
1

I’m trying to generate a baked shadow. To accomplish this I need to somehow turn a RenderTargetTexture into either a regular texture or more simply said I need to get the RenderTargetTexture as image data. My end goal would be to have a png/jpeg generated from a RenderTargetTexture. Is there a way to do this?

2

Welcome to the community,

You can rely on the readPixels function after the render happened in the RenderTargetTexture. This will return you an arraybuffer containing the raw pixels.

Then you can use DumpData from the BABYLON.Tools class to convert it into a png stored in a dataURL or a blob containing the png data.

2 Likes
3

Thank you for the quick response!

Attempting to do this for the RenderTargetTexture that gets generated from (DepthRenderer).getDepthMap() doesn’t seem to work. Also my installation of Babylon.js does not seem to include Tools.DumpData(). I have the NPM installation method, might it be in a seperate package?

4

You need to be sure to be on the latest preview.

About the other issue, try to create a repro in the babylon playground so we can have a look at the issue.

1 Like
5

I’ve tried creating a similar situation here:
https://playground.babylonjs.com/#4WVEMU#1

[another issue I’ve run into in the playground here however is that OnAfterRenderObservable does not exist for my RenderTargetTexture][EDIT: scratch that, my bad]

6

You should use the onAfterUnbindObservable observer of the main shadow map instead, which triggers when the shadow map has been generated. Also, the buffer retrieved by the readPixels call is a Float32Array buffer, not a Uint8Array. Anyway, it’s easier to just use Tools.DumpData:

https://playground.babylonjs.com/#4WVEMU#5

1 Like
7

Perfect, thanks a lot!
With this example I’ve also managed to download a depth map:
https://playground.babylonjs.com/#8L0MZ6#3

Two small extra questions:
Is there a way to create the depthmap as black/white, and is there a way to get the function Tools.DumpData() in the non-preview version? (or an alternative way to achieve the same result?)

8

To get a black and white texture you can copy the red value to the green and blue channels:

https://playground.babylonjs.com/#8L0MZ6#4

For your second question, you could simply copy/paste the code of DumpData into your own project:

1 Like