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

4 Likes

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

2 Likes

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

2 Likes

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)