Display babylon.js scene across multiple screens

I am planning to migrate my project from three.js to Babylon.js

Is it possible to display the same scene in different browser windows? or even in Fullscreen across multiple displays?

PerspectiveCamera.setViewOffset can be used in three.js to choose which portion of a larger image to draw.

The result is something like this:Sync Three.js

1 Like

Babylon will adjust to the size of your canvas, so if you display the canvas on two different screens it will render the scene on those two screens. You can also render the scene to two different canvases, this requires a slight change in your render loop but I don’t see a reason it wouldn’t work.
Every camera has a viewport object, with which you can choose what portion of the screen you are using. From reading the three.js docs it seems like you can define the actual pixel size you want to use. in babylon the canvas size to be used is calculated based on the viewport object of the camera and the actual size of the canvas - a slightly different approach for multi-screen rendering. So you can define a canvas per screen and configure the viewport to render on this specific canvas or stretch one single canvas across screens and let babylon render the entire scene.

I hope it makes sense! (And I hope I understood the question correctly :slight_smile: )

1 Like

Thank you very much RaananW, your answer helped me a lot, I succeeded in achieving what I wanted

I set the canvas width and height to the same pixel size as the screen(I only have one monitor right now, so I’ll just set it to the width and height of one monitor. When I have more than one monitor, I will set it to the combined width and height of the monitors), and then set the camera viewport in renderLoop

engine.runRenderLoop(() => {
camera.viewport = new BABYLON.Viewport(-(window.screenX / fullWidth), window.screenY / fullHeight, 1, 1);

Then multiple Windows are opened on a screen, and each window will show its picture relative to the overall canvas

Thanks again RaananW :wink: