GUI elements not visible on screenshot taken with Babylon.js Tools

Questions
,
1

Hi guys,
I am working on a feature where I need to capture screenshots of the scene. My scene has GUI elements in it and for some reason GUI elements don’t show on the screenshot. Any idea why? I have used Tools.CreateScreenshotUsingRenderTarget() to capture the screenshot

2

It will work if you use CreateScreenshot instead of CreateScreenshotUsingRenderTarget.

Else, the easiest way to do it is to use the camera.outputRenderTarget property to render the scene in a custom RTT.

For eg:

3 Likes
3

Hi @Evgeni_Popov,

Thanks for your reply. For some reason CreateScreenshot() messes up the ratio of my screenshot. Also I am using an orthographic camera to take the screenshot and with CreateScreenshot() the screenshot is not orthogonal anymore (The ratio and orthogonality worked fine with CreateScreenshotUsingRenderTarget().

As for the custom RTT I tried and it doesn’t work for me it shows an error saying Uncaught TypeError: rtt.readPixels(...).then is not a function. Any idea on how to fix it?

4

Can you show us a playground example of CreateScreenshot not working?

5

I think you are using 4.2 and not 5.0? In 5.0, readPixels return a Promise. In 4.2 you can simply get the data buffer as the return value of readPixels but the PG won’t work in 4.2 because camera.outputRenderTarget was not working as expected (it has been fixed in 5.0).

1 Like
6

Yes I am using 4.2 not sure if I can upgrade at this moment though. How about CreateScreenshot()? Any idea as to why it doesn’t take an orthographic screenshot even though the camera used is in orthographic mode?

7

Hi @carolhmj,
It is actually working but the screenshot is not orthographic even though the camera used is in orthographic mode.

8

It does work for me.

Try this PG in 4.2.1:

1 Like
9

What is the purpose of using setTimeout here?

10

To be sure the scene has been rendered at least once (could have used scene.executeWhenReady too).

2 Likes
11

I understand. I realized CreateScreenshot() was not giving me an orthographic result because the camera I was using to capture the screenshot was not active (In a normal state when not taking screenshots I use a different camera which is not orthographic).
However now I am dealing with the issue of the GUI elements not being positioned at the correct place. I guess when switching cameras they take some time to rerender and the screenshot method doesn’t wait for it. And for some reason when using executeWhenReady() I get a blank screenshot. I don’t know what else to try… Is setTimeout the only way?

12

I guess we will need a PG because it should work, the GUI should be there (I don’t think there’s any delay in rendering with the GUI, except if you are using pictures - in that case, you should make sure the pictures are loaded before taking the screenshot).

1 Like
13

I didn’t manage to fix the issue with the incorrect position of the GUI elements when using CreateScreenshot and couldn’t replicate it in a playground… So I ended up upgrading to version 5.0 and using a custom RTT like you suggested. Thanks a lot for your time @Evgeni_Popov, you helped me a lot :smiling_face:

1 Like