Rapidly change camera view and take snapshot images of canvas

This topic has 3 replies, 2 voices, and was last updated 6 years, 4 months ago by Yuri Kovelenov.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
2018-06-28 at 7:28 pm #5311
pharken
Customer
Hi,
I’m attempting to progammatically rotate the camera multiple times in a loop and take a snapshot image each time. The issue I’m encountering is that some of the resulting images are blank. Is there a callback on the animate function that I’m not seeing?

My code:
`myViews.forEach( function (view) {
var $frame = $container.find(‘iframe’);
var theContentWindow = iframeWindow.contentWindow;
theContentWindow.v3dApp.ExternalInterface.setCameraView(view.name, null);
var canvasData = captureCanvasSnapshot();
saveSnapshot(canvasData);
});`

Verge3D app js file:
```
app.ExternalInterface.setCameraView = function(view, duration){
    if (typeof duration === "undefined") {
        duration = 0.0;
    }
	
    var cameraPositions = {
        "FRONT_VIEW"   : { "cameraPositionObjName" :  "FRONT_CAMERA_POSITION",   "cameraTargetObjName" :  "OTHER_CAMERA_TARGET"},
        "RIGHT_VIEW"   : { "cameraPositionObjName" :  "RIGHT_CAMERA_POSITION",   "cameraTargetObjName" :  "OTHER_CAMERA_TARGET" },
        "LEFT_VIEW"    : { "cameraPositionObjName" :  "LEFT_CAMERA_POSITION",    "cameraTargetObjName" :  "OTHER_CAMERA_TARGET" },
        "TOP_VIEW"     : { "cameraPositionObjName" :  "TOP_CAMERA_POSITION",     "cameraTargetObjName" :  "OTHER_CAMERA_TARGET" },
    }
			
    if (typeof cameraPositions[view] !== "undefined"){			
        var cameraPos = v3dApp.scene.getObjectByName(cameraPositions[view].cameraPositionObjName).position;
        var targetPos = v3dApp.scene.getObjectByName(cameraPositions[view].cameraTargetObjName).position;
		
        if (!v3dApp.controls.inTween){
            v3dApp.controls.tween(cameraPos, targetPos, duration);
        }
    } 
    v3dApp.animate();
}
```
Your thoughts?
Thank you
2018-06-29 at 7:23 am #5315
Yuri Kovelenov
Staff
Hi,

pharken wrote:

some of the resulting images are blank

You should probably enable the preserveDrawingBuffer property for the WebGL context:
```
var app = new V3DPlayer('container', { preserveDrawingBuffer: true }, 
        new v3d.SimplePreloader({ container: 'container' }));
```
Chief 3D Verger | LinkedIn | Twitter
2018-06-29 at 2:25 pm #5353

pharken
Customer

Thank you, but I should be more clear as to the problem.
The use case that I’m trying to solve is to auto-capture and save snapshots of the image canvas for some predefined camera views

The images are being captured. Just not all of them. Some of them, are intermittently captured as empty canvas

The camera views are being changed and the images captured within a loop in rapid succession. So fast, that I cannot see the canvas change until the last camera view is changed.
I’ve tried to put delays in the loop after each camera view change. The delay occurs, but the camera views do not change during the delay.

I was hoping that there was a callback on the animate function, but I dont see one in the code. Perhaps there is a way to override the animate function an provide this callback ?
But then again, maybe this is not the correct solution.

2018-06-29 at 3:03 pm #5357
Yuri Kovelenov
Staff
pharken wrote:

was hoping that there was a callback on the animate function, but I dont see one in the code.

Ah, I see. You can do that by pushing your function to the renderCallbacks array, which is the property of the app variable.
```
appInstance.renderCallbacks.push(callback);
```
Chief 3D Verger | LinkedIn | Twitter
Author

Posts