
## How to Use Multiple Scenes

To use multiple scenes, create them with

```javascript
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);
```

Then put the relevant camera, lights, and meshes inside each scene and call them in `runRenderLoop`.

```javascript
engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});
```

However, this simple code has a potential problem. Remember that each `scene.render` call will try to clear what has been rendered before, and to avoid one scene erasing what another has rendered, you need to set `scene.autoClear = false` on all the scenes rendered on "top" of others:

```javascript
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);
scene1.autoClear = false; 
```

```javascript
engine.runRenderLoop(function () {
  scene0.render();
  scene1.render(); // Since scene1's autoClear is false, it will not "erase" what scene0 has rendered.
});
```

### Multiple scenes on the Playground

However, there is a difference between writing multiple scenes within your own projects and trying them out in the Playground.

In your own project, it is easy enough to set up create scene functions for each scene and call them in the engine render loop. For example:

```javascript
var createScene0 = function () {
  var scene0 = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene0

  return scene0;
};

var createScene1 = function () {
  var scene1 = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene1

  return scene1;
};

//Any other code
var scene0 = createScene0();
var scene1 = createScene1();

engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});
```

The Playground has its own engine render loop, which needs to be stopped before running your own version:

```javascript
var createScene = function () {
  var scene = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene

  ////////OTHER SCENE////////////////////
  var scene1 = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene

  ////////CONTROL ENGINE LOOP///////////
  setTimeout(function () {
    engine.stopRenderLoop();

    engine.runRenderLoop(function () {
      scene.render();
      scene1.render();
    });
  }, 500);

  return scene;
};
```

An example of switching the currently active scene on the Playground is as follows:
<Playground id="#P3E9YP" title="Switching Scenes" description="Simple example showing how to switch scenes." isMain={true} category="Scene"/>



Starting with Babylon.js v4.1, it is now possible to use one engine on several canvases.

To do so, you need to create "views". A view is defined by a canvas (the target) and an optional camera (the definition of the view).

**Please note that when a view is registered, the canvas used to initialize the Engine becomes a "working" canvas and is no longer supposed to be displayed directly.**

## Creating a view

To create a view, you need to register the combination of a canvas and a camera to the engine:

```javascript
let view = engine.registerView(document.getElementById("renderCanvas1"), camera1);
```

Please note that you can also call the same code with no camera:

```javascript
let view = engine.registerView(document.getElementById("renderCanvas1"));
```

If the camera is undefined, the render loop will be executed for the view without changing anything in the active scenes.

## Removing a view

To remove a previously registered view, you can run the following code:

```javascript
engine.unRegisterView(document.getElementById("renderCanvas1"));
```

## Cameras

If a view is defined with a camera, the system will use it as the active camera to render the scene.

A view cannot be rendered if it has a defined camera and the underlying scene is using multiple active cameras (e.g. `scene.activeCameras.length > 0`).

## Multi scenes

You can use views to render multiple cameras from the same scene or from different scenes. As you control the render loop, it is up to you to test the `engine.activeView` to determine which view is currently rendered.

So your render loop could look like:

```javascript
let myRenderLoop = () => {
  if (engine.activeView.camera === undefined) {
    mainScene.render();
  } else if (engine.activeView.target === view1) {
    scene1.render();
  }
};
```

## Events

By default, scenes will capture events from the main rendering canvas (the one used to create the Engine). You can change that behavior by setting the `engine.inputElement` to the DOM element you want to use for events.

This must be done before creating a scene, or if you do it afterward, you have to run the following code:

```javascript
scene.detachControl();
engine.inputElement = myNewElement;
scene.attachControl();
```

## Performance

To ensure optimal performance, **multiple canvases on the same page should have the same size**, otherwise it forces a resize of the master canvas for each view, which is detrimental to performance.

From Babylon.js v5, views can also be disabled, for instance to improve performance when one or more canvases are offscreen.

```javascript
view.enabled = false;
```

## Demo

You can see a live demo here: https://www.babylonjs.com/Demos/Views/

The initialization code for this page can be found here: https://github.com/BabylonJS/Website/blob/master/build/Demos/Views/index.html



## How to Interact with A Scene

There are three main ways for a user to interact with a scene: the keyboard, the [GUI](/features/featuresDeepDive/gui), and directly through a mouse, touch, or gamepad. The use of keyboard and pointer interactions is described on this page.

## Keyboard Interactions

This is a code template to control reactions to different keys. Both the `ASCII` code for the key and the key itself are available to you.

```javascript
scene.onKeyboardObservable.add((kbInfo) => {
  switch (kbInfo.type) {
    case BABYLON.KeyboardEventTypes.KEYDOWN:
      console.log("KEY DOWN: ", kbInfo.event.key);
      break;
    case BABYLON.KeyboardEventTypes.KEYUP:
      console.log("KEY UP: ", kbInfo.event.code);
      break;
  }
});
```

## Pointer Interactions

This is a code template for reacting to pointer events:

```javascript
scene.onPointerObservable.add((pointerInfo) => {
  switch (pointerInfo.type) {
    case BABYLON.PointerEventTypes.POINTERDOWN:
      console.log("POINTER DOWN");
      break;
    case BABYLON.PointerEventTypes.POINTERUP:
      console.log("POINTER UP");
      break;
    case BABYLON.PointerEventTypes.POINTERMOVE:
      console.log("POINTER MOVE");
      break;
    case BABYLON.PointerEventTypes.POINTERWHEEL:
      console.log("POINTER WHEEL");
      break;
    case BABYLON.PointerEventTypes.POINTERPICK:
      console.log("POINTER PICK");
      break;
    case BABYLON.PointerEventTypes.POINTERTAP:
      console.log("POINTER TAP");
      break;
    case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
      console.log("POINTER DOUBLE-TAP");
      break;
  }
});
```

[PEP](https://github.com/jquery/PEP) is an option for supporting **touch** events in older browsers (ones that don't natively support [pointer events](https://caniuse.com/pointer)). To use PEP, all that is necessary is to:

1. Install PEP

```javascript
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
```

2. Stop the default touch-action within the rendering canvas

```javascript
<canvas id="renderCanvas" touch-action="none"></canvas>
```

## Playground Examples

<Playground id="#0XYMA9#107" title="Scene Observables Template" description="Simple scene observables template." image="/img/playgroundsAndNMEs/divingDeeperInteractions1.webp" isMain={true} category="Interactions"/>
<Playground id="#7CBW04" title="Simple Drag Example" description="Simple example of a drag behavior." image="/img/playgroundsAndNMEs/divingDeeperInteractions2.webp" isMain={true} category="Interactions"/>
<Playground id="#XZ0TH6" title="Simple Keyboard Input Example" description="Simple example of keyboard input." image="/img/playgroundsAndNMEs/divingDeeperInteractions3.webp" isMain={true} category="Interactions"/>
<Playground id="#2SA7J8#7" title="Click+Drag to Multi Select" description="Simple example of how to multi-select objects in a scene using rectangular selection." isMain={true} category="Interactions"/>

Remember to click in the scene (to set focus) before using the keyboard.


Using Multiple Scenes

How to Use Multiple Scenes

Multiple scenes on the Playground