Empty screenshot

[Jean-Philippe Côté]

Hello amazing people!

I'm using the following code to try to grab a screenshot of my scene and display it in an HTML <img> tag. It seems to be working because my <img> is the same size as my canvas (1280x800).

BABYLON.Tools.CreateScreenshot(engine, camera, {precision: 1}, data => {

  var test = document.createElement('img');
  test.src = data;
  document.body.appendChild(test);

})

However, the image is empty (only transparent pixels). Does anyone have an idea of what might be going on? Or something I could try in order to troubleshoot the issue?

Thanks.

[brianzinn]

I've had better luck with CreateScreenshotUsingRenderTarget.  Try without the last 2 params I have added in this snippet, but 16 is samples.

BABYLON.Tools.CreateScreenshotUsingRenderTarget(
   engine,
   camera,
   { precision : 1 },
   (data) => {
       ... = data;
   },
   undefined,
   16
);

Here is the official docs:
https://doc.babylonjs.com/how_to/render_scene_on_a_png#createscreenshotusingrendertarget

The last few parameters aren't on the docs page, but can be found here:
https://github.com/BabylonJS/Babylon.js/blob/e5101a113cfbca77ed29e541d112ccb14f516573/src/Tools/babylon.tools.ts#L1017

[aWeirdo]

If same size as canvas, you can also just do canvas.toDataURL()

  var test = document.createElement('img');
  test.src = renderCanvas.toDataURL("image/png");
  document.body.appendChild(test);

 

[Jean-Philippe Côté]

9 hours ago, brianzinn said:

I've had better luck with CreateScreenshotUsingRenderTarget.  Try without the last 2 params I have added in this snippet, but 16 is samples.

Thanks a lot @brianzinn, CreateScreenshotUsingRenderTarget() did work for me. I'm not sure why the CreateScreenshot() method was not working, though. Also, thanks for pointing out the additional parameters. This is how I found the antialiasing flag which I needed.

Can we contribute to the documentation? I'd be happy to fill in the blanks in cases such as this one.

Cheers!

[brianzinn]

Yes, you can contribute to the documentation!!  It's a separate repo - here are instructions:
https://github.com/BabylonJS/Documentation#how-to-contribute

I would use an editor that supports markdown like VS Code.

[Jean-Philippe Côté]

10 hours ago, aWeirdo said:

If same size as canvas, you can also just do canvas.toDataURL()

Thanks for you help. However, this is what I tried first and it wasn't working. Not sure why... probably because it's a WebGL canvas instead of the good old 2D canvas.

[aWeirdo]

43 minutes ago, Jean-Philippe Côté said:

Thanks for you help. However, this is what I tried first and it wasn't working. Not sure why... probably because it's a WebGL canvas instead of the good old 2D canvas.

Odd, 
works fine for me
http://playground.babylonjs.com/#8P4VBC#5

[Jean-Philippe Côté]

Hmm... that's strange. I just tried it gain and I couldn't make it work. I'll dig deeper if I get a minute... thanks.

[Kesshi]

When you create the BABYLON.Engine the option "preserveDrawingBuffer" has to be enabled. Maybe that helps.

[Jean-Philippe Côté]

7 hours ago, Kesshi said:

When you create the BABYLON.Engine the option "preserveDrawingBuffer" has to be enabled. Maybe that helps.

Yes, it does help. Thanks. However, it causes other strange things to happen. I guess you have to manually empty the buffer otherwise some stuff remains visible... That's probably why this option is not even mentioned in the documentation ;-). Anyway, I'm gonna stick to CreateScreenshotUsingRenderTarget() since it is working fine for me. Thanks a lot for your input.

[Jean-Philippe Côté]

22 hours ago, brianzinn said:

Yes, you can contribute to the documentation!!  It's a separate repo - here are instructions:
https://github.com/BabylonJS/Documentation#how-to-contribute

I was thinking more of the API documentation. I stumbled upon a few errors that are bound to trip people up (like it did for me). As far as I can tell, the API doc is generated from source so I guess I'll just submit PRs. Thanks.

[brianzinn]

public methods would ideally be documented like BABYLON.Tools.Mix(...). https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L93

The docs then show up in the editor and should be generated online looks like by TypeDoc:

... instead of the less helpful CreateScreenshotUsingRenderTarget

[GameMonetize]

I wanted to use this thread to thanks all people kind enough to help documenting the API. This is clearly a weakness so far and it will require a big community effort to improve it..So thank you!

[Jean-Philippe Côté]

4 hours ago, brianzinn said:

... instead of the less helpful CreateScreenshotUsingRenderTarget

I thought I'd give a shot at fixing that! 

https://github.com/BabylonJS/Babylon.js/pull/3557

[GameMonetize]

THANKS!

[brianzinn]

https://doc.babylonjs.com/classes/3.0/tools

https://doc.babylonjs.com/classes/3.1/tools

I was just checking the currently generated "classes" and it looks as though they are no longer in the docs... (ie: was in 3.0?)

[GameMonetize]

The documentation is not updated live

I will update it by end of week

[brianzinn]

@Deltakosh - It's not the live update, but 3.1 is missing entirely most of the Tools functionality compared to 3.0 - even functionality available in 3.0...

[GameMonetize]

ouch..ping @Temechon

[Temechon]

It's fixed... The documentation class parser is really outdated and should be updated. It's currently deploying, give it few minutes and it will be ok.

Thank you !

[Wingnut]

It's @Temechon!!  Holy crap!  Howyadoon, long-time comrade?  I hope well.  Geez, you sure have been elusive.  You must be working on a secret plan to take over the world!  Cooooool.    Good to see ya!

Come visit for the fun of it, sometime, eh?   You don't need to wait for a deltaPing to bring you in for coffee/lunch. 

You're not "out there" trying to "make a living", are ya?  Yikes!

Making a living is SO over-rated and 1980's.  So is "out there". 

"In here" is lots better.  Us's and we's are "in here".   Them's and they's are "out there".  (huh?)

(From Wingy's new book - Bloody Stories from the US-THEM Wars)  heh