Multiple canvases, multiple scenes

Questions
1

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
image1920×967 26 KB

What am I missing?


  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]);
2

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

3

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
image1920×1080 101 KB

What I want:

image
image1920×1080 130 KB

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.

4

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?

5

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 :slight_smile: You can put the second skybox far far away from the first