Render scene on PNG

[spritefire]

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?

 

[RaananW]

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. 

[spritefire]

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.

[Wingnut]

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!

[spritefire]

Thanks!!

(been away a bit doing studies but should be back here a bit more now that an assignment is out of the way)