How To

How to do 360 Video

How To 360 Video

360 Video is a simplex 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.


VideoDomes rely heavily on the VideoTexture class, check out it's 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.

videoDome = new BABYLON.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 based through 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 attempt to being playing the video
  • 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

  • Playground Example of a VideoDome -

As iOS disable autoplay, you should call video play on user interaction, using;.

FOV adjustment

Sometimes 360 Video can feel an uncomfortable distance 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 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, but not eliminate, this.

Video Types

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

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

In the video Dome you can change adapt to the type of your source video by using :

videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;

Further Reading