Generate several screenshot from scene and save it on cloud

Questions
1

Hi,

I just had bring back a project with Babylon js inside and I’m a beginer on it. I have done several research on my problem but can’t find a good way to do it.

We use Babylon to create a container with several things placed in it. The generation is from a json in a dynamic call.
I would like to take 3 to 5 screenshots from different angle vision (front, side1, side 2, top for example). These could be done just on render if easier, but I need to store these screen automatically on a server or a cloud without asking the user to save it. I would manage the ‘if exists condition’ by myself.

I tried to create some new cameras after the scene.render() using CreateScreenshot and Babylon.ArcRotateCamera, but I always have a side screen of my render, and I have to validate the download each time.

 var Scene = CreateScene(Solution, Canvas, Engine);
 var frontCam = new BABYLON.ArcRotateCamera("cameraF", -Math.PI / 2, Math.PI / 2, 0, new BABYLON.Vector3(0, 0, 0), Scene, false);
    var backCam = new BABYLON.ArcRotateCamera("cameraB", Math.PI / 2, Math.PI / 2, 30, new BABYLON.Vector3(0, 0, 0), Scene, false);
    var sideCam = new BABYLON.ArcRotateCamera("cameraC", 0, Math.PI, 0, new BABYLON.Vector3(0, 0, 0), Scene, false);
    BABYLON.Tools.CreateScreenshot(Engine, sideCam, 1600);
    BABYLON.Tools.CreateScreenshot(Engine, frontCam , 1600);
    BABYLON.Tools.CreateScreenshot(Engine, backCam, 1600);

I was thinking about “moving” the camera before each screen and use the scene.activeCamera but I"m not sure about the way to do it too.

What the best way to do it?

Thanks a lot for your help.

2

yup setting activeCamera and calling again scene.render() followed by createScreenshot is the way to go :slight_smile:

1 Like
3

Here’s a couple of additional resources that may help as well:

Example playground - Press Spacebar to take a screenshot
https://playground.babylonjs.com/#3CWHY5

2 Likes
4

Thanks a lot for your answer and your help. I have improve my approach to render the scene for each camera and then managed to have my 3 screenshots, and after my 3D render like this:

 setInterval(function () {
        switch (idCam) {
            case 0:
                var frontCam = new BABYLON.ArcRotateCamera("cameraF", -Math.PI / 2, Math.PI / 2, 200, new BABYLON.Vector3(0, 0, 0), Scene, false);
                Scene.activeCamera = frontCam;
                Scene.render();
                BABYLON.Tools.CreateScreenshotUsingRenderTarget(Engine, frontCam, 1600);
                idCam++;
                break;
            case 1:
                var backCam = new BABYLON.ArcRotateCamera("cameraB", Math.PI / 2, Math.PI / 2, 100, new BABYLON.Vector3(0, 0, 0), Scene, false);
                Scene.activeCamera = backCam;
                Scene.render();
                BABYLON.Tools.CreateScreenshotUsingRenderTarget(Engine, backCam, 1600);
                idCam++;
                break;
            case 2:
                var sideCam = new BABYLON.ArcRotateCamera("cameraC", 0, Math.PI, 200, new BABYLON.Vector3(50, 0, 0), Scene, false);
                Scene.activeCamera = sideCam;
                Scene.render();
                BABYLON.Tools.CreateScreenshotUsingRenderTarget(Engine, sideCam, 1600);
                idCam++;
                break;
            default:
                Engine.stopRenderLoop();
                Engine.runRenderLoop(function () {
                    Scene.render();
                    GetCamera().attachControl(Canvas, true);
                    Scene.activeCamera = cameraPrincipal;
                });
                break;
        }
    }, 500)

I have to manage better my cameras to have the perfect angle I want, and automize the save of my screens on the cloud.

1 Like
5

Another question. I do not really understand how the download file works. Is it possible to ‘intercept’ or get the screenshot to download to force it to save elsewhere (on the disk or on the cloud)?

6

image
image917×292 16.1 KB

You can use callback function inside the method which contains “data” which is data64 encoded image. You can use that data + some server side code or API to send it or save it wherever you want.

1 Like
7

Ok thanks I test i immediatly. I hav not understood that in “data” we had the full information of the file when I read it.

Thanks

1 Like