Merge pull request #5877 from sebavan/VRModes

Side by side and top bottom stereoscopic vide support.

dist/preview release/what's new.md

@@ -24,7 +24,7 @@
   - Moved to a measure / draw mechanism ([Deltakosh](https://github.com/deltakosh))
   - Added support for [nine patch stretch](https://www.babylonjs-playground.com/#G5H9IN#2) mode for images. ([Deltakosh](https://github.com/deltakosh))
   - InvalidateRect added to AdvancedDynamicTexture to improve perf for heavily populated GUIs, works with shadows ([TrevorDev](https://github.com/TrevorDev)) **** NEED DEMO or DOC LINK)
-- Migrated the code to modules and deploy ES6 npm packages ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)
+- Migrated the code to modules and deploy [ES6 npm packages](https://doc.babylonjs.com/features/es6_support) ([Sebavan](https://github.com/Sebavan))
 - Added clear coat support to PBR ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)
 - Added anisotropy support to PBR ([Sebavan](https://github.com/Sebavan)) **** NEED DEMO or DOC LINK)
 - Added `TrailMesh` class. Credit to furcatomasz ([danjpar](https://github.com/danjpar)) **** NEED DEMO or DOC LINK)
@@ -106,8 +106,9 @@
 - Inspector light gizmo ([TrevorDev](https://github.com/TrevorDev))
 - Added option `multiMultiMaterials` to mesh.mergeMeshes ([danjpar](https://github.com/danjpar))
 - Expose fallback camera distortion metrics option in vrExperienceHelper ([TrevorDev](https://github.com/TrevorDev))
-- Add setColor method to boundingBoxGizmo ([TrevorDev](https://github.com/TrevorDev))
-- Add OnAfterEnteringVRObservable to webVRHelper ([TrevorDev](https://github.com/TrevorDev))
+- Added setColor method to boundingBoxGizmo ([TrevorDev](https://github.com/TrevorDev))
+- Added OnAfterEnteringVRObservable to webVRHelper ([TrevorDev](https://github.com/TrevorDev))
+- Added Support for Side By Side and Top/Bottom VR videos in the [video dome](https://doc.babylonjs.com/how_to/360videodome#video-types) ([Sebavan](https://github.com/Sebavan))
 
 ### OBJ Loader
 - Add color vertex support (not part of standard) ([brianzinn](https://github.com/brianzinn))

src/Cameras/camera.ts

@@ -885,6 +885,24 @@ export class Camera extends Node {
         super.dispose(doNotRecurse, disposeMaterialAndTextures);
     }
 
+    /** @hidden */
+    public _isLeftCamera = false;
+    /**
+     * Gets the left camera of a rig setup in case of Rigged Camera
+     */
+    public get isLeftCamera(): boolean {
+        return this._isLeftCamera;
+    }
+
+    /** @hidden */
+    public _isRightCamera = true;
+    /**
+     * Gets the right camera of a rig setup in case of Rigged Camera
+     */
+    public get isRightCamera(): boolean {
+        return this._isRightCamera;
+    }
+
     /**
      * Gets the left camera of a rig setup in case of Rigged Camera
      */
@@ -952,7 +970,13 @@ export class Camera extends Node {
         // create the rig cameras, unless none
         if (this.cameraRigMode !== Camera.RIG_MODE_NONE) {
             let leftCamera = this.createRigCamera(this.name + "_L", 0);
+            if (leftCamera) {
+                leftCamera._isLeftCamera = true;
+            }
             let rightCamera = this.createRigCamera(this.name + "_R", 1);
+            if (rightCamera) {
+                rightCamera._isRightCamera = true;
+            }
             if (leftCamera && rightCamera) {
                 this._rigCameras.push(leftCamera);
                 this._rigCameras.push(rightCamera);

src/Helpers/videoDome.ts

@@ -7,6 +7,10 @@ import { Texture } from "../Materials/Textures/texture";
 import { VideoTexture, VideoTextureSettings } from "../Materials/Textures/videoTexture";
 import { BackgroundMaterial } from "../Materials/Background/backgroundMaterial";
 import "../Meshes/Builders/sphereBuilder";
+import { Nullable } from "../types";
+import { Observer } from "../Misc/observable";
+
+declare type Camera = import("../Cameras/camera").Camera;
 
 /**
  * Display a 360 degree video on an approximately spherical surface, useful for VR applications or skyboxes.
@@ -15,6 +19,19 @@ import "../Meshes/Builders/sphereBuilder";
  * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
  */
 export class VideoDome extends TransformNode {
+    /**
+     * Define the video source as a Monoscopic panoramic 360 video.
+     */
+    public static readonly MODE_MONOSCOPIC = 0;
+    /**
+     * Define the video source as a Stereoscopic TopBottom/OverUnder panoramic 360 video.
+     */
+    public static readonly MODE_TOPBOTTOM = 1;
+    /**
+     * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
+     */
+    public static readonly MODE_SIDEBYSIDE = 2;
+
     private _useDirectMapping = false;
 
     /**
@@ -50,6 +67,29 @@ export class VideoDome extends TransformNode {
         this._material.fovMultiplier = value;
     }
 
+    private _videoMode = VideoDome.MODE_MONOSCOPIC;
+    /**
+     * Gets or set the current video mode for the video. It can be:
+     * * VideoDome.MODE_MONOSCOPIC : Define the video source as a Monoscopic panoramic 360 video.
+     * * VideoDome.MODE_TOPBOTTOM  : Define the video source as a Stereoscopic TopBottom/OverUnder panoramic 360 video.
+     * * VideoDome.MODE_SIDEBYSIDE : Define the video source as a Stereoscopic Side by Side panoramic 360 video.
+     */
+    public get videoMode(): number {
+        return this._videoMode;
+    }
+    public set videoMode(value: number) {
+        if (this._videoMode !== value) {
+            return;
+        }
+
+        this._changeVideoMode(value);
+    }
+
+    /**
+     * Oberserver used in Stereoscopic VR Mode.
+     */
+    private _onBeforeCameraRenderObserver: Nullable<Observer<Camera>> = null;
+
     /**
      * Create an instance of this class and pass through the parameters to the relevant classes, VideoTexture, StandardMaterial, and Mesh.
      * @param name Element's name, child elements will append suffixes for their own names.
@@ -120,6 +160,32 @@ export class VideoDome extends TransformNode {
         }
     }
 
+    private _changeVideoMode(value: number): void {
+        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
+        this._videoMode = value;
+
+        // Default Setup and Reset.
+        this._videoTexture.uScale = 1;
+        this._videoTexture.vScale = 1;
+        this._videoTexture.uOffset = 0;
+        this._videoTexture.vOffset = 0;
+
+        switch (value) {
+            case VideoDome.MODE_SIDEBYSIDE:
+                this._videoTexture.uScale = 0.5;
+                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
+                    this._videoTexture.uOffset = camera.isRightCamera ? 0.5 : 0.0;
+                });
+            break;
+            case VideoDome.MODE_TOPBOTTOM:
+                this._videoTexture.vScale = 0.5;
+                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
+                    this._videoTexture.vOffset = camera.isRightCamera ? 0.5 : 0.0;
+                });
+                break;
+        }
+    }
+
     /**
      * Releases resources associated with this node.
      * @param doNotRecurse Set to true to not recurse into each children (recurse into each children by default)
@@ -130,6 +196,8 @@ export class VideoDome extends TransformNode {
         this._mesh.dispose();
         this._material.dispose();
 
+        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
+
         super.dispose(doNotRecurse, disposeMaterialAndTextures);
     }
 }