Multiple screenshot from different camera in same scene

Questions
1

I have this setup where I have a single scene and multiple camera’s (an arcrotate and two free camera’s) at different angles.
If i try to take the screenshot of each free camera in the scene, the scene starts, what i think is, rendering all the different views to get the screenshot.

This causes the main view to flash a few times. However if I use a second scene, the camera’s loose their angle if the main (arc)cam is rotated. Is there a way to prevent the flashing without the need of a second scene? If not, is there a way to keep the free camera’s at the respective angle towards the model/mesh?

2

You can try to use CreateScreenShotUsingRenderTarget and see if it works for you.

3

Yes that’s what I’m currently using, but that makes the canvas jump between canvases and leaves the last screenshot / camera as the active camera.

4

Indeed, we do a scene.render() even in the CreateScreenShotUsingRenderTarget case, writing to the canvas in the process…

That’s because in the multi camera scenario, the current list of visible meshes could not be the list we need for the camera used by the screenshot. Doing a scene.render with the camera screenshot active will create the right list (there may be other reasons to call scene.render(), but that is one of them).

I don’t really see a way around that, except maybe using a “pass” post process and using that texture as your screenshot? For eg:

https://playground.babylonjs.com/#LRFB2D#116

5

I’m not sure what you mean with the “pass” post process, as far as my knowledge goes the camera used in the proces overwrites the default. Which, I think, would make the flash between camera’s still happen.

Let me rephrase my original question to the basic in what I’m trying to accomplish. Is it possible to create a screenshot off the front and of the back of a model without the “flash” of jumping between camera’s or seeing the canvas change?

6

I’ve also tried to add a second scene (a copy of the first) but in this case the position off my other camera’s are off, instead of one in the front and one in the back they both sow a front view. Despites the changes of making them arcrotatecamera’s and setting the default value with different alpha;

    this._camera_front = new BABYLON.ArcRotateCamera("cameraF", -Math.PI/2, Math.PI/2, 30,  new BABYLON.Vector3(0, 0, 0), this._scene_copy);
    this._camera_back = new BABYLON.ArcRotateCamera("cameraB", Math.PI/2, Math.PI/2, 30,  new BABYLON.Vector3(0, 0, 0), this._scene_copy);

if i change the scene to the original one, they both have the right location and will move if the original camera is moving. However if I use the scene_copy and I move the main camera both the _camera_front and _camera_back will look against an rotated object instead of keeping the front and back as they did in the scene

7

I’m not sure I understand everything that’s going on…

However, I don’t see how to avoid the flash as the scene needs to be rendered before the screenshot can be done, even if using 2 different scenes. Except if you create a specific engine instance for the copied scene, as in this case you will be able to render in a canvas that is not the canvas from your main engine.

8

At the moment I have this scene in which 3 camera’s are placed, all three have been turned into arcrotatecamera’s. Let’s call them Camera1, CameraF and CameraB.

Camera1 is used for the user to rotate his view around the object.
CameraF is used to create a screenshot from the front of the object.
CameraB is used to create a screenshot from the back of the object. No matter how much the user rotated around the object CameraF will always be at the front and CameraB always at te back.
However if i take a screenshot, these camera’s (F and B) will be active at the canvas.

In order to solve this issue and prevent this from happening.
I created a second scene that’s basically a copy from the original.
However in this scene my CameraF and CameraB are always in front of the object.
Despise setting them at a different alpha… they keep the same position. (This same code worked for the original scene, but does not work in the second scene)

    this._camera_front = new BABYLON.ArcRotateCamera("cameraF", -Math.PI/2, Math.PI/2, 30,  new BABYLON.Vector3(0, 0, 0), this._scene_copy);
    this._camera_back = new BABYLON.ArcRotateCamera("cameraB", Math.PI/2, Math.PI/2, 30,  new BABYLON.Vector3(0, 0, 0), this._scene_copy);

However rotating the object also rotates the object in the other scene, which is fine as long as the other camera’s (F and B) would also rotate along.

So, basically it comes to three issues;
issue 1; in the single scene example the flash happens while taking screenshots from different angles, as noted this won’t be an issue that can’t be solved.
issue 2; in the second example where I used two scenes I’m losing some functionality of orientation? position?. My camera’s don’t receive the position on which they should be according to the first, single scene, example.
issue 3; in the second example the camera’s don’t “rotate with the object” since they show always the view from a static position, if they object rotates, they show a side view instead of the front and back.

9

I’ve managed to solve the issue 2 & 3 by duplicating some more code, I used some materials used in the first scene and did not use an onBeforeRenderObservable for the second scene causing some issues regarding the positions and rotation of specific meshes.