Jump to content

Render scene on PNG


spritefire
 Share

Recommended Posts

I noticed that there is a function to create a screenshot (https://github.com/BabylonJS/Babylon.js/wiki/Render-scene-on-a-PNG-(Screenshot)), however couldn't find any information about being able to create a screenshot of the canvas and then it being saved on the server.
Is it possible to do this? and if so how would I specify the location?

 

Link to comment
Share on other sites

Babylon has no connection to the server. You will have to render the png, and upload the file using XMLHttpRequest, and as you have the PNG as string, it is a simple POST request (and not a file upload).

I did that in the material editor - https://github.com/RaananW/BabylonJS-Material-Editor/blob/196a2a4f7af523151bcf4e1a721fe88dbfcd0b46/MaterialEditor/material/MaterialController.ts#L177 (using angular in that case). Should work the same using any other framework. 

Link to comment
Share on other sites

I must be doing something wrong or missing something. 
When I render the PNG using

var screenshot = new BABYLON.Tools.CreateScreenshot(engine, myCamera, 400);

console.log(screenshot);

It automatically starts the download (don't want it to download on the client end, just want it to take a snapshot and send to server) and the console returns: 
d.CreateScreenshot {}

and not the PNG as a string.
Link to comment
Share on other sites

Hi SF, good to see you again.

 

You've read this?

 

http://babylondoc.azurewebsites.net/page.php?p=22691

 

 

The result will be automatically downloaded if your browser supports it, otherwise it will be displayed on a new tab, it will be in any cases a PNG picture.

 

Now let's wander to ... https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/Tools/babylon.tools.js#L406

 

There's your function.  yay!  But we only care about line 447 - Tools.DumpFramebuffer(width, height, engine);

 

So now let's go to line 356... and there's our dumper.  yay!  But we only care about line 387.  (and maybe 385). 

 

Line 387 checks to see if your browser is modern enough to do auto-download.  If lines 385 - 404 were removed, and replaced with...

385 return imageData.data;

...that would make spritefire a happy person.  :)

 

Just force it, SF.  :)  Put this code... somewhere "early" in your scene (before calling createScreenShot):

        BABYLON.Tools.DumpFramebuffer = function (width, height, engine) {            console.log("MY version of DumpFramebuffer - Activated!");            // Read the contents of the framebuffer            var numberOfChannelsByLine = width * 4;            var halfHeight = height / 2;            //Reading datas from WebGL            var data = engine.readPixels(0, 0, width, height);            for (var i = 0; i < halfHeight; i++) {                for (var j = 0; j < numberOfChannelsByLine; j++) {                    var currentCell = j + i * numberOfChannelsByLine;                    var targetLine = height - i - 1;                    var targetCell = j + targetLine * numberOfChannelsByLine;                    var temp = data[currentCell];                    data[currentCell] = data[targetCell];                    data[targetCell] = temp;                }            }            // Create a 2D canvas to store the result            if (!screenshotCanvas) {                screenshotCanvas = document.createElement('canvas');            }            screenshotCanvas.width = width;            screenshotCanvas.height = height;            var context = screenshotCanvas.getContext('2d');            // Copy the pixels to a 2D canvas            var imageData = context.createImageData(width, height);            //cast is due to ts error in lib.d.ts, see here - https://github.com/Microsoft/TypeScript/issues/949            var castData = imageData.data;            castData.set(data);            context.putImageData(imageData, 0, 0);            return imageData.data;        };

Override!  yay!  This should work fine. I call it "hijacking" a framework function (customizing)... and it feels really good when it works.  :)  Watch your console messages to make sure the framework is calling YOUR special version.  There might be better ways to do this, but, this might work.  Hopefully, others will comment.  Be well!

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