Merge pull request #8772 from RaananW/textureDome

Adding TextureDome and using it for PhotoDome and VideoDome

dist/preview release/what's new.md

@@ -42,6 +42,7 @@
 - Allow 180 monoscopic videos on top of the video dome ([#8575](https://github.com/BabylonJS/Babylon.js/issues/8575)) ([RaananW](https://github.com/RaananW))
 - Added `AssetContainerTask` support to `AssetsManager` class ([MackeyK24](https://github.com/MackeyK24))
 - Changed DeviceSourceManager getInput contract to no longer return nullable values ([Drigax](https://github.com/drigax))
+- Photo Dome and Video Dome now use the same abstract class and support the same parameters ([#8771](https://github.com/BabylonJS/Babylon.js/issues/8771)) ([RaananW](https://github.com/RaananW))
 
 ### Engine
 

src/Helpers/photoDome.ts

@@ -1,13 +1,6 @@
-import { Observable, Observer } from "../Misc/observable";
-import { Nullable } from "../types";
 import { Scene } from "../scene";
-import { TransformNode } from "../Meshes/transformNode";
-import { Mesh } from "../Meshes/mesh";
 import { Texture } from "../Materials/Textures/texture";
-import { BackgroundMaterial } from "../Materials/Background/backgroundMaterial";
-import "../Meshes/Builders/sphereBuilder";
-import { Vector3 } from '../Maths/math.vector';
-import { Camera } from '../Cameras/camera';
+import { TextureDome } from "./textureDome";
 
 /**
  * Display a 360 degree photo on an approximately spherical surface, useful for VR applications or skyboxes.
@@ -15,212 +8,59 @@ import { Camera } from '../Cameras/camera';
  * This class achieves its effect with a Texture and a correctly configured BackgroundMaterial on an inverted sphere.
  * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
  */
-export class PhotoDome extends TransformNode {
+export class PhotoDome extends TextureDome<Texture> {
     /**
      * Define the image as a Monoscopic panoramic 360 image.
      */
-    public static readonly MODE_MONOSCOPIC = 0;
+    public static readonly MODE_MONOSCOPIC = TextureDome.MODE_MONOSCOPIC;
     /**
      * Define the image as a Stereoscopic TopBottom/OverUnder panoramic 360 image.
      */
-    public static readonly MODE_TOPBOTTOM = 1;
+    public static readonly MODE_TOPBOTTOM = TextureDome.MODE_TOPBOTTOM;
     /**
      * Define the image as a Stereoscopic Side by Side panoramic 360 image.
      */
-    public static readonly MODE_SIDEBYSIDE = 2;
-
-    private _useDirectMapping = false;
-
-    /**
-     * The texture being displayed on the sphere
-     */
-    protected _photoTexture: Texture;
-
+    public static readonly MODE_SIDEBYSIDE = TextureDome.MODE_SIDEBYSIDE;
     /**
      * Gets or sets the texture being displayed on the sphere
      */
     public get photoTexture(): Texture {
-        return this._photoTexture;
+        return this.texture;
     }
 
-    public set photoTexture(value: Texture) {
-        if (this._photoTexture === value) {
-            return;
-        }
-        this._photoTexture = value;
-        if (this._useDirectMapping) {
-            this._photoTexture.wrapU = Texture.CLAMP_ADDRESSMODE;
-            this._photoTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
-            this._material.diffuseTexture = this._photoTexture;
-        } else {
-            this._photoTexture.coordinatesMode = Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE; // matches orientation
-            this._photoTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
-            this._material.reflectionTexture = this._photoTexture;
-        }
-    }
-
-    /**
-     * Observable raised when an error occured while loading the 360 image
-     */
-    public onLoadErrorObservable = new Observable<string>();
-
     /**
-     * The skybox material
+     * sets the texture being displayed on the sphere
      */
-    protected _material: BackgroundMaterial;
-
-    /**
-     * The surface used for the skybox
-     */
-    protected _mesh: Mesh;
-    /**
-     * Gets the mesh used for the skybox.
-     */
-    public get mesh(): Mesh {
-        return this._mesh;
+    public set photoTexture(value: Texture) {
+        this.texture = value;
     }
 
     /**
-     * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
-     * Also see the options.resolution property.
+     * Gets the current video mode for the video. It can be:
+     * * TextureDome.MODE_MONOSCOPIC : Define the texture source as a Monoscopic panoramic 360.
+     * * TextureDome.MODE_TOPBOTTOM  : Define the texture source as a Stereoscopic TopBottom/OverUnder panoramic 360.
+     * * TextureDome.MODE_SIDEBYSIDE : Define the texture source as a Stereoscopic Side by Side panoramic 360.
      */
-    public get fovMultiplier(): number {
-        return this._material.fovMultiplier;
-    }
-    public set fovMultiplier(value: number) {
-        this._material.fovMultiplier = value;
+    public get imageMode(): number {
+        return this.textureMode;
     }
-
-    private _imageMode = PhotoDome.MODE_MONOSCOPIC;
     /**
-     * Gets or set the current video mode for the video. It can be:
-     * * PhotoDome.MODE_MONOSCOPIC : Define the image as a Monoscopic panoramic 360 image.
-     * * PhotoDome.MODE_TOPBOTTOM  : Define the image as a Stereoscopic TopBottom/OverUnder panoramic 360 image.
-     * * PhotoDome.MODE_SIDEBYSIDE : Define the image as a Stereoscopic Side by Side panoramic 360 image.
+     * Sets the current video mode for the video. It can be:
+     * * TextureDome.MODE_MONOSCOPIC : Define the texture source as a Monoscopic panoramic 360.
+     * * TextureDome.MODE_TOPBOTTOM  : Define the texture source as a Stereoscopic TopBottom/OverUnder panoramic 360.
+     * * TextureDome.MODE_SIDEBYSIDE : Define the texture source as a Stereoscopic Side by Side panoramic 360.
      */
-    public get imageMode(): number {
-        return this._imageMode;
-    }
     public set imageMode(value: number) {
-        if (this._imageMode === value) {
-            return;
-        }
-
-        this._changeImageMode(value);
+        this.textureMode = value;
     }
 
-    /**
-     * Create an instance of this class and pass through the parameters to the relevant classes, Texture, StandardMaterial, and Mesh.
-     * @param name Element's name, child elements will append suffixes for their own names.
-     * @param urlsOfPhoto defines the url of the photo to display
-     * @param options defines an object containing optional or exposed sub element properties
-     * @param onError defines a callback called when an error occured while loading the texture
-     */
-    constructor(name: string, urlOfPhoto: string, options: {
-        resolution?: number,
-        size?: number,
-        useDirectMapping?: boolean,
-        faceForward?: boolean
-    }, scene: Scene, onError: Nullable<(message?: string, exception?: any) => void> = null) {
-        super(name, scene);
-
-        // set defaults and manage values
-        name = name || "photoDome";
-        options.resolution = (Math.abs(options.resolution as any) | 0) || 32;
-        options.size = Math.abs(options.size as any) || (scene.activeCamera ? scene.activeCamera.maxZ * 0.48 : 1000);
-
-        if (options.useDirectMapping === undefined) {
-            this._useDirectMapping = true;
-        } else {
-            this._useDirectMapping = options.useDirectMapping;
-        }
-
-        if (options.faceForward === undefined) {
-            options.faceForward = true;
-        }
-
-        this._setReady(false);
-
-        // create
-        let material = this._material = new BackgroundMaterial(name + "_material", scene);
-        this._mesh = Mesh.CreateSphere(name + "_mesh", options.resolution, options.size, scene, false, Mesh.BACKSIDE);
-
-        // configure material
-        material.opacityFresnel = false;
-        material.useEquirectangularFOV = true;
-        material.fovMultiplier = 1.0;
-
-        this.photoTexture = new Texture(urlOfPhoto, scene, true, !this._useDirectMapping, undefined, undefined, (message, exception) => {
+    protected _initTexture(urlsOrElement: string, scene: Scene, options: any): Texture {
+        return new Texture(urlsOrElement, scene, true, !this._useDirectMapping, undefined, undefined, (message, exception) => {
             this.onLoadErrorObservable.notifyObservers(message || "Unknown error occured");
 
-            if (onError) {
-                onError(message, exception);
+            if (this.onError) {
+                this.onError(message, exception);
             }
         });
-        this.photoTexture.anisotropicFilteringLevel = 1;
-
-        this.photoTexture.onLoadObservable.addOnce(() => {
-            this._setReady(true);
-        });
-
-        // configure mesh
-        this._mesh.material = material;
-        this._mesh.parent = this;
-
-        // Initial rotation
-        if (options.faceForward && scene.activeCamera) {
-            let camera = scene.activeCamera;
-
-            let forward = Vector3.Forward();
-            var direction = Vector3.TransformNormal(forward, camera.getViewMatrix());
-            direction.normalize();
-
-            this.rotation.y = Math.acos(Vector3.Dot(forward, direction));
-        }
-    }
-
-    private _onBeforeCameraRenderObserver: Nullable<Observer<Camera>> = null;
-
-    private _changeImageMode(value: number): void {
-        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
-        this._imageMode = value;
-
-        // Default Setup and Reset.
-        this._photoTexture.uScale = 1;
-        this._photoTexture.vScale = 1;
-        this._photoTexture.uOffset = 0;
-        this._photoTexture.vOffset = 0;
-
-        switch (value) {
-            case PhotoDome.MODE_SIDEBYSIDE:
-                this._photoTexture.uScale = 0.5;
-                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
-                    this._photoTexture.uOffset = camera.isRightCamera ? 0.5 : 0.0;
-                });
-                break;
-            case PhotoDome.MODE_TOPBOTTOM:
-                this._photoTexture.vScale = 0.5;
-                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
-                    this._photoTexture.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)
-     * @param disposeMaterialAndTextures Set to true to also dispose referenced materials and textures (false by default)
-     */
-    public dispose(doNotRecurse?: boolean, disposeMaterialAndTextures = false): void {
-        this._photoTexture.dispose();
-        this._mesh.dispose();
-        this._material.dispose();
-
-        this.onLoadErrorObservable.clear();
-
-        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
-
-        super.dispose(doNotRecurse, disposeMaterialAndTextures);
     }
 }

src/Helpers/textureDome.ts

@@ -0,0 +1,294 @@
+import { Scene } from "../scene";
+import { TransformNode } from "../Meshes/transformNode";
+import { Mesh } from "../Meshes/mesh";
+import { Texture } from "../Materials/Textures/texture";
+import { BackgroundMaterial } from "../Materials/Background/backgroundMaterial";
+import "../Meshes/Builders/sphereBuilder";
+import { Nullable } from "../types";
+import { Observer, Observable } from "../Misc/observable";
+import { Vector3 } from "../Maths/math.vector";
+import { Axis } from "../Maths/math";
+import { SphereBuilder } from "../Meshes/Builders/sphereBuilder";
+
+declare type Camera = import("../Cameras/camera").Camera;
+
+/**
+ * Display a 360/180 degree texture on an approximately spherical surface, useful for VR applications or skyboxes.
+ * As a subclass of TransformNode, this allow parenting to the camera or multiple textures with different locations in the scene.
+ * This class achieves its effect with a Texture and a correctly configured BackgroundMaterial on an inverted sphere.
+ * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
+ */
+export abstract class TextureDome<T extends Texture> extends TransformNode {
+    /**
+     * Define the source as a Monoscopic panoramic 360/180.
+     */
+    public static readonly MODE_MONOSCOPIC = 0;
+    /**
+     * Define the source as a Stereoscopic TopBottom/OverUnder panoramic 360/180.
+     */
+    public static readonly MODE_TOPBOTTOM = 1;
+    /**
+     * Define the source as a Stereoscopic Side by Side panoramic 360/180.
+     */
+    public static readonly MODE_SIDEBYSIDE = 2;
+
+    private _halfDome: boolean = false;
+
+    protected _useDirectMapping = false;
+
+    /**
+     * The texture being displayed on the sphere
+     */
+    protected _texture: T;
+
+    /**
+     * Gets the texture being displayed on the sphere
+     */
+    public get texture(): T {
+        return this._texture;
+    }
+
+    /**
+     * Sets the texture being displayed on the sphere
+     */
+    public set texture(newTexture: T) {
+        if (this._texture === newTexture) {
+            return;
+        }
+        this._texture = newTexture;
+        if (this._useDirectMapping) {
+            this._texture.wrapU = Texture.CLAMP_ADDRESSMODE;
+            this._texture.wrapV = Texture.CLAMP_ADDRESSMODE;
+            this._material.diffuseTexture = this._texture;
+        } else {
+            this._texture.coordinatesMode = Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE; // matches orientation
+            this._texture.wrapV = Texture.CLAMP_ADDRESSMODE;
+            this._material.reflectionTexture = this._texture;
+        }
+    }
+
+    /**
+     * The skybox material
+     */
+    protected _material: BackgroundMaterial;
+
+    /**
+     * The surface used for the dome
+     */
+    protected _mesh: Mesh;
+    /**
+     * Gets the mesh used for the dome.
+     */
+    public get mesh(): Mesh {
+        return this._mesh;
+    }
+
+    /**
+     * A mesh that will be used to mask the back of the dome in case it is a 180 degree movie.
+     */
+    private _halfDomeMask: Mesh;
+
+    /**
+     * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
+     * Also see the options.resolution property.
+     */
+    public get fovMultiplier(): number {
+        return this._material.fovMultiplier;
+    }
+    public set fovMultiplier(value: number) {
+        this._material.fovMultiplier = value;
+    }
+
+    protected _textureMode = TextureDome.MODE_MONOSCOPIC;
+    /**
+     * Gets or set the current texture mode for the texture. It can be:
+     * * TextureDome.MODE_MONOSCOPIC : Define the texture source as a Monoscopic panoramic 360.
+     * * TextureDome.MODE_TOPBOTTOM  : Define the texture source as a Stereoscopic TopBottom/OverUnder panoramic 360.
+     * * TextureDome.MODE_SIDEBYSIDE : Define the texture source as a Stereoscopic Side by Side panoramic 360.
+     */
+    public get textureMode(): number {
+        return this._textureMode;
+    }
+    /**
+     * Sets the current texture mode for the texture. It can be:
+      * * TextureDome.MODE_MONOSCOPIC : Define the texture source as a Monoscopic panoramic 360.
+     * * TextureDome.MODE_TOPBOTTOM  : Define the texture source as a Stereoscopic TopBottom/OverUnder panoramic 360.
+     * * TextureDome.MODE_SIDEBYSIDE : Define the texture source as a Stereoscopic Side by Side panoramic 360.
+     */
+    public set textureMode(value: number) {
+        if (this._textureMode === value) {
+            return;
+        }
+
+        this._changeTextureMode(value);
+    }
+
+    /**
+     * Is it a 180 degrees dome (half dome) or 360 texture (full dome)
+     */
+    public get halfDome(): boolean {
+        return this._halfDome;
+    }
+
+    /**
+     * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+     */
+    public set halfDome(enabled: boolean) {
+        this._halfDome = enabled;
+        this._halfDomeMask.setEnabled(enabled);
+    }
+
+    /**
+     * Oberserver used in Stereoscopic VR Mode.
+     */
+    private _onBeforeCameraRenderObserver: Nullable<Observer<Camera>> = null;
+    /**
+     * Observable raised when an error occured while loading the 360 image
+     */
+    public onLoadErrorObservable = new Observable<string>();
+
+    /**
+     * Create an instance of this class and pass through the parameters to the relevant classes- Texture, StandardMaterial, and Mesh.
+     * @param name Element's name, child elements will append suffixes for their own names.
+     * @param textureUrlOrElement defines the url(s) or the (video) HTML element to use
+     * @param options An object containing optional or exposed sub element properties
+     */
+    constructor(
+        name: string,
+        textureUrlOrElement: string | string[] | HTMLVideoElement,
+        options: {
+            resolution?: number;
+            clickToPlay?: boolean;
+            autoPlay?: boolean;
+            loop?: boolean;
+            size?: number;
+            poster?: string;
+            faceForward?: boolean;
+            useDirectMapping?: boolean;
+            halfDomeMode?: boolean;
+        },
+        scene: Scene,
+        protected onError: Nullable<(message?: string, exception?: any) => void> = null
+    ) {
+        super(name, scene);
+
+        scene = this.getScene();
+
+        // set defaults and manage values
+        name = name || "textureDome";
+        options.resolution = Math.abs(options.resolution as any) | 0 || 32;
+        options.clickToPlay = Boolean(options.clickToPlay);
+        options.autoPlay = options.autoPlay === undefined ? true : Boolean(options.autoPlay);
+        options.loop = options.loop === undefined ? true : Boolean(options.loop);
+        options.size = Math.abs(options.size as any) || (scene.activeCamera ? scene.activeCamera.maxZ * 0.48 : 1000);
+
+        if (options.useDirectMapping === undefined) {
+            this._useDirectMapping = true;
+        } else {
+            this._useDirectMapping = options.useDirectMapping;
+        }
+
+        if (options.faceForward === undefined) {
+            options.faceForward = true;
+        }
+
+        this._setReady(false);
+        this._mesh = Mesh.CreateSphere(name + "_mesh", options.resolution, options.size, scene, false, Mesh.BACKSIDE);
+        // configure material
+        let material = (this._material = new BackgroundMaterial(name + "_material", scene));
+        material.useEquirectangularFOV = true;
+        material.fovMultiplier = 1.0;
+        material.opacityFresnel = false;
+
+        const texture = this._initTexture(textureUrlOrElement, scene, options);
+        this.texture = texture;
+
+        // configure mesh
+        this._mesh.material = material;
+        this._mesh.parent = this;
+
+        // create a (disabled until needed) mask to cover unneeded segments of 180 texture.
+        this._halfDomeMask = SphereBuilder.CreateSphere("", { slice: 0.5, diameter: options.size * 0.98, segments: options.resolution * 2, sideOrientation: Mesh.BACKSIDE }, scene);
+        this._halfDomeMask.rotate(Axis.X, -Math.PI / 2);
+        // set the parent, so it will always be positioned correctly AND will be disposed when the main sphere is disposed
+        this._halfDomeMask.parent = this._mesh;
+        this._halfDome = !!options.halfDomeMode;
+        // enable or disable according to the settings
+        this._halfDomeMask.setEnabled(this._halfDome);
+
+        // create
+        this._texture.anisotropicFilteringLevel = 1;
+        this._texture.onLoadObservable.addOnce(() => {
+            this._setReady(true);
+        });
+
+        // Initial rotation
+        if (options.faceForward && scene.activeCamera) {
+            let camera = scene.activeCamera;
+
+            let forward = Vector3.Forward();
+            var direction = Vector3.TransformNormal(forward, camera.getViewMatrix());
+            direction.normalize();
+
+            this.rotation.y = Math.acos(Vector3.Dot(forward, direction));
+        }
+
+        this._changeTextureMode(this._textureMode);
+    }
+
+    protected abstract _initTexture(urlsOrElement: string | string[] | HTMLElement, scene: Scene, options: any): T;
+
+    protected _changeTextureMode(value: number): void {
+        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
+        this._textureMode = value;
+
+        // Default Setup and Reset.
+        this._texture.uScale = 1;
+        this._texture.vScale = 1;
+        this._texture.uOffset = 0;
+        this._texture.vOffset = 0;
+
+        switch (value) {
+            case TextureDome.MODE_MONOSCOPIC:
+                if (this._halfDome) {
+                    this._texture.uScale = 2;
+                    this._texture.uOffset = -1;
+                }
+                break;
+            case TextureDome.MODE_SIDEBYSIDE:
+                // in half-dome mode the uScale should be double of 360 texture
+                // Use 0.99999 to boost perf by not switching program
+                this._texture.uScale = this._halfDome ? 0.99999 : 0.5;
+                const rightOffset = this._halfDome ? 0.0 : 0.5;
+                const leftOffset = this._halfDome ? 0.5 : 0.0;
+                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
+                    this._texture.uOffset = camera.isRightCamera ? rightOffset : leftOffset;
+                });
+                break;
+            case TextureDome.MODE_TOPBOTTOM:
+                // in half-dome mode the vScale should be double of 360 texture
+                // Use 0.99999 to boost perf by not switching program
+                this._texture.vScale = this._halfDome ? 0.99999 : 0.5;
+                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
+                    this._texture.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)
+     * @param disposeMaterialAndTextures Set to true to also dispose referenced materials and textures (false by default)
+     */
+    public dispose(doNotRecurse?: boolean, disposeMaterialAndTextures = false): void {
+        this._texture.dispose();
+        this._mesh.dispose();
+        this._material.dispose();
+
+        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
+        this.onLoadErrorObservable.clear();
+
+        super.dispose(doNotRecurse, disposeMaterialAndTextures);
+    }
+}

src/Helpers/videoDome.ts

@@ -1,15 +1,7 @@
 import { Scene } from "../scene";
-import { TransformNode } from "../Meshes/transformNode";
-import { Mesh } from "../Meshes/mesh";
 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";
-import { Vector3 } from "../Maths/math.vector";
-import { Axis } from "../Maths/math";
-import { SphereBuilder } from "../Meshes/Builders/sphereBuilder";
+import { TextureDome } from "./textureDome";
 
 declare type Camera = import("../Cameras/camera").Camera;
 
@@ -19,261 +11,49 @@ declare type Camera = import("../Cameras/camera").Camera;
  * This class achieves its effect with a VideoTexture and a correctly configured BackgroundMaterial on an inverted sphere.
  * Potential additions to this helper include zoom and and non-infinite distance rendering effects.
  */
-export class VideoDome extends TransformNode {
+export class VideoDome extends TextureDome<VideoTexture> {
     /**
      * Define the video source as a Monoscopic panoramic 360 video.
      */
-    public static readonly MODE_MONOSCOPIC = 0;
+    public static readonly MODE_MONOSCOPIC = TextureDome.MODE_MONOSCOPIC;
     /**
      * Define the video source as a Stereoscopic TopBottom/OverUnder panoramic 360 video.
      */
-    public static readonly MODE_TOPBOTTOM = 1;
+    public static readonly MODE_TOPBOTTOM = TextureDome.MODE_TOPBOTTOM;
     /**
      * Define the video source as a Stereoscopic Side by Side panoramic 360 video.
      */
-    public static readonly MODE_SIDEBYSIDE = 2;
-
-    private _halfDome: boolean = false;
-
-    private _useDirectMapping = false;
-
-    /**
-     * The video texture being displayed on the sphere
-     */
-    protected _videoTexture: VideoTexture;
+    public static readonly MODE_SIDEBYSIDE = TextureDome.MODE_SIDEBYSIDE;
 
     /**
-     * Gets the video texture being displayed on the sphere
+     * Get the video texture associated with this video dome
      */
     public get videoTexture(): VideoTexture {
-        return this._videoTexture;
-    }
-
-    /**
-     * The skybox material
-     */
-    protected _material: BackgroundMaterial;
-
-    /**
-     * The surface used for the video dome
-     */
-    protected _mesh: Mesh;
-    /**
-     * Gets the mesh used for the video dome.
-     */
-    public get mesh(): Mesh {
-        return this._mesh;
-    }
-
-    /**
-     * A mesh that will be used to mask the back of the video dome in case it is a 180 degree movie.
-     */
-    private _halfDomeMask: Mesh;
-
-    /**
-     * The current fov(field of view) multiplier, 0.0 - 2.0. Defaults to 1.0. Lower values "zoom in" and higher values "zoom out".
-     * Also see the options.resolution property.
-     */
-    public get fovMultiplier(): number {
-        return this._material.fovMultiplier;
-    }
-    public set fovMultiplier(value: number) {
-        this._material.fovMultiplier = value;
+        return this._texture;
     }
-
-    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.
+     * Get the video mode of this dome
      */
     public get videoMode(): number {
-        return this._videoMode;
+        return this.textureMode;
     }
-    public set videoMode(value: number) {
-        if (this._videoMode === value) {
-            return;
-        }
-
-        this._changeVideoMode(value);
-    }
-
-    /**
-     * Is the video a 180 degrees video (half dome) or 360 video (full dome)
-     *
-     */
-    public get halfDome(): boolean {
-        return this._halfDome;
-    }
-
     /**
-     * Set the halfDome mode. If set, only the front (180 degrees) will be displayed and the back will be blacked out.
+     * Set the video mode of this dome.
+     * @see textureMode
      */
-    public set halfDome(enabled: boolean) {
-        this._halfDome = enabled;
-        this._halfDomeMask.setEnabled(enabled);
+    public set videoMode(value: number) {
+        this.textureMode = 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.
-     * @param urlsOrVideo defines the url(s) or the video element to use
-     * @param options An object containing optional or exposed sub element properties
-     */
-    constructor(
-        name: string,
-        urlsOrVideo: string | string[] | HTMLVideoElement,
-        options: {
-            resolution?: number;
-            clickToPlay?: boolean;
-            autoPlay?: boolean;
-            loop?: boolean;
-            size?: number;
-            poster?: string;
-            faceForward?: boolean;
-            useDirectMapping?: boolean;
-            halfDomeMode?: boolean;
-        },
-        scene: Scene
-    ) {
-        super(name, scene);
-
-        scene = this.getScene();
-
-        // set defaults and manage values
-        name = name || "videoDome";
-        options.resolution = Math.abs(options.resolution as any) | 0 || 32;
-        options.clickToPlay = Boolean(options.clickToPlay);
-        options.autoPlay = options.autoPlay === undefined ? true : Boolean(options.autoPlay);
-        options.loop = options.loop === undefined ? true : Boolean(options.loop);
-        options.size = Math.abs(options.size as any) || (scene.activeCamera ? scene.activeCamera.maxZ * 0.48 : 1000);
-
-        if (options.useDirectMapping === undefined) {
-            this._useDirectMapping = true;
-        } else {
-            this._useDirectMapping = options.useDirectMapping;
-        }
-
-        if (options.faceForward === undefined) {
-            options.faceForward = true;
-        }
-
-        this._setReady(false);
-
-        // create
-        let tempOptions: VideoTextureSettings = { loop: options.loop, autoPlay: options.autoPlay, autoUpdateTexture: true, poster: options.poster };
-        let material = (this._material = new BackgroundMaterial(name + "_material", scene));
-        let texture = (this._videoTexture = new VideoTexture(name + "_texture", urlsOrVideo, scene, false, this._useDirectMapping, Texture.TRILINEAR_SAMPLINGMODE, tempOptions));
-        this._mesh = Mesh.CreateSphere(name + "_mesh", options.resolution, options.size, scene, false, Mesh.BACKSIDE);
-        texture.anisotropicFilteringLevel = 1;
-        texture.onLoadObservable.addOnce(() => {
-            this._setReady(true);
-        });
-
-        // configure material
-        material.useEquirectangularFOV = true;
-        material.fovMultiplier = 1.0;
-        material.opacityFresnel = false;
-
-        if (this._useDirectMapping) {
-            texture.wrapU = Texture.CLAMP_ADDRESSMODE;
-            texture.wrapV = Texture.CLAMP_ADDRESSMODE;
-            material.diffuseTexture = texture;
-        } else {
-            texture.coordinatesMode = Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE; // matches orientation
-            texture.wrapV = Texture.CLAMP_ADDRESSMODE;
-            material.reflectionTexture = texture;
-        }
-
-        // configure mesh
-        this._mesh.material = material;
-        this._mesh.parent = this;
-
-        // create a (disabled until needed) mask to cover unneeded segments of 180 videos.
-        this._halfDomeMask = SphereBuilder.CreateSphere("", { slice: 0.5, diameter: options.size * 0.99, segments: options.resolution, sideOrientation: Mesh.BACKSIDE }, scene);
-        this._halfDomeMask.rotate(Axis.X, -Math.PI / 2);
-        // set the parent, so it will always be positioned correctly AND will be disposed when the main sphere is disposed
-        this._halfDomeMask.parent = this._mesh;
-        this._halfDome = !!options.halfDomeMode;
-        // enable or disable according to the settings
-        this._halfDomeMask.setEnabled(this._halfDome);
-
+    protected _initTexture(urlsOrElement: string | string[] | HTMLVideoElement, scene: Scene, options: any): VideoTexture {
+        const tempOptions: VideoTextureSettings = { loop: options.loop, autoPlay: options.autoPlay, autoUpdateTexture: true, poster: options.poster };
+        const texture = new VideoTexture((this.name || "videoDome") + "_texture", urlsOrElement, scene, false, this._useDirectMapping, Texture.TRILINEAR_SAMPLINGMODE, tempOptions);
         // optional configuration
         if (options.clickToPlay) {
             scene.onPointerUp = () => {
-                this._videoTexture.video.play();
+                this._texture.video.play();
             };
         }
-
-        // Initial rotation
-        if (options.faceForward && scene.activeCamera) {
-            let camera = scene.activeCamera;
-
-            let forward = Vector3.Forward();
-            var direction = Vector3.TransformNormal(forward, camera.getViewMatrix());
-            direction.normalize();
-
-            this.rotation.y = Math.acos(Vector3.Dot(forward, direction));
-        }
-
-        this._changeVideoMode(this._videoMode);
-    }
-
-    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_MONOSCOPIC:
-                if (this._halfDome) {
-                    this._videoTexture.uScale = 2;
-                }
-                break;
-            case VideoDome.MODE_SIDEBYSIDE:
-                // in half-dome mode the uScale should be double of 360 videos
-                // Use 0.99999 to boost perf by not switching program
-                this._videoTexture.uScale = this._halfDome ? 0.99999 : 0.5;
-                const rightOffset = this._halfDome ? 0.0 : 0.5;
-                const leftOffset = this._halfDome ? 0.5 : 0.0;
-                this._onBeforeCameraRenderObserver = this._scene.onBeforeCameraRenderObservable.add((camera) => {
-                    this._videoTexture.uOffset = camera.isRightCamera ? rightOffset : leftOffset;
-                });
-                break;
-            case VideoDome.MODE_TOPBOTTOM:
-                // in half-dome mode the vScale should be double of 360 videos
-                // Use 0.99999 to boost perf by not switching program
-                this._videoTexture.vScale = this._halfDome ? 0.99999 : 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)
-     * @param disposeMaterialAndTextures Set to true to also dispose referenced materials and textures (false by default)
-     */
-    public dispose(doNotRecurse?: boolean, disposeMaterialAndTextures = false): void {
-        this._videoTexture.dispose();
-        this._mesh.dispose();
-        this._material.dispose();
-
-        this._scene.onBeforeCameraRenderObservable.remove(this._onBeforeCameraRenderObserver);
-
-        super.dispose(doNotRecurse, disposeMaterialAndTextures);
+        return texture;
     }
 }