Multiple Scene Usage

I’m having a noob moment as I have not touched Babylon in a while. What is the most direct way to position multiple, independent scenes within a canvas?

So in the code below (sorry could not playground this), one scene should occupy the left half of the canvas with a blue background. A second scene should occupy the right half of the canvas with a red background.

class Destiny{ constructor(canvasID) { this.canvas = document.getElementById(canvasID); this.engine = new BABYLON.Engine(this.canvas, true); this.tS = this.tCreate(this); // display the timeline's scene this.pS = this.pCreate(this); // display the project's scene this.launch(); }
//Timeline Creation
    var tScene = new BABYLON.Scene(this.engine);
    tScene.clearColor = BABYLON.Color3.Blue();
    tScene.x = 0;
    tScene.width = this.canvas.width/2; // scale to half the width of the screen
    var tSCamera = new BABYLON.ArcRotateCamera("camera1", 0,  Math.PI / 2, 10, BABYLON.Vector3.Zero(), tScene);
    tSCamera.attachControl(this.canvas, true);
    var tSLight = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), tScene);
    tSLight.intensity = 0.9;
    var tSTestShape = BABYLON.Mesh.CreateSphere("sphere1", 32, 1, tScene);
    return tScene;

//Project Creation
    var pScene = new BABYLON.Scene(this.engine);
    pScene.clearColor = BABYLON.Color3.Red();
    pScene.x = this.canvas.width/2; // half way across
    pScene.width= this.canvas.width/2; // fill until end
    var pSCamera = new BABYLON.ArcRotateCamera("camera2", 0,  Math.PI / 2, 10, BABYLON.Vector3.Zero(), pScene);
    pSCamera.attachControl(this.canvas, true);
    var pSLight = new BABYLON.HemisphericLight("light2", new BABYLON.Vector3(0, 1, 0), pScene);
    pSLight.intensity = 0.9;
    var pSTestShape = BABYLON.Mesh.CreateSphere("sphere2", 16, 1, pScene);
    return pScene;

    this.engine.runRenderLoop( ()=> { // Start up the engine
    window.addEventListener("resize", ()=> { 


I guess you are looking for viewports :slight_smile:

1 Like

Maybe an example will help: If I have a tech tree in Scene 1. I could move around it. It displays info about the tech ext. However, if you click on a tech tree node, maybe that causes something to happen in Scene 2. This is not just a GUI overlay thing, but could be full on 3d scenes, which could be semi resource intensive.

I thought about viewports, but viewports use the same scene and same assets, and yes things can be hidden based on camera binding to achieve a similar end effect, but all the assets still exist in the same scene. I worry optimization would suffer. It also feels messier to code.

I think I want completely unique scenes (All different assets, ext…) both living within the same Babylon engine instance. Each does its own thing. But, each unique scene is loosely related to the other as each scene has the potential to influence the other through a set of helper functions. I was thinking this route would be best because with separate scenes you could throttle down rendering of assets in an unfocused scene, reload just the scene needing updated leaving the other for continued interaction and in my mind separate scenes seems cleaner for asset management. But I am a casual Babylon user and am open to suggestions. So if you say, no, just use viewports, I will stop fighting windmills and comply.

You can do multiple scenes Use Multiple Scenes - Babylon.js Documentation. Never tried but my guess is you would have to combine with viewports to split left and right.

You can do the same with scenes as well:

1 Like

It seems like most are migrating toward the viewport method, so I will go that route.