Howto make a screenshot from the render canvas ?

[demonixis]

Hi,

 

I'm trying to make a screenshot from my application with canvas.toDataURL() but I've an empty image in result. Is there a special method to call to achieve that ?

 

My code is very simple :

var engine = new BABYLON.Engine(myCanvas);...// Triggered by an eventvar base64 = myCanvas.toDataURL();var img = new Image();img.src = base64;return img;

The image is transparent. Is it normal ? How can I create a correct screenshot of the current scene ?

 

Thanks.

[gwenael]

Hello,

 

If you can wait up to next week, the code should be pushed on Monday or Tuesday.

[Dad72]

I have not tested, but can be like this:
 

var engine = new BABYLON.Engine(myCanvas);...// Triggered by an eventvar canvas2D = myCanvas.getContext('2d');var base64 = myCanvas.toDataURL("image/png");var img = new Image();img.src = base64;return img;

[Nico]

It will not work since this code is using a 2D canvas, and in BabylonJS we are using WebGL canvas, it is a little bit harder to do, you need to read data pixel by pixel from WebGL buffer first and then push data in a 2D canvas to create a PNG with the same method you did, I will push my method to create a screenshot from render canvas today or tomorrow

 

@Dad72 : Not sure to understand what you are trying to do, you a creating a var, but not using it

[Dad72]

Yes I made a mistake :   
 
var canvas2D = myCanvas.getContext('2d');
var base64 = canvas2D.toDataURL("image/png");

[Nico]

My pull request was accepted, and merged, so you can now use :

BABYLON.Tools.CreateScreenshot(engine, camera, size);

to create a screenshot from your babylon scene.

 

You can find a small "How to use it" tutorial here : https://github.com/BabylonJS/Babylon.js/wiki/Render-scene-on-a-PNG-%28Screenshot%29

[Temechon]

This is awesome. I was using canvas-to-blob (https://github.com/blueimp/JavaScript-Canvas-to-Blob), but this is much better.

 

Thanks ! 

[Dad72]

C'est cool. Thanks

 

par contre vous fait une petite faute a BA B ylon. 

 

Toutefois, ce n'est pas encore disponible dans le minimify 1.12

[GameMonetize]

This is available in the 1.12 minified version

[Dad72]

No, sorry Deltakosh, if I did a search for CreateScreenShot in the minimify file 1.12 (2014-05-13), it does not exist.

If I run this function I get an error that this function does not exist.

[GameMonetize]

No sorry Dad72, you are wrong:

https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/babylon.1.12-beta.js

 

Search for CreateScreenshot (note that there is only the first S which is capital)

[Nico]

you made a small fault has BABYLON. 

Thanks, fixed ! 

[Dad72]

Search for CreateScreenshot (note that there is only the first S which is capital)

 

That is my mistake then, I sought as it was written in this post 'CreateScreenShot' with a capital 'Shot' so that it was not found.

 

You can also fix that Nico, the other could be misled by copying your line of code.

 

Thank you

[Nico]

 

That is my mistake then, I sought as it was written in this post 'CreateScreenShot' with a capital 'Shot' so that it was not found.

 

You can also fix that Nico, the other could be misled by copying your line of code.

 

Thank you

 

Sorry for this mistake, it's correct now !

[Dad72]

CreateScreenshot a problem when using the viewport. several camera, so the activeCamera becomes activeCameras[0]
 
This could correct to support multi camera.
 

     //##     //## Add cameraIndex in the signature (is Optional) = index of the cameras of the viewport.     //##     Tools.CreateScreenshot = function (engine, camera, size, cameraIndex) {            var width;            var height;            var scene = engine.scenes[0];            var previousCamera = null;                        	    if(scene.activeCamera !== camera && cameraIndex== undefined) {		previousCamera = scene.activeCamera;		scene.activeCamera = camera;	    } else if(scene.activeCameras[cameraIndex] !== camera) {		previousCamera = scene.activeCameras[cameraIndex];		scene.activeCameras[cameraIndex] = camera;	    }             // ***********            // Code current            // ***********           scene.afterRender = function () {                texture.render();                texture.dispose();                if (previousCamera) {			if (scene.activeCamera !== camera  && cameraIndex == undefined) scene.activeCamera = previousCamera;			else if (scene.activeCamera[cameraIndex] !== camera) scene.activeCameras[cameraIndex] = previousCamera;	                }                            };      };  

[Nico]

Yeah you're right I forgot to support multiple active cameras, I will be busy during this weekend but I will do that on Monday !

BTW I am not sure that is the way to do that, I think I should store activeCameras, set its length to 0 (it will empty it), and then when I have render my texture, restore activeCameras as it was before

 

Edit : I forgot to switch the camera you give as parameter to activeCamera, I corrected it yesterday and deltakosh merged this last night, you should have to get lastest version to test this new behavior

[Dad72]

Thanks Nico

[Dad72]

BTW I am not sure that is the way to do that, I think I should store activeCameras, set its length to 0 (it will empty it), and then when I have render my texture, restore activeCameras as it was before

 

Edit : I forgot to switch the camera you give as parameter to activeCamera, I corrected it yesterday and deltakosh merged this last night, you should have to get lastest version to test this new behavior

 

Yes I notice the patch made and everything seems to work properly now. Thank you.

This feature is nice.

[Nico]

I have checked if I have to do something with activeCameras, and renderTargetTexture doesn't use activeCameras, but activeCamera, I think I was tired Friday ...