MultiViews Part 1

Introduction

The WebGL Multiview extension 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:

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.

scene.createDefaultVRExperience({ useMultiview: true });

Using with VRDeviceOrientationFreeCamera to display on the screen

Enable through the option in the VRCameraMetrics object:

import { VRCameraMetrics } from "@babylonjs/core/Cameras/VR/vrCameraMetrics";
import { VRDeviceOrientationFreeCamera } from "@babylonjs/core/Cameras/VR/vrDeviceOrientationFreeCamera";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
// Enable multiview
const multiviewMetrics = VRCameraMetrics.GetDefault();
multiviewMetrics.multiviewEnabled = true;
// Create camera
const multiviewCamera = new VRDeviceOrientationFreeCamera("", new Vector3(-10, 5, 0), scene, undefined, multiviewMetrics);