
## How to use Multi-Views

Babylon.js can render multiple views of the same scene.

## Active cameras

A scene has an [activeCamera](/typedoc/classes/babylon.scene#activecamera) property that defines the point of view. But you can define multiple active cameras using code like this:

```javascript
scene.activeCameras.push(camera);
scene.activeCameras.push(camera2);
```

## Viewports

If you want to use multiple cameras, you will need to specify a viewport for each camera:

```javascript
camera.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1.0);
camera2.viewport = new BABYLON.Viewport(0, 0, 0.5, 1.0);
```

A viewport is defined by the following constructor:

```javascript
BABYLON.Viewport = function (x, y, width, height);
```

where x and y define the lower-left corner of the viewport, followed by its width and height. Values for x, y, width, and height are numbers between 0 and 1, representing the fraction of the screen width and height, respectively.

<Playground id="#4JXV32" title="Viewport Example" description="A simple example of constructing a viewport." image="/img/playgroundsAndNMEs/divingDeeperMultiviews3.webp"/>



# How to use Layer Masks and Multi-Camera Textures

## Different meshes for multiple cameras using layer masks

A `layerMask` is a number assigned to each mesh and camera. It is used at the bit level to indicate whether lights and cameras should affect or show the mesh. The default value, 0x0FFFFFFF, causes the mesh to be illuminated and shown by any default light and camera. To determine whether a mesh is seen by a camera, a [bitwise AND](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_AND) is performed and the result is compared to zero:

```javascript
(mesh.layerMask & camera.layerMask) !== 0;
```

The feature is used primarily when multiple cameras are active at the same time. If you wish to have a mesh that is always visible on the screen and pickable, e.g. a button, you might add a second camera and light to the scene to exclusively show and light it.

You'll need the second camera to see ONLY the button. The button should also only be visible once.

Notice that the default `layerMask` starts with the first 4 bits set to 0, or off. If the second camera and button both have a `layerMask` with one of the four values below, then the second camera will only see the button:

- 0x10000000
- 0x20000000
- 0x40000000
- 0x80000000

It should also be noted that a mesh with a `layerMask` of 0 can never be seen by anyone. This might be good for hiding things.

To set up multiple cameras:

```javascript
if (scene.activeCameras.length === 0){
    scene.activeCameras.push(scene.activeCamera);
}
const secondCamera = new Babylon.Camera(...);
secondCamera.layerMask = 0x10000000;
scene.activeCameras.push(secondCamera);

const Button = new BABYLON.Mesh(...);
Button.layerMask = 0x10000000;
```

[You can click here to read on a more in-depth look at the layer mask.](https://doc.babylonjs.com/features/featuresDeepDive/scene/layermask)

## Lights

Unless the material of the meshes for the second camera is purely emissive, this still leaves any light for the button illuminating all the other meshes, and other lights in the scene illuminating the button. To keep scene lights from illuminating the button, loop through the existing lights and set the `excludeWithLayerMask` value:

```javascript
for (let i = scene.lights.length - 1; i >= 0; i--) {
  scene.lights[i].excludeWithLayerMask = 0x10000000;
}
```

Then make the "button" light:

```javascript
const light = new BABYLON.Light(...);
light.includeOnlyWithLayerMask = 0x10000000;
```

Finally, if more lights may be generated later, you can register a callback when a light is added:

```javascript
scene.onNewLightAdded = onNewLight;
```

This could be:

```javascript
onNewLight = function (newLight, positionInArray, scene) {
  newLight.excludeWithLayerMask = 0x10000000;
};
```

## Gun Sight Crosshair Example

Here is a simple example of using a second orthographic camera that shows a gun sight. To keep it simple, an emissive material was used so no lighting is needed. Just copy and paste it into any scene, then call it. The chosen `layerMask` also allows Babylon's Dialog extension to interoperate. Perhaps these could be combined to create a heads-up tank sight with a rangefinder.

A commercial-quality implementation would probably not use `CreateBox()`, since it creates depth faces that cannot be seen straight-on anyway. It should also account for window size changes unless it is a tablet app.

```javascript
function addGunSight(scene) {
  if (scene.activeCameras.length === 0) {
    scene.activeCameras.push(scene.activeCamera);
  }
  const secondCamera = new BABYLON.FreeCamera("GunSightCamera", new BABYLON.Vector3(0, 0, -50), scene);
  secondCamera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
  secondCamera.layerMask = 0x20000000;
  scene.activeCameras.push(secondCamera);

  meshes = [];
  const h = 250;
  const w = 250;

  const y = BABYLON.MeshBuilder.CreateBox("y", { size: h * 0.2 }, scene);
  y.scaling = new BABYLON.Vector3(0.05, 1, 1);
  y.position = new BABYLON.Vector3(0, 0, 0);
  meshes.push(y);

  const x = BABYLON.MeshBuilder.CreateBox("x", { size: h * 0.2 }, scene);
  x.scaling = new BABYLON.Vector3(1, 0.05, 1);
  x.position = new BABYLON.Vector3(0, 0, 0);
  meshes.push(x);

  const lineTop = BABYLON.MeshBuilder.CreateBox("lineTop", { size: w * 0.8 }, scene);
  lineTop.scaling = new BABYLON.Vector3(1, 0.005, 1);
  lineTop.position = new BABYLON.Vector3(0, h * 0.5, 0);
  meshes.push(lineTop);

  const lineBottom = BABYLON.MeshBuilder.CreateBox("lineBottom", { size: w * 0.8 }, scene);
  lineBottom.scaling = new BABYLON.Vector3(1, 0.005, 1);
  lineBottom.position = new BABYLON.Vector3(0, h * -0.5, 0);
  meshes.push(lineBottom);

  const lineLeft = BABYLON.MeshBuilder.CreateBox("lineLeft", { size: h }, scene);
  lineLeft.scaling = new BABYLON.Vector3(0.01, 1, 1);
  lineLeft.position = new BABYLON.Vector3(w * -0.4, 0, 0);
  meshes.push(lineLeft);

  const lineRight = BABYLON.MeshBuilder.CreateBox("lineRight", { size: h }, scene);
  lineRight.scaling = new BABYLON.Vector3(0.01, 1, 1);
  lineRight.position = new BABYLON.Vector3(w * 0.4, 0, 0);
  meshes.push(lineRight);

  const gunSight = BABYLON.Mesh.MergeMeshes(meshes);
  gunSight.name = "gunSight";
  gunSight.layerMask = 0x20000000;
  gunSight.freezeWorldMatrix();

  const mat = new BABYLON.StandardMaterial("emissive mat", scene);
  mat.checkReadyOnlyOnce = true;
  mat.emissiveColor = new BABYLON.Color3(0, 1, 0);

  gunSight.material = mat;
}
```

See it in action here: <Playground id="#JU1DZP" title="Gun Sight Crosshair Example" description="A simple example of creating a gun sight crosshair using layer masks and two cameras." image="/img/playgroundsAndNMEs/divingDeeperLayerMasks1.webp" isMain={true} category="Cameras"/>

Using the information here and combining it with the viewport information from the previous [section](/features/featuresDeepDive/cameras/multiViewsPart2), we can create a more complex example that includes the option to omit meshes from specific cameras.

<Playground id="#L92PHY#217" title="Picture in Picture Visual Camera" description="Using layer masks and viewports, show a visual representation of camera movement." image="/img/playgroundsAndNMEs/pipcamera.webp" isMain={true} category="Cameras"/>



# How to use Multiview

## Introduction

The [WebGL Multiview extension](https://www.khronos.org/registry/webgl/extensions/OVR_multiview2/) allows rendering multiple views (e.g. each eye for VR scenarios) in a single render pass. This can make rendering around 1.5 to 2.0 times faster.

Multiview is not currently supported in all browsers. If it is supported, the multiview capability should be present:

```javascript
scene.getEngine().getCaps().multiview;
```

**Note:** Multiview rendering renders to a texture array instead of a standard texture. This may cause unexpected issues when applying post-processing with custom shaders, effects, or post-processing steps (_e.g._, the highlight layer will have no effect).

## Using with VRExperienceHelper

Multiview can be enabled by setting the `useMultiview` option to `true`.

```javascript
scene.createDefaultVRExperience({ useMultiview: true });
```

<Playground id="#SRV2A0" title="VR Experience Multiview Example" description="A simple example of using multiviews for a VR experience." image="/img/playgroundsAndNMEs/divingDeeperMultiviews1.webp"/>

## Using with VRDeviceOrientationFreeCamera to display on the screen

Enable through the option in the [VRCameraMetrics](/typedoc/classes/babylon.vrcamerametrics) object:

```javascript
// Enable multiview
const multiviewMetrics = BABYLON.VRCameraMetrics.GetDefault();
multiviewMetrics.multiviewEnabled = true;
// Create camera
const multiviewCamera = new BABYLON.VRDeviceOrientationFreeCamera("", new BABYLON.Vector3(-10, 5, 0), scene, undefined, multiviewMetrics);
```

<Playground id="#EZDZZV" title="VRDeviceOrientationFreeCamera Multiview Example" description="A simple example of using multiviews to create a VRDeviceOrientationFreeCamera." image="/img/playgroundsAndNMEs/divingDeeperMultiviews2.webp"/>


MultiViews Part 2

How to use Multi-Views

Active cameras

Viewports