Two Canvas, Two Engines

[Viriatos]

Hey folks,

 

I'd like to know if you can have two canvas each one with a different scene. I've tried to accomplish it, but it seems the seconds one overrides the first one. 

Any tips?

 

Cheers,

Viriatos

[Temechon]

Hey Viriatos, 

 

Can you share your code ? I never tried to do it, but I don't see why it does not work.

 

Cheers, 

[Viriatos]

Here it is,

 

First engine used to draw a cube:

(function (window, BABYLON) {        var canvas = document.getElementById("cubeScene");    // Check support    if (!BABYLON.Engine.isSupported()) {        window.alert('Browser not supported');    } else {        // Babylon        var engineCube = new BABYLON.Engine(canvas, true);        //Creating scene (in "Scene.js")        scene = createSceneCube(engineCube);        scene.activeCamera.attachControl(canvas);        // Once the scene is loaded, just register a render loop to render it        engineCube.runRenderLoop(function () {            scene.activeCamera.attachControl(canvas);            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engineCube.resize();        });    }    }(window, BABYLON));

Second engine to draw a Sphere:

(function (window, BABYLON) {        var canvas = document.getElementById("sphereScene");    // Check support    if (!BABYLON.Engine.isSupported()) {        window.alert('Browser not supported');    } else {        // Babylon        var engine = new BABYLON.Engine(canvas, true);        //Creating scene (in "Scene.js")        scene = createScene(engine);        scene.activeCamera.attachControl(canvas);        // Once the scene is loaded, just register a render loop to render it        engine.runRenderLoop(function () {            scene.activeCamera.attachControl(canvas);            scene.render();        });        // Resize        window.addEventListener("resize", function () {            engine.resize();        });    }    }(window, BABYLON));

The scenes - Will only post one, cause they are the same but one draw a cube another one a sphere. But the idea is the same. And yes, There are two methods, one called createScene  and other createSceneCube.

function createScene(engine) {    //Creation of the scene     var scene = new BABYLON.Scene(engine);    scene.clearColor = new BABYLON.Color4(0,0,0,0);    //Adding of the Arc Rotate Camera    var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", -Math.PI/2, Math.PI/2, 2, new BABYLON.Vector3(0, 0, 0), scene);    var freeCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -4), scene);    var postProcess = new BABYLON.FxaaPostProcess("fxaa", 1.0, null, null, engine, true);    freeCamera.attachPostProcess(postProcess);    var light0 = new BABYLON.SpotLight("Spot0", new BABYLON.Vector3(0, 0, -2), new BABYLON.Vector3(0, 0, 2), 1.1, 2, scene);    light0.diffuse = new BABYLON.Color3(1, 1, 1);       var light1 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);    light1.diffuse = new BABYLON.Color3(1, 1, 1);    light1.specular = new BABYLON.Color3(0, 0, 0);    light1.groundColor = new BABYLON.Color3(0, 0, 0);        var light1 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, -1, 0), scene);    light1.diffuse = new BABYLON.Color3(1, 1, 1);    light1.specular = new BABYLON.Color3(0.4, 0.4, 0.4);    light1.groundColor = new BABYLON.Color3(0, 0, 0); var sphere = BABYLON.Mesh.CreateSphere("Sphere", 0, 1.0, scene);    sphere.position = new BABYLON.Vector3(0,0,0);//Position by a vector    sphere.rotation.y = 0.5;    sphere.isVisible = 1;return scene;}

The Index.html just has two divs:

...        <div class="canvas-container sphere">            <canvas id="sphereScene"></canvas>        </div>                <div class="canvas-container cube">            <canvas id="cubeScene"></canvas>        </div>...

 

[Temechon]

i tried your code, but no problem for me, I have two engine and two scenes : 

http://i.imgur.com/JA0vQn6.png

 

But i think I know where your problem comes from

 

Add the keyword 'var' for your two scenes, like this : 

//Creating scene (in "Scene.js")var scene = createScene(engine);

If you don't do it, scene is considered as a global variable, and as you have only one global variable called scene, you'll have only one scene rendered.

 

Cheers !

[Viriatos]

Oh man, you saved my day! Cheers Temechon