demonixis

Howto make a screenshot from the render canvas ?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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 :wacko:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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 ! ;)

Share this post


Link to post
Share on other sites

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;	                }                            };      };  

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.