Creating multiple ScreenShots from different angles

Questions
1

Hi there,

my method creates several screenshots and returns them as array of objects
The camera angles are defined in a json dataset.

My problem is:
Using CreateScreenshot works fine - but image has no antialiasing and png ist not transparent.
Using CreateScreenshotUsingRenderTarget hangs babylon - the observer seems to be called after each render() and isn’t deleted but he is defined as addOnce…

Andy comments that can help me would be nice!

 async createScreenshots(){
        var self = this;
        
        var screenShotsArray = [];
        var screenShotsCount = self.rackCombo.cameraPositions[self.jsonData.comboType.label].length;

        

        async function promiseScreenshot(alpha, beta) {
            let promise = new Promise(function (resolve, reject) {
                self.scene.activeCamera.alpha = alpha;
                self.scene.activeCamera.beta = beta;
                self.scene.activeCamera.zoomOn(self.scene.meshes, true);

                var observer = self.scene.onAfterRenderObservable.addOnce(function(){

                    // this works:
                    //BABYLON.Tools.CreateScreenshot(self.scene._engine, self.scene.activeCamera, 2048, function(data){ resolve(data);}, "image/png");     
                    
                    // this doesn't
                    BABYLON.Tools.CreateScreenshotUsingRenderTarget(self.scene._engine, self.scene.activeCamera, 2048, function(data){
                        resolve(data);
                    }, "image/png", 1, true);
                });
                self.scene.render();
            });
            return promise;
        }
        for (var s=0; s<screenShotsCount; s++){
            let alpha = self.rackCombo.cameraPositions[self.jsonData.comboType.label]
            let screenShot = await promiseScreenshot(self.rackCombo.cameraPositions[self.jsonData.comboType.label][s][0], self.rackCombo.cameraPositions[self.jsonData.comboType.label][s][1]);
            screenShotsArray.push(screenShot);
        }

        return screenShotsArray;
    }
2

HAHA, writing down the problem can be so inspiring :wink:

 var observer = self.scene.onAfterRenderObservable.add(function(){
                    self.scene.onAfterRenderObservable.remove(observer);

this seems to help: “normal” add and first to do ist to remove the observer.

thx
Stefan

1 Like
3

It’s weird that the observer wouldn’t stop firing when using addOnce :thinking: Are you able to repro this on a Playground so we can take a look?

4

Don’t you need to resolve() in your addOnce() callback after the screenshot is taken?
edit: oh :man_facepalming: you did obviously
edit 2: you shouldn’t need to remove the observer - it should happen automatically with the addOnce. Were you able to share a playground?