How to get screenshot in Multiple Scenes when scene is not rendered?

Questions
1

I use Overlay Multiple Scenes in my project, and CreateScreenshot only receive Camera as a parameter. what can I do for getting a screenshot when scene is not rendered

https://www.babylonjs-playground.com/#L0IMUD#1

2

I think that you can maybe capture the back buffer with:

BABYLON.Tools.DumpFramebuffer(width, height, engine, successCallback, mimeType, fileName);
3

It looks like drawImage method, but I want to get the screenshot of offline scene. For example:

{ [foregroundScene1, backgroundScene1], [foregroundScene2, backgroundScene2] }

now, foregroundScene1 and backgroundScene1 is rendering, and how to get screenshot of foregroundScene2 and backgroundScene2 ?

The solution I can think of is as follows:

BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, foreCamera, {precision:1}, function(data) {
        var img = document.createElement('img');
        img.src = data;            
        img.onload =function() {
            var foreImg  = img;
            BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, backCamera, {precision:1}, 
             function(data) {
                  var img = document.createElement('img');
                  img.src = data;            
                  img.onload =function() {
                       var backImg = img;

                       ctx.drawImage(foreImg);
                       ctx.drawImage(backImg);
                  }
        });
   }

});

Is there a better way? thank you

4

Nope this one is perfectly fine!

5
  1. I found if the width and height is not an integer, DumpFramebuffer would to receive an error, similar to “Source is too large”.
  2. It is very strange, I got a blank picture when I use DumpFramebuffer to capture a screenshot, the same happens with DrawImage.
BABYLON.Tools.DumpFramebuffer(200, 200, engine, function(data){
        var img = document.createElement('img');
        img.src = data;
        img.onload =function() {
            if(typeof(callBack)=="function"){
                callBack(img);
            }
        }
    });

var canvas = document.createElement(“canvas”);
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext(“2d”);

context.drawImage(engine.getRenderingCanvas() , 0 , 0 , 200 , 200, 0, 0, 200, 200);

var base64 = canvas.toDataURL(“image/png”);

var img = document.createElement(‘img’);
img.src = base64;

img.onload =function() {
if(typeof(callBack)==“function”){
callBack(img);
}
}

7

Can you make sure you create your engine like this:

var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true});
8

I forgot it. thank you!

It seems CreateScreenshotUsingRenderTarget can not capture Layer background
https://www.babylonjs-playground.com/#3QW4J1#357

9

yes this is expected. It only captures what can be rendered inside a RTT

10

thank you very much!