Refactoring VRHelper for Firefox compatibility

dist/preview release/babylon.max.js

@@ -66881,17 +66881,17 @@ var BABYLON;
             this._isInVRMode = false;
             this._scene = scene;
             if (!this._scene.activeCamera) {
-                this._scene.activeCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", new BABYLON.Vector3(0, 2, 0), scene);
+                this._deviceOrientationCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", new BABYLON.Vector3(0, 2, 0), scene);
             }
             else {
-                var newCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._scene.activeCamera.position, scene);
+                this._deviceOrientationCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._scene.activeCamera.position, scene);
                 if (scene.activeCamera.rotation) {
-                    newCamera.rotation = scene.activeCamera.rotation.clone();
+                    this._deviceOrientationCamera.rotation = scene.activeCamera.rotation.clone();
                 }
-                newCamera.minZ = this._scene.activeCamera.minZ;
-                newCamera.maxZ = this._scene.activeCamera.maxZ;
-                this._scene.activeCamera = newCamera;
+                this._deviceOrientationCamera.minZ = this._scene.activeCamera.minZ;
+                this._deviceOrientationCamera.maxZ = this._scene.activeCamera.maxZ;
             }
+            this._scene.activeCamera = this._deviceOrientationCamera;
             this._position = this._scene.activeCamera.position;
             this._canvas = scene.getEngine().getRenderingCanvas();
             this._scene.activeCamera.attachControl(this._canvas);
@@ -66924,13 +66924,14 @@ var BABYLON;
             if (navigator.getVRDisplays) {
                 navigator.getVRDisplays().then(function (headsets) {
                     if (headsets.length > 0) {
-                        scene.getEngine().initWebVR();
+                        _this._webVRCamera = new BABYLON.WebVRFreeCamera("WebVRHelper", _this._position, _this._scene);
                         _this._webVRsupportedAndReady = true;
                     }
                     document.body.appendChild(_this._btnVR);
                 });
             }
             else {
+                this._vrDeviceOrientationCamera = new BABYLON.VRDeviceOrientationFreeCamera("VRDeviceOrientationVRHelper", this._position, this._scene);
                 document.body.appendChild(this._btnVR);
             }
             this._btnVR.addEventListener("click", function () {
@@ -66938,13 +66939,14 @@ var BABYLON;
             });
         }
         VRExperienceHelper.prototype.enterVR = function () {
-            this._scene.activeCamera.dispose();
             // If WebVR is supported and a headset is connected
             if (this._webVRsupportedAndReady) {
-                this._scene.activeCamera = new BABYLON.WebVRFreeCamera("WebVRHelper", this._position, this._scene);
+                this._webVRCamera.position = this._position;
+                this._scene.activeCamera = this._webVRCamera;
             }
             else {
-                this._scene.activeCamera = new BABYLON.VRDeviceOrientationFreeCamera("VRDeviceOrientationVRHelper", this._position, this._scene);
+                this._vrDeviceOrientationCamera.position = this._position;
+                this._scene.activeCamera = this._vrDeviceOrientationCamera;
                 this._scene.getEngine().switchFullscreen(true);
             }
             this._scene.activeCamera.attachControl(this._canvas);
@@ -66957,9 +66959,9 @@ var BABYLON;
             }
             if (this._scene.activeCamera) {
                 this._position = this._scene.activeCamera.position;
-                this._scene.activeCamera.dispose();
             }
-            this._scene.activeCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._position, this._scene);
+            this._deviceOrientationCamera.position = this._position;
+            this._scene.activeCamera = this._deviceOrientationCamera;
             this._scene.activeCamera.attachControl(this._canvas);
             this._isInVRMode = false;
             this._btnVR.style.display = "";
@@ -66979,6 +66981,13 @@ var BABYLON;
             if (this._isInVRMode) {
                 this.exitVR();
             }
+            this._deviceOrientationCamera.dispose();
+            if (this._webVRCamera) {
+                this._webVRCamera.dispose();
+            }
+            if (this._vrDeviceOrientationCamera) {
+                this._vrDeviceOrientationCamera.dispose();
+            }
             document.body.removeChild(this._btnVR);
         };
         VRExperienceHelper.prototype.getClassName = function () {

dist/preview release/customConfigurations/minimalGLTFViewer/babylon.max.js

@@ -66881,17 +66881,17 @@ var BABYLON;
             this._isInVRMode = false;
             this._scene = scene;
             if (!this._scene.activeCamera) {
-                this._scene.activeCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", new BABYLON.Vector3(0, 2, 0), scene);
+                this._deviceOrientationCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", new BABYLON.Vector3(0, 2, 0), scene);
             }
             else {
-                var newCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._scene.activeCamera.position, scene);
+                this._deviceOrientationCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._scene.activeCamera.position, scene);
                 if (scene.activeCamera.rotation) {
-                    newCamera.rotation = scene.activeCamera.rotation.clone();
+                    this._deviceOrientationCamera.rotation = scene.activeCamera.rotation.clone();
                 }
-                newCamera.minZ = this._scene.activeCamera.minZ;
-                newCamera.maxZ = this._scene.activeCamera.maxZ;
-                this._scene.activeCamera = newCamera;
+                this._deviceOrientationCamera.minZ = this._scene.activeCamera.minZ;
+                this._deviceOrientationCamera.maxZ = this._scene.activeCamera.maxZ;
             }
+            this._scene.activeCamera = this._deviceOrientationCamera;
             this._position = this._scene.activeCamera.position;
             this._canvas = scene.getEngine().getRenderingCanvas();
             this._scene.activeCamera.attachControl(this._canvas);
@@ -66924,13 +66924,14 @@ var BABYLON;
             if (navigator.getVRDisplays) {
                 navigator.getVRDisplays().then(function (headsets) {
                     if (headsets.length > 0) {
-                        scene.getEngine().initWebVR();
+                        _this._webVRCamera = new BABYLON.WebVRFreeCamera("WebVRHelper", _this._position, _this._scene);
                         _this._webVRsupportedAndReady = true;
                     }
                     document.body.appendChild(_this._btnVR);
                 });
             }
             else {
+                this._vrDeviceOrientationCamera = new BABYLON.VRDeviceOrientationFreeCamera("VRDeviceOrientationVRHelper", this._position, this._scene);
                 document.body.appendChild(this._btnVR);
             }
             this._btnVR.addEventListener("click", function () {
@@ -66938,13 +66939,14 @@ var BABYLON;
             });
         }
         VRExperienceHelper.prototype.enterVR = function () {
-            this._scene.activeCamera.dispose();
             // If WebVR is supported and a headset is connected
             if (this._webVRsupportedAndReady) {
-                this._scene.activeCamera = new BABYLON.WebVRFreeCamera("WebVRHelper", this._position, this._scene);
+                this._webVRCamera.position = this._position;
+                this._scene.activeCamera = this._webVRCamera;
             }
             else {
-                this._scene.activeCamera = new BABYLON.VRDeviceOrientationFreeCamera("VRDeviceOrientationVRHelper", this._position, this._scene);
+                this._vrDeviceOrientationCamera.position = this._position;
+                this._scene.activeCamera = this._vrDeviceOrientationCamera;
                 this._scene.getEngine().switchFullscreen(true);
             }
             this._scene.activeCamera.attachControl(this._canvas);
@@ -66957,9 +66959,9 @@ var BABYLON;
             }
             if (this._scene.activeCamera) {
                 this._position = this._scene.activeCamera.position;
-                this._scene.activeCamera.dispose();
             }
-            this._scene.activeCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._position, this._scene);
+            this._deviceOrientationCamera.position = this._position;
+            this._scene.activeCamera = this._deviceOrientationCamera;
             this._scene.activeCamera.attachControl(this._canvas);
             this._isInVRMode = false;
             this._btnVR.style.display = "";
@@ -66979,6 +66981,13 @@ var BABYLON;
             if (this._isInVRMode) {
                 this.exitVR();
             }
+            this._deviceOrientationCamera.dispose();
+            if (this._webVRCamera) {
+                this._webVRCamera.dispose();
+            }
+            if (this._vrDeviceOrientationCamera) {
+                this._vrDeviceOrientationCamera.dispose();
+            }
             document.body.removeChild(this._btnVR);
         };
         VRExperienceHelper.prototype.getClassName = function () {

dist/preview release/gui/babylon.gui.js

@@ -313,8 +313,8 @@ var BABYLON;
                     var camera = scene.cameraToUseForPointers || scene.activeCamera;
                     var engine = scene.getEngine();
                     var viewport = camera.viewport;
-                    var x = (scene.pointerX - viewport.x * engine.getRenderWidth()) / viewport.width;
-                    var y = (scene.pointerY - viewport.y * engine.getRenderHeight()) / viewport.height;
+                    var x = (scene.pointerX / engine.getHardwareScalingLevel() - viewport.x * engine.getRenderWidth()) / viewport.width;
+                    var y = (scene.pointerY / engine.getHardwareScalingLevel() - viewport.y * engine.getRenderHeight()) / viewport.height;
                     _this._shouldBlockPointer = false;
                     _this._doPicking(x, y, pi.type);
                     pi.skipOnPointerObservable = _this._shouldBlockPointer && pi.type !== BABYLON.PointerEventTypes.POINTERUP;

src/Cameras/VR/babylon.vrExperienceHelper.ts

@@ -6,22 +6,25 @@ module BABYLON {
         private _webVRsupportedAndReady = false;
         private _canvas: HTMLCanvasElement;
         private _isInVRMode = false;
+        private _webVRCamera: WebVRFreeCamera;
+        private _vrDeviceOrientationCamera: VRDeviceOrientationFreeCamera;
+        private _deviceOrientationCamera: DeviceOrientationCamera;
         
         constructor(scene: Scene, private webVROptions: WebVROptions = {}) {
             this._scene = scene;
 
             if (!this._scene.activeCamera) {
-                this._scene.activeCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", new BABYLON.Vector3(0, 2, 0), scene);
+                this._deviceOrientationCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", new BABYLON.Vector3(0, 2, 0), scene);
             }
             else {
-                var newCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._scene.activeCamera.position, scene);
+                this._deviceOrientationCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._scene.activeCamera.position, scene);
                 if ((<FreeCamera>scene.activeCamera).rotation) {
-                    newCamera.rotation = (<FreeCamera>scene.activeCamera).rotation.clone();
+                    this._deviceOrientationCamera.rotation = (<FreeCamera>scene.activeCamera).rotation.clone();
                 }
-                newCamera.minZ = this._scene.activeCamera.minZ;
-                newCamera.maxZ = this._scene.activeCamera.maxZ;
-                this._scene.activeCamera = newCamera;
+                this._deviceOrientationCamera.minZ = this._scene.activeCamera.minZ;
+                this._deviceOrientationCamera.maxZ = this._scene.activeCamera.maxZ;
             }
+            this._scene.activeCamera = this._deviceOrientationCamera;
             this._position = this._scene.activeCamera.position;
             this._canvas = scene.getEngine().getRenderingCanvas();
             this._scene.activeCamera.attachControl(this._canvas);
@@ -61,13 +64,14 @@ module BABYLON {
             if (navigator.getVRDisplays) {
                 navigator.getVRDisplays().then((headsets) => {
                     if (headsets.length > 0) {
-                        scene.getEngine().initWebVR();
+                        this._webVRCamera = new BABYLON.WebVRFreeCamera("WebVRHelper", this._position, this._scene);
                         this._webVRsupportedAndReady = true;
                     }
                     document.body.appendChild(this._btnVR); 
                 });
             }
             else {
+                this._vrDeviceOrientationCamera = new BABYLON.VRDeviceOrientationFreeCamera("VRDeviceOrientationVRHelper", this._position, this._scene);
                 document.body.appendChild(this._btnVR); 
             }
 
@@ -77,13 +81,14 @@ module BABYLON {
         }
 
         public enterVR() {
-            this._scene.activeCamera.dispose();
             // If WebVR is supported and a headset is connected
             if (this._webVRsupportedAndReady) {
-                this._scene.activeCamera = new BABYLON.WebVRFreeCamera("WebVRHelper", this._position, this._scene);
+                this._webVRCamera.position = this._position;
+                this._scene.activeCamera = this._webVRCamera;
             }
             else {
-                this._scene.activeCamera = new BABYLON.VRDeviceOrientationFreeCamera("VRDeviceOrientationVRHelper", this._position, this._scene);
+                this._vrDeviceOrientationCamera.position = this._position;
+                this._scene.activeCamera = this._vrDeviceOrientationCamera;
                 this._scene.getEngine().switchFullscreen(true); 
             }
             this._scene.activeCamera.attachControl(this._canvas);
@@ -97,9 +102,9 @@ module BABYLON {
             }
             if (this._scene.activeCamera) {
                 this._position = this._scene.activeCamera.position;
-                this._scene.activeCamera.dispose();
             }
-            this._scene.activeCamera = new BABYLON.DeviceOrientationCamera("deviceOrientationVRHelper", this._position, this._scene); 
+            this._deviceOrientationCamera.position = this._position;
+            this._scene.activeCamera = this._deviceOrientationCamera;
             this._scene.activeCamera.attachControl(this._canvas);
             this._isInVRMode = false;
             this._btnVR.style.display = ""; 
@@ -118,6 +123,13 @@ module BABYLON {
             if (this._isInVRMode) {
                 this.exitVR();
             }
+            this._deviceOrientationCamera.dispose();
+            if (this._webVRCamera) {
+                this._webVRCamera.dispose();
+            }
+            if (this._vrDeviceOrientationCamera) {
+                this._vrDeviceOrientationCamera.dispose();
+            }
             document.body.removeChild(this._btnVR);
         }