Best strategy for viewing animation at different times in multiple views

I want to view an animation at different frames. I want to present each the view of each frame in a separate view, preferably in it’s own canvas. There can be about 10-20 views.

What’s the best strategy for something like this? Can I tell Babylon “render this camera at this frame on this canvas”?

Any pointers appreciated!

BabylonJs supports multi canvases where each canvas is registered to a camera.

the tricky part is that you want to view different animation frames. since the animation is applied to a mesh. I would say maybe duplicate the model and assign the animation to each duplicate. this way you can control the current frame of each animation.

and you will need to use layerMasks so can each camera renders a specific version of the model.

1 Like

You can use animGroup.goToFrame in a scene.onBeforeCameraRenderObservable observer:


Thanks for the tips.

When I said “an animation” I actually meant hundreds of animations :slight_smile:
Copying meshes seems cumbersome in my scenario.

@Evgeni_Popov your tip might work!

1 Like

It seem that the onBeforeCameraRenderObservable is triggered before rendering to all views. That means all views will be rendered at the same frame.

Is there a way to render just one view?

Babylon.js Playground (
Slightly modified the case above.

Thanks, I was aware of viewports. Great to actually see them in use!

To make matters worse though, I would like to have separate canvases :slight_smile:

Using Multiple Canvases | Babylon.js Documentation (
This is the use of multi-canvas for the babylonjs documentation.

1 Like

You have engine.onBeforeViewRenderObservable which is triggered before a view is rendered.

1 Like