Jump to content

Howto make a screenshot from the render canvas ?


demonixis
 Share

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.

Link to comment
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;
Link to comment
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:

Link to comment
Share on other sites

  • 2 weeks later...

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
Link to comment
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 ! ;)

Link to comment
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;	                }                            };      };  
Link to comment
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 ;)

Link to comment
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.
Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...