solved Multi View Screenshots?

[iamnick]

Me again!

I needed a solution to create a screen capture of multiple sides of an object, and I felt like multi view would have been perfect for this.  Except, the screen capture functions only take input from a single camera when in multi view situations you end up with an array of cameras w/ different viewport rects.  I've created a playground with the setup of what I'd like to do.

One thing to note, the GUI seems to display on all 4 views, and the only active button is the one in the upper right view.

Is there a better solution that i'm not seeing, or something that I can improve to make this work?

https://www.babylonjs-playground.com/#9DHWBU

Thanks!

[kcoley]

Hi @iamnick.  Are you wanting to make a screenshot from your whole canvas?  You can try converting it to a dataurl:

let dataURL = engine.getRenderingCanvas().toDataURL();
console.log(dataURL);

I believe the issue you are hitting is because the top right field may be the last activeCamera set, so is treated as the scene active camera.

[iamnick]

1 hour ago, kcoley said:

Hi @iamnick.  Are you wanting to make a screenshot from your whole canvas?  You can try converting it to a dataurl:

let dataURL = engine.getRenderingCanvas().toDataURL();
console.log(dataURL);

I believe the issue you are hitting is because the top right field may be the last activeCamera set, so is treated as the scene active camera.

@kcoley Indeed I would like to take a screenshot of the canvas as a whole but, similar to the CreateScreenshot method, I was hoping for the screenshot to be different dimensions than the canvas.

Updated my playground to include the DataURL screenshot button and logged some information about the cameras.

activeCamera is actually 'Camera0' which should be the top-left camera.  Still unsure why GUI is behaving the way it is.

https://www.babylonjs-playground.com/#9DHWBU#1

[Arte]

Hi @iamnick

 

I'm not sure whether it will help, but take a look at cameraToUseForPointers.

scene.cameraToUseForPointers = scene.activeCameras[0];

[iamnick]

Hey @Arte,

Decided to just create the GUI as a separate scene and render it after the initial scene.

Now back to the original question.  Would anyone know a way that I can preserve the rendertarget so that my screenshot shows all 4 views rather than the last one rendered?

https://www.babylonjs-playground.com/#9DHWBU#6

[iamnick]

I think I figured it out using observables and dumpframebuffer.  The "Dump Framebuffer" button should take a screenshot with the resolution 1920x1080 and hide the GUI scene from rendering into the image.

https://www.babylonjs-playground.com/#9DHWBU#7