Multi-canvas adding a view

Hey,

I read about multi-canvas support and I am slightly confused about the documentation. It states that I can create new views by using engine.registerView, this works fine and I can create a new small canvas (in the playground on the top left). The documentation also states: If a view is defined with a camera, the system will use it as the active camera to render the scene., but it does not state how to switch back to the camera which has been created for the first canvas. I also tried scene.activeCamera = camera, which, maybe for obvious reasons, did not work as expected.

So basically what I want to achieve is that the small canvas should only display the sphere, without any controls just in small, but the controls from the big canvas should stay the same as from the basic playground (normal functionality as if it would be without the multi-canvas functionality). In the screenshot at the bottom (with a little help of photoshop) there is a red and purple bordered canvas. In this case the red canvas should always stay the same. And the purple bordered canvas has controls and can be moved around. But I cannot make it work as soon as I attach the camera to the first registered view.

Thanks in advance :slightly_smiling_face:

Playground: https://playground.babylonjs.com/#Z9SXV4#1

Adding @Evgeni_Popov who rocks this area.

Once you register a view, the canvas passed to the engine at creation time can’t be used anymore for your own scene rendering: it is used under the hood by the engine as a temporary canvas where the scene is rendered before being copied to a canvas view.

So, you should create two canvas instead:
https://playground.babylonjs.com/#Z9SXV4#8

Note that for clarity I have provided an implementation of createEngine so that I can create an engine with my own canvas element and not use the one of the Playground: as explained, that canvas will be used under the hood and is not visible on screen.

2 Likes

This makes total sense, thanks a lot!

Also a follow-up off-topic question. Changing cameras (e.g. from ArcRotateCamera to FreeCamera) on an existing view is not possible anymore right? As scene.activeCamera = newCamera would not work anymore.

The only possible solution I can think of is that I need to change between two existing views, where one canvas has the ArcRotateCamera and the other canvas has the FreeCamera attached.

Yes, changing the camera of a view is possible: you can access the list of all views by engine.views and change the camera doing engine.views[1].camera=myCamera (to change the camera of the second view).

3 Likes

Wow. This is truly amazing! I highly appreciate your help, thanks :+1:

1 Like