Using one scene on multiple canvases

I’m trying to use the same scene, but render them on 2 different canvases, and then for each canvas use a different camera angle.

All I can seem to get working now is have 2 instances of Engine, which is fine, but then to get one scene to render on both Engines/Canvases doesn’t seem to be possible, since the Scene wants an ‘engine’ instance.

  • I also want to avoid having 1 canvas with 2 viewports.
  • I want to avoid having 2 instances of the same scene, basically doing double the work.

Is it possible to just have one canvas re-use the scene data that was rendered on another canvas (I guess that means there is always one ‘first’ scene with a parent canvas, and then other canvasses can ‘inherit’ the scene without having to recalculate the scene, but only a different camera angle)

Unfortunately this is not possible. A scene is attached to an engine which in turn belongs to a canvas.

Your best bet here is to synchronize 2 instances of your scene

Would viewports be of any use to you Use Multi-Views - Babylon.js Documentation?

I also encountered this problem, in the same scenario, using multiple canvas (or small map), and then the different camera can be keystrokes, I implemented a before, in the current scenario, create multiple RenderTargetTexture, rendering the camera captured data to a different texture, and for each individual keystrokes camera, it’s a pity that in addition to the main camera, other camera button operation is useless

That’s too bad, it’s possible with threejs, where you can share 1 scene between 2 canvases, which is a lot more resource friendly. But I switched to babylon because it seems better maintained and more suitable to my needs (e.g. better typescript support)

I guess it’s a bit of an edge case, but I want to have multiple canvases on a page with other html spread out in between the 2 canvasses, so I can’t cleanly have 2 separate canvasses share 1 scene, with different camera angles (think ue4/udk camera views which are movable)

Well it is not supported now but I think we can definitely work on it for 4.1

Does this feature include babylon?I have many pages that I want to share a scene so that I don’t need to load it again.

Well so far @TrySpace did not create the issue on the repo but this is something I’m keen to look into if there is a need

For the better HTML implementation it would be nice to have one engine for several canvas!

This is very cool feature! Would be interesting to see some use cases (I also will provide some demos later).

The main use case I can think of is to have multiple 3D rendering on your page without consuming too much resources (could be an editor, or just 3D rendering across text on your page)