# Multiple canvases, multiple scenes

**URL:** <https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209>\
**Category:** Questions\
**Created:** [August 20, 2022, 12:16pm UTC](https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209 "2022-08-20T12:16:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Natalie\_Driscoll](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/natalie_driscoll/32/21387_2.png) [@Natalie\_Driscoll](https://forum.babylonjs.com/u/Natalie_Driscoll)\
**Post date:** [August 20, 2022, 12:16pm UTC](https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209/1 "2022-08-20T12:16:17Z")

</div>

Hi gang, possibly-not-that-quick question.

I’m running Babylon in a React project. I’ve had one scene showing for months, and am trying to add a second. The second scene is displayed in a modal, a window that sits in the centre of the screen, over the top of the first. The first scene uses a different skybox to the first, otherwise I’d just use a second camera positioned elsewhere in the first scene and use ViewPorts. The second screen is the same size as the first (per the recommendation in the documentation), but trimmed down using CSS clip-path. As this is still in the “how do I make this work” stage, the path is currently just a circle, and the second canvas is offset by 80px.

I’ve followed every piece of instruction I can find, I’ve scoured the documentation, I’ve spent several days just blindly guessing, but I can’t get it to work correctly.

The nature of the game I’m building makes it a little hard to see, so I’ve highlighted the edge of the “modal” in the screenshot below. The view is identical to the one exterior, albeit clipped and 80px down the page, when it should be showing the second scene

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/d/5d165ff60e14c6b5ca925907b0e6280dfb186480.jpeg)

What am I missing?

```auto

  useEffect(() => {
    if (!done && engine && canvasOne.current && canvasTwo.current && multiverseScene && planetViewScene) {
      engine.runRenderLoop(() => {
        multiverseScene?.render()
        planetViewScene?.render()
      });
      const multiverseCamera = new UniversalCamera("multiverseCamera", new Vector3(0, 0, 0), multiverseScene)
      const planetViewCamera = new ArcRotateCamera("planetViewCamera", 90, 90, 40, new Vector3(0, 10, 0), planetViewScene)
      setMultiverseEngineView(engine.registerView(canvasOne.current, multiverseCamera))
      setPlanetViewEngineView(engine.registerView(canvasTwo.current, planetViewCamera))
      multiverseCamera.attachControl(canvasOne.current as HTMLCanvasElement, true);
      planetViewScene.autoClear = false
      const resize = () => {
        multiverseScene.getEngine().resize();
        planetViewScene.getEngine().resize();
      };

      if (window) {
        window.addEventListener("resize", resize);
      }

      if (multiverseScene.isReady()) {
        onMultiverseSceneReady(multiverseScene, myPlayerID);
      } else {
        multiverseScene.onReadyObservable.addOnce((scene) => onMultiverseSceneReady(scene, myPlayerID));
      }

      if (planetViewScene.isReady()) {
        onPlanetViewSceneReady(planetViewScene);
      } else {
        planetViewScene.onReadyObservable.addOnce((scene) => onPlanetViewSceneReady(scene));
      }
      setDone(true)
    }
  }, [done, onRender, onMultiverseSceneReady, onPlanetViewSceneReady, myPlayerID, engine, planetViewScene, multiverseScene, flags.ui.view]);

```

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [August 20, 2022, 7:47pm UTC](https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209/2 "2022-08-20T19:47:21Z")

</div>

What is the error your seeing? And what is the behavior that you want to see?

---

<div class="post-metadata">

**Author:** ![Natalie\_Driscoll](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/natalie_driscoll/32/21387_2.png) [@Natalie\_Driscoll](https://forum.babylonjs.com/u/Natalie_Driscoll)\
**Post date:** [August 21, 2022, 1:14pm UTC](https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209/3 "2022-08-21T13:14:17Z")

</div>

Hi there, sorry, I was a little vague, and my screencap was rubbish. I have now modified my clip-path to look how I want it to look, that is, a modal. Unfortunately I am not able to access my development machine at the moment, so I’m afraid Paint will have to suffice.

What I am seeing (the outline is for illustrative purposes only; both canvases are displaying the same scene despite using different cameras which have been explicitly assigned to different scenes):

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/f/8f3657e02bb34fdad0ab69cd035cbc5b0df0fc21.png)

What I want:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/060b67e5f7a7201821861510d48644ca229b5f90.jpeg)

The section with the green background is one skybox. The section with the black background is a different scene, using a different skybox.

And the weirdest part is that I’m not generating an error.

---

<div class="post-metadata">

**Author:** ![Regit](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@Regit](https://forum.babylonjs.com/u/Regit)\
**Post date:** [August 23, 2022, 11:18am UTC](https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209/4 "2022-08-23T11:18:18Z")

</div>

Just throwing my thoughts in… your first pic looks like your inner canvas is not rendering anything. So you just see the first one thinking the second one is somehow rendering the same? Can you confirm that your inner canvas is rendering and on top of the first one?

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 21, 2022, 11:51am UTC](https://forum.babylonjs.com/t/multiple-canvases-multiple-scenes/33209/5 "2022-09-21T11:51:54Z")

</div>

> [@Natalie\_Driscoll](#):
>
> The first scene uses a different skybox to the first, otherwise I’d just use a second camera positioned elsewhere in the first scene and use ViewPorts.

Hey there! I’m not sure if you were able to figure the issue out, but I just wanted to point out that you can have two skyboxes on the same scene, as they’re just cube meshes 🙂 You can put the second skybox far far away from the first