Howto make a screenshot from the render canvas ?

[demonixis 3]

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 60]

Hello,

 

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

[Dad72 916]

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 22]

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 916]

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

[Nico 22]

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 677]

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

 

Thanks ! 

[Dad72 916]

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

[Deltakosh 4313]

This is available in the 1.12 minified version

[Dad72 916]

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.

[Deltakosh 4313]

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 22]

you made a small fault has BABYLON. 

Thanks, fixed ! 

[Dad72 916]

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 22]

 

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 916]

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 22]

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 916]

Thanks Nico

[Dad72 916]

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 22]

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 ...