Single scene WEB EXPERIMENTAL
In Babylon.js, working with multiple canvases allows you to render a single scene 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 a single scene. With Reactylon, if you have n canvases and 1 corresponding scene, 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.
<canvas ref={canvas => { canvasesRef.current[0] = canvas as HTMLCanvasElement }} id='canvas-1' />
<canvas ref={canvas => { canvasesRef.current[1] = canvas as HTMLCanvasElement }} id='canvas-2' />
<canvas ref={canvas => { canvasesRef.current[2] = canvas as HTMLCanvasElement }} id='canvas-3' />
<canvas ref={canvas => { canvasesRef.current[3] = canvas as HTMLCanvasElement }} id='canvas-4' />
// ...
<Engine antialias isMultipleCanvas>
<Scene>
<Content canvasesRef={canvasesRef} />
</Scene>
</Engine>After that, simply pass each canvas to its corresponding camera by using canvas prop.
Check out the Custom Props section to learn more about the canvas property.
In the following example, four distinct canvases display the same scene, each from a different camera perspective. When the Jaguar C-X75 model is loaded, a rotation is applied to all four wheels. Subsequently, four separate cameras are set up, each positioned at different angles to view the model from unique viewpoints.
const scene = useScene();
const [jaguar, setJaguar] = useState<Array<TransformNode>>([]);
useEffect(() => {
scene.createDefaultLight();
engine.displayLoadingUI();
loadAssetContainerAsync('/meshes/jaguar/jaguar.glb', scene).then(container => {
const jaguar = container.transformNodes as Array<TransformNode>;
const wheelsNames = ['flt', 'frt', 'blt', 'brt'];
const wheels = jaguar.filter(mesh => wheelsNames.includes(mesh.name));
camerasRefs.current['camera-2']!.position = wheels.find(wheel => wheel.name === 'brt')!.position.add(new Vector3(-0.1, 0, -1.9)) as Vector3;
camerasRefs.current['camera-3']!.position = new Vector3(-0.7, 1.7, -0.5);
container.addAllToScene();
engine.hideLoadingUI();
const rotationQuaternion = Quaternion.RotationAxis(Axis.X, Tools.ToRadians(-1));
scene.registerBeforeRender(() => {
wheels.forEach(wheel => wheel.rotationQuaternion?.multiplyInPlace(rotationQuaternion));
})
});
}, [])
// ...
return (
<>
<arcRotateCamera canvas={canvasesRef.current[0]} ref={ref => camerasRefs.current['camera-1'] = ref} name='camera-1' alpha={Tools.ToRadians(60)} beta={Tools.ToRadians(70)} radius={12} target={Vector3.Zero()} />
<universalCamera canvas={canvasesRef.current[1]} ref={ref => camerasRefs.current['camera-2'] = ref} name='camera-2' position={Vector3.Zero()} />
<universalCamera canvas={canvasesRef.current[2]} ref={ref => camerasRefs.current['camera-3'] = ref} name='camera-3' position={Vector3.Zero()} />
<arcRotateCamera canvas={canvasesRef.current[3]} ref={ref => camerasRefs.current['camera-4'] = ref} name='camera-4' alpha={Tools.ToRadians(0)} beta={Tools.ToRadians(70)} radius={13} target={Vector3.Zero()} />
</>
);Internally, Reactylon manages the engine’s views registration and dynamically handles the active camera 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/.
