Multiple scenes WEB EXPERIMENTAL
In Babylon.js, working with multiple canvases allows you to render mutiple scenes to multiple <canvas> elements within the same HTML page. This is useful when you want to create complex applications, such as split-screen games, side-by-side visualizations, or interactive applications with multiple views or contexts.
Reactylon provides an intuitive, out-of-the-box solution for handling multiple canvases with multiple scenes. With Reactylon, if you have n canvases and n corresponding scenes, all you need to do is create your canvases in the HTML (where you have full control over their dimensions, positioning, and other properties) and pass the prop isMultipleCanvas to Engine component. After that, simply pass each canvas to its corresponding scene.
In the following example, four different scenes are rendered in four different canvases.
<canvas ref={canvas1Ref} id='canvas-1' />
<canvas ref={canvas2Ref} id='canvas-2' />
<canvas ref={canvas3Ref} id='canvas-3' />
<canvas ref={canvas4Ref} id='canvas-4' />
// ...
<Engine antialias isMultipleCanvas>
<Scene onSceneReady={(scene) => createDefaultCameraOrLight(scene, 5, undefined, 70)} canvas={canvas1Ref}><box name='box' /></Scene>
<Scene onSceneReady={(scene) => createDefaultCameraOrLight(scene, 5, undefined, 70)} canvas={canvas2Ref}><sphere name='sphere' /></Scene>
<Scene onSceneReady={(scene) => createDefaultCameraOrLight(scene, 5, undefined, 70)} canvas={canvas3Ref}><torus name='torus' options={{ thickness: 0.2 }} /></Scene>
<Scene onSceneReady={(scene) => createDefaultCameraOrLight(scene, 5, undefined, 70)} canvas={canvas4Ref}><cylinder name='cone' options={{ diameterTop: 0 }} /></Scene>
</Engine>Internally, Reactylon manages the engine’s views registration and dynamically handles the active scene by tracking which canvas is currently active (e.g., the one that was clicked). This allows seamless interaction between multiple canvases and their scenes, without requiring complex manual setup.
Working with multiple canvases is an advanced concept in Babylon.js, and Reactylon aims to simplify the most common use cases out-of-the-box. If you require more customization or prefer a different approach than the one provided by Reactylon, simply avoid setting the isMultipleCanvas property, and manage the view’s lifecycle directly with Babylon.js.
Learn More
For more advanced use cases and additional context, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/scene/multiCanvas/.
