360 Video Domes

How To 360 Video

360 Video is a simple mix of specific geometry, textures, and material properties. However, rather than put the burden on you to figure out how to connect them, we've created the VideoDome.

Note that the video dome also supports 180-degree video. Read below for more information.

VideoDome

VideoDomes rely heavily on the VideoTexture class. Check out its documentation so that some parameters make more sense. The source video itself should be "Equirectangular". Without an equirectangular source, the class won't function correctly.

VideoDome Code

Within the Playground, you can copy and paste the following into your scene and then adjust the options.

import { VideoDome } from "@babylonjs/core/Helpers/videoDome";
videoDome = new VideoDome("videoDome", url, { < options >
}, scene);

All of the settings in the options object are optional, but the object itself is not. Please provide an empty object at minimum.

All the options are passed through to the corresponding classes, mainly the dome geometry and the VideoTexture:

resolution = 32: Integer, defines the resolution of the sphere used to host the video. Lower resolutions have more artifacts at extreme FOVs
clickToPlay = false: Add a click to play listener to the video, does not prevent autoplay
autoPlay = true: Automatically attempts to begin playing the video. It will auto-mute the audio and try again if the first attempt to play fails due to browser policy.
loop = true: Automatically loop video on end
size = 1000: Physical radius to create the dome at, defaults to approximately half the far clip plane
poster: URL of the image displayed during the video loading or until the user interacts with the video
useDirectMapping = true: Use a direct mapping technique to render the video. You should leave this value on unless you want to use the fovMultiplier property
halfDomeMode = false: Enable the support for 180 videos instead of 360.

Playground Example of a VideoDome

Auto Play

Modern browsers have strict policies for autoplaying video. See the VideoTexture documentation for details. The underlying VideoTexture used by VideoDome is available as videoTexture. Code to manually play the video might look like this:

scene.onPointerDown = function () {
  videoDome.videoTexture.video.play();
  scene.onPointerDown = null;
};

That is essentially what the clickToPlay=true option does. However, there can be non-obvious interactions with autoPlay in certain browsers, especially when autoPlay=false.

FOV adjustment

Sometimes 360 Video can feel uncomfortably distant from the camera. To help with this, a material-based FOV adjustment is available. Adjust it between 0.0 and 2.0 with the following code.

videoDome.fovMultiplier = newValue;

Please note that fovMultiplier only works when using the useDirectMapping = false creation option.

As a warning, the further the value gets from 1, the more distortion will be visible. Higher resolutions on the video dome help reduce this, but not eliminate it.

VideoDome with fovMultiplier

Video Types

Several types of 360 video exist today. The most common are Monoscopic Panoramic, Stereoscopic Side-by-Side panoramic, and Top-Bottom panoramic.

The first one represents a panoramic view dedicated to one eye. The second one contains two panoramic views dedicated to each eye, whereas the last one contains both panoramic views on the top and bottom of the video, respectively.

In the VideoDome, you can adapt it to the type of your source video by using:

import { VideoDome } from "@babylonjs/core/Helpers/videoDome";
videoDome.videoMode = VideoDome.MODE_MONOSCOPIC;
// or
videoDome.videoMode = VideoDome.MODE_SIDEBYSIDE;
// or
videoDome.videoMode = VideoDome.MODE_TOPBOTTOM;

180 Video

Another VR-enabled video format is 180-degree video. The area in front of the user is recorded, but the back is black.

There are two ways to enable 180 video mode (which we call half dome mode):

During construction, enable halfDomeMode in the options:

import { VideoDome } from "@babylonjs/core/Helpers/videoDome";
let videoDome = new VideoDome("videoDome", ["https://videourl.com/videos/180.mp4"], {
    resolution: 32,
    clickToPlay: true,
    halfDomeMode: true,
}, scene);

Set videoDome.halfDome to true:

let videoDome = ....
videoDome.halfDome = true;

Disposal

When disposing a video dome, the second parameter is important to make sure the texture resources are also disposed.

videoDome.dispose(false, true);

See also documentation regarding VideoTexture disposal.