Multiple Scene Usage

Questions
1

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
tCreate(){
    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.setTarget(BABYLON.Vector3.Zero());
    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
pCreate(){
    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.setTarget(BABYLON.Vector3.Zero());
    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;
}

launch(){
    this.engine.runRenderLoop( ()=> { // Start up the engine
        this.tS.render();
        this.pS.render();
    })
    window.addEventListener("resize", ()=> { 
        this.engine.resize();
    }) 
}

}
2

I guess you are looking for viewports :slight_smile:
https://www.babylonjs-playground.com/#17DP89#11

2 Likes
3

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.

4

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.

5

You can do the same with scenes as well: https://www.babylonjs-playground.com/#17DP89#13

2 Likes
6

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

7
Sorry for necro bumping,

but this post will be useful for stumblers and better than making a new one in my opinion.

@sebavan your example isn’t rendering two scenes, maybe something in Babylon changed since that time.

Here’s an updated example that renders two scenes (with one engine, and one canvas):

Render two scenes with one engine, one canvas | Babylon.js Playground (babylonjs-playground.com)

Additionally here’s a similar visual output, but using two viewports with a single scene (one engine, one canvas), and layer masks to make objects visible by one camera or the other:

Render two “scenes” with one scene, one engine, one canvas | Babylon.js Playground (babylonjs-playground.com)

8

yup scene rendering order changed with PG updates, so the good thing is that it is not a regression :slight_smile: