TouchCamera can now fallback to regular mouse/keyboard controls

dist/preview release/what's new.md

@@ -22,6 +22,7 @@
       - Expanded AnimationRanges for Nodes (Mesh, Lights, & Cameras) ([Palmer-JC](https://github.com/Palmer-JC))
       - Support for added to Blender Exporter ([Palmer-JC](https://github.com/Palmer-JC))
   - **Updates**
+    - TouchCamera can now fallback to regular mouse/keyboard controls ([deltakosh](https://github.com/deltakosh))
     - Added ability to skip current prepared Action to next active Action (chained by Action.then(Action)) ([vouskprod](http://www.github.com/vousk)) 
     - Added new event triggers `ActionManager.OnLongPressTrigger` and `ActionManager.OnPickDownTrigger` ([vouskprod](http://www.github.com/vousk)) 
     - new `Mesh.convertToUnIndexedMesh()` to create meshes with no indices (which could be faster when vertex reuse is low and vertex structure is small) ([deltakosh](https://github.com/deltakosh)) 

src/Audio/babylon.sound.js

@@ -397,8 +397,9 @@ var BABYLON;
         Sound.prototype.setVolume = function (newVolume, time) {
             if (BABYLON.Engine.audioEngine.canUseWebAudio) {
                 if (time) {
-                    this._soundGain.gain.linearRampToValueAtTime(this._volume, BABYLON.Engine.audioEngine.audioContext.currentTime);
-                    this._soundGain.gain.linearRampToValueAtTime(newVolume, time);
+                    this._soundGain.gain.cancelScheduledValues(BABYLON.Engine.audioEngine.audioContext.currentTime);
+                    this._soundGain.gain.setValueAtTime(this._soundGain.gain.value, BABYLON.Engine.audioEngine.audioContext.currentTime);
+                    this._soundGain.gain.linearRampToValueAtTime(newVolume, BABYLON.Engine.audioEngine.audioContext.currentTime + time);
                 }
                 else {
                     this._soundGain.gain.value = newVolume;

src/Audio/babylon.sound.ts

@@ -432,8 +432,9 @@
         public setVolume(newVolume: number, time?: number) {
             if (Engine.audioEngine.canUseWebAudio) {
                 if (time) {
-                    this._soundGain.gain.linearRampToValueAtTime(this._volume, Engine.audioEngine.audioContext.currentTime);
-                    this._soundGain.gain.linearRampToValueAtTime(newVolume, time);
+                    this._soundGain.gain.cancelScheduledValues(Engine.audioEngine.audioContext.currentTime);
+                    this._soundGain.gain.setValueAtTime(this._soundGain.gain.value, Engine.audioEngine.audioContext.currentTime);
+                    this._soundGain.gain.linearRampToValueAtTime(newVolume, Engine.audioEngine.audioContext.currentTime + time);
                 }
                 else {
                     this._soundGain.gain.value = newVolume;

src/Cameras/babylon.arcRotateCamera.ts

@@ -90,7 +90,7 @@
         }
 
         public _getTargetPosition(): Vector3 {
-            return this.target.getAbsolutePosition ? this.target.getAbsolutePosition() : this.target; 
+            return this.target.getAbsolutePosition ? this.target.getAbsolutePosition() : this.target;
         }
 
         // Cache
@@ -551,7 +551,7 @@
             if (!collidedMesh) {
                 this._previousPosition.copyFrom(this.position);
             } else {
-                this.setPosition(newPosition); 
+                this.setPosition(newPosition);
 
                 if (this.onCollide) {
                     this.onCollide(collidedMesh);
@@ -671,4 +671,4 @@
             return serializationObject;
         }
     }
-} 
+} 

src/Cameras/babylon.freeCamera.js

@@ -43,6 +43,9 @@ var BABYLON;
                 updatePosition(newPosition);
             };
         }
+        FreeCamera.prototype._onLostFocus = function (e) {
+            this._keys = [];
+        };
         // Controls
         FreeCamera.prototype.attachControl = function (element, noPreventDefault) {
             var _this = this;
@@ -127,9 +130,6 @@ var BABYLON;
                         }
                     }
                 };
-                this._onLostFocus = function () {
-                    _this._keys = [];
-                };
                 this._reset = function () {
                     _this._keys = [];
                     previousPosition = null;

src/Cameras/babylon.freeCamera.ts

@@ -25,8 +25,7 @@
         private _onMouseOut: (e: MouseEvent) => any;
         private _onMouseMove: (e: MouseEvent) => any;
         private _onKeyDown: (e: KeyboardEvent) => any;
-        private _onKeyUp: (e: KeyboardEvent) => any;
-        public _onLostFocus: (e: FocusEvent) => any;
+        private _onKeyUp: (e: KeyboardEvent) => any;        
 
         public _waitingLockedTargetId: string;
 
@@ -34,6 +33,10 @@
             super(name, position, scene);
         }
 
+        public _onLostFocus(e: FocusEvent): void {
+            this._keys = [];
+        }
+
         // Controls
         public attachControl(element: HTMLElement, noPreventDefault?: boolean): void {
             var previousPosition;
@@ -131,10 +134,6 @@
                     }
                 };
 
-                this._onLostFocus = () => {
-                    this._keys = [];
-                };
-
                 this._reset = () => {
                     this._keys = [];
                     previousPosition = null;

src/Cameras/babylon.touchCamera.js

@@ -14,18 +14,25 @@ var BABYLON;
             this._offsetY = null;
             this._pointerCount = 0;
             this._pointerPressed = [];
-            this.angularSensibility = 200000.0;
-            this.moveSensibility = 500.0;
+            this.touchAngularSensibility = 200000.0;
+            this.touchMoveSensibility = 500.0;
         }
+        TouchCamera.prototype._onLostFocus = function (e) {
+            this._offsetX = null;
+            this._offsetY = null;
+            _super.prototype._onLostFocus.call(this, e);
+        };
         TouchCamera.prototype.attachControl = function (canvas, noPreventDefault) {
             var _this = this;
             var previousPosition;
             if (this._attachedCanvas) {
                 return;
             }
-            this._attachedCanvas = canvas;
             if (this._onPointerDown === undefined) {
                 this._onPointerDown = function (evt) {
+                    if (evt.pointerType === "mouse") {
+                        return;
+                    }
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -39,6 +46,9 @@ var BABYLON;
                     };
                 };
                 this._onPointerUp = function (evt) {
+                    if (evt.pointerType === "mouse") {
+                        return;
+                    }
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -55,6 +65,9 @@ var BABYLON;
                     _this._offsetY = null;
                 };
                 this._onPointerMove = function (evt) {
+                    if (evt.pointerType === "mouse") {
+                        return;
+                    }
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -68,18 +81,12 @@ var BABYLON;
                     _this._offsetX = evt.clientX - previousPosition.x;
                     _this._offsetY = -(evt.clientY - previousPosition.y);
                 };
-                this._onLostFocus = function () {
-                    _this._offsetX = null;
-                    _this._offsetY = null;
-                };
             }
             canvas.addEventListener("pointerdown", this._onPointerDown);
             canvas.addEventListener("pointerup", this._onPointerUp);
             canvas.addEventListener("pointerout", this._onPointerUp);
             canvas.addEventListener("pointermove", this._onPointerMove);
-            BABYLON.Tools.RegisterTopRootEvents([
-                { name: "blur", handler: this._onLostFocus }
-            ]);
+            _super.prototype.attachControl.call(this, canvas);
         };
         TouchCamera.prototype.detachControl = function (canvas) {
             if (this._attachedCanvas !== canvas) {
@@ -89,20 +96,17 @@ var BABYLON;
             canvas.removeEventListener("pointerup", this._onPointerUp);
             canvas.removeEventListener("pointerout", this._onPointerUp);
             canvas.removeEventListener("pointermove", this._onPointerMove);
-            BABYLON.Tools.UnregisterTopRootEvents([
-                { name: "blur", handler: this._onLostFocus }
-            ]);
-            this._attachedCanvas = null;
+            _super.prototype.detachControl.call(this, canvas);
         };
         TouchCamera.prototype._checkInputs = function () {
             if (this._offsetX) {
-                this.cameraRotation.y += this._offsetX / this.angularSensibility;
+                this.cameraRotation.y += this._offsetX / this.touchAngularSensibility;
                 if (this._pointerPressed.length > 1) {
-                    this.cameraRotation.x += -this._offsetY / this.angularSensibility;
+                    this.cameraRotation.x += -this._offsetY / this.touchAngularSensibility;
                 }
                 else {
                     var speed = this._computeLocalCameraSpeed();
-                    var direction = new BABYLON.Vector3(0, 0, speed * this._offsetY / this.moveSensibility);
+                    var direction = new BABYLON.Vector3(0, 0, speed * this._offsetY / this.touchMoveSensibility);
                     BABYLON.Matrix.RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, 0, this._cameraRotationMatrix);
                     this.cameraDirection.addInPlace(BABYLON.Vector3.TransformCoordinates(direction, this._cameraRotationMatrix));
                 }

src/Cameras/babylon.touchCamera.ts

@@ -10,25 +10,34 @@ module BABYLON {
         private _onPointerUp: (e: PointerEvent) => any;
         private _onPointerMove: (e: PointerEvent) => any;
 
-        public angularSensibility: number = 200000.0;
-        public moveSensibility: number = 500.0;
+        public touchAngularSensibility: number = 200000.0;
+        public touchMoveSensibility: number = 500.0;
 
         constructor(name: string, position: Vector3, scene: Scene) {
             super(name, position, scene);
         }
 
+        public _onLostFocus(e: FocusEvent): void {
+            this._offsetX = null;
+            this._offsetY = null;
+            super._onLostFocus(e);
+        }
+
         public attachControl(canvas: HTMLCanvasElement, noPreventDefault: boolean): void {
             var previousPosition;
 
             if (this._attachedCanvas) {
                 return;
             }
-            this._attachedCanvas = canvas;
 
             if (this._onPointerDown === undefined) {
 
                 this._onPointerDown = (evt) => {
 
+                    if (evt.pointerType === "mouse") {
+                        return;
+                    }
+
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -46,6 +55,11 @@ module BABYLON {
                 };
 
                 this._onPointerUp = (evt) => {
+
+                    if (evt.pointerType === "mouse") {
+                        return;
+                    }
+
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -66,6 +80,11 @@ module BABYLON {
                 };
 
                 this._onPointerMove = (evt) => {
+
+                    if (evt.pointerType === "mouse") {
+                        return;
+                    }
+
                     if (!noPreventDefault) {
                         evt.preventDefault();
                     }
@@ -84,10 +103,7 @@ module BABYLON {
                     this._offsetY = -(evt.clientY - previousPosition.y);
                 };
 
-                this._onLostFocus = () => {
-                    this._offsetX = null;
-                    this._offsetY = null;
-                };
+                
             }
 
             canvas.addEventListener("pointerdown", this._onPointerDown);
@@ -95,9 +111,7 @@ module BABYLON {
             canvas.addEventListener("pointerout", this._onPointerUp);
             canvas.addEventListener("pointermove", this._onPointerMove);
 
-            Tools.RegisterTopRootEvents([
-                { name: "blur", handler: this._onLostFocus }
-            ]);
+            super.attachControl(canvas);
         }
 
         public detachControl(canvas: HTMLCanvasElement): void {
@@ -109,24 +123,20 @@ module BABYLON {
             canvas.removeEventListener("pointerup", this._onPointerUp);
             canvas.removeEventListener("pointerout", this._onPointerUp);
             canvas.removeEventListener("pointermove", this._onPointerMove);
-
-            Tools.UnregisterTopRootEvents([
-                { name: "blur", handler: this._onLostFocus }
-            ]);
-
-            this._attachedCanvas = null;
+            
+            super.detachControl(canvas);
         }
 
         public _checkInputs(): void {
             if (this._offsetX) {
 
-                this.cameraRotation.y += this._offsetX / this.angularSensibility;
+                this.cameraRotation.y += this._offsetX / this.touchAngularSensibility;
 
                 if (this._pointerPressed.length > 1) {
-                    this.cameraRotation.x += -this._offsetY / this.angularSensibility;
+                    this.cameraRotation.x += -this._offsetY / this.touchAngularSensibility;
                 } else {
                     var speed = this._computeLocalCameraSpeed();
-                    var direction = new Vector3(0, 0, speed * this._offsetY / this.moveSensibility);
+                    var direction = new Vector3(0, 0, speed * this._offsetY / this.touchMoveSensibility);
 
                     Matrix.RotationYawPitchRollToRef(this.rotation.y, this.rotation.x, 0, this._cameraRotationMatrix);
                     this.cameraDirection.addInPlace(Vector3.TransformCoordinates(direction, this._cameraRotationMatrix));

src/Math/babylon.math.js

@@ -875,12 +875,12 @@ var BABYLON;
             var t = 0.0;
             var sign = -1.0;
             var nbRevert = 0;
-            var cross = Vector3.Zero();
+            var cross = Tmp.Vector3[0];
             var dot = 0.0;
             // step 1  : rotation around w
             // Rv3(u) = u1, and u1 belongs to plane xOz
             // Rv3(w) = w1 = w invariant
-            var u1;
+            var u1 = Tmp.Vector3[1];
             if (BABYLON.Tools.WithinEpsilon(w.z, 0, BABYLON.Engine.Epsilon)) {
                 z = 1.0;
             }
@@ -892,7 +892,9 @@ var BABYLON;
                 x = -t * Math.sqrt(1 / (1 + t * t));
                 z = Math.sqrt(1 / (1 + t * t));
             }
-            u1 = new Vector3(x, y, z);
+            u1.x = x;
+            u1.y = y;
+            u1.z = z;
             u1.normalize();
             Vector3.CrossToRef(u, u1, cross); // returns same direction as w (=local z) if positive angle : cross(source, image)
             cross.normalize();
@@ -910,8 +912,8 @@ var BABYLON;
             // step 2 : rotate around u1
             // Ru1(w1) = Ru1(w) = w2, and w2 belongs to plane xOz
             // u1 is yet in xOz and invariant by Ru1, so after this step u1 and w2 will be in xOz
-            var w2;
-            var v2;
+            var w2 = Tmp.Vector3[2];
+            var v2 = Tmp.Vector3[3];
             x = 0.0;
             y = 0.0;
             z = 0.0;
@@ -924,9 +926,11 @@ var BABYLON;
                 x = -t * Math.sqrt(1 / (1 + t * t));
                 z = Math.sqrt(1 / (1 + t * t));
             }
-            w2 = new Vector3(x, y, z);
+            w2.x = x;
+            w2.y = y;
+            w2.z = z;
             w2.normalize();
-            v2 = Vector3.Cross(w2, u1); // v2 image of v1 through rotation around u1
+            Vector3.CrossToRef(w2, u1, v2); // v2 image of v1 through rotation around u1
             v2.normalize();
             Vector3.CrossToRef(w, w2, cross); // returns same direction as u1 (=local x) if positive angle : cross(source, image)
             cross.normalize();
@@ -2946,10 +2950,9 @@ var BABYLON;
     var Tmp = (function () {
         function Tmp() {
         }
-        Tmp.Int = [0, 0, 0, 0, 0, 0]; // 6 temp integers at once should be enough
-        Tmp.Float = [0.0, 0.0, 0.0, 0.0, 0.0, 0.0]; // 6 temp floats at once should be enough
         Tmp.Vector2 = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()]; // 3 temp Vector2 at once should be enough
-        Tmp.Vector3 = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero()]; // 3 temp Vector3 at once should be enough
+        Tmp.Vector3 = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero(),
+            Vector3.Zero(), Vector3.Zero(), Vector3.Zero()]; // 6 temp Vector3 at once should be enough
         Tmp.Vector4 = [Vector4.Zero(), Vector4.Zero(), Vector4.Zero()]; // 3 temp Vector4 at once should be enough
         Tmp.Quaternion = [new Quaternion(0, 0, 0, 0)]; // 1 temp Quaternion at once should be enough
         Tmp.Matrix = [Matrix.Zero(), Matrix.Zero(),

src/Math/babylon.math.ts

@@ -3624,12 +3624,13 @@
     export class Tmp {
         public static Vector2: Vector2[] = [Vector2.Zero(), Vector2.Zero(), Vector2.Zero()];  // 3 temp Vector2 at once should be enough
         public static Vector3: Vector3[] = [Vector3.Zero(), Vector3.Zero(), Vector3.Zero()
-                                        , Vector3.Zero(), Vector3.Zero(), Vector3.Zero()];    // 6 temp Vector3 at once should be enough
+            , Vector3.Zero(), Vector3.Zero(), Vector3.Zero()];    // 6 temp Vector3 at once should be enough
         public static Vector4: Vector4[] = [Vector4.Zero(), Vector4.Zero(), Vector4.Zero()];  // 3 temp Vector4 at once should be enough
         public static Quaternion: Quaternion[] = [new Quaternion(0, 0, 0, 0)];                // 1 temp Quaternion at once should be enough
         public static Matrix: Matrix[] = [Matrix.Zero(), Matrix.Zero(),
-                                          Matrix.Zero(), Matrix.Zero(),
-                                          Matrix.Zero(), Matrix.Zero(),
-                                          Matrix.Zero(), Matrix.Zero()];                      // 6 temp Matrices at once should be enough
+            Matrix.Zero(), Matrix.Zero(),
+            Matrix.Zero(), Matrix.Zero(),
+            Matrix.Zero(), Matrix.Zero()];                      // 6 temp Matrices at once should be enough
     }
 }
+

src/Mesh/babylon.meshBuilder.js

@@ -369,7 +369,7 @@ var BABYLON;
                 var rad;
                 var normal;
                 var rotated;
-                var rotationMatrix = BABYLON.Matrix.Zero();
+                var rotationMatrix = BABYLON.Tmp.Matrix[0];
                 var index = (cap === BABYLON.Mesh._NO_CAP || cap === BABYLON.Mesh.CAP_END) ? 0 : 2;
                 for (var i = 0; i < path.length; i++) {
                     rad = radiusFunctionFinal(i, distances[i]); // current radius
@@ -377,8 +377,10 @@ var BABYLON;
                     normal = normals[i]; // current normal
                     for (var t = 0; t < tessellation; t++) {
                         BABYLON.Matrix.RotationAxisToRef(tangents[i], step * t, rotationMatrix);
-                        rotated = BABYLON.Vector3.TransformCoordinates(normal, rotationMatrix).scaleInPlace(rad).add(path[i]);
-                        circlePath.push(rotated);
+                        rotated = circlePath[t] ? circlePath[t] : BABYLON.Vector3.Zero();
+                        BABYLON.Vector3.TransformCoordinatesToRef(normal, rotationMatrix, rotated);
+                        rotated.scaleInPlace(rad).addInPlace(path[i]);
+                        circlePath[t] = rotated;
                     }
                     circlePaths[index] = circlePath;
                     index++;
@@ -625,7 +627,7 @@ var BABYLON;
                 var rotate = custom ? rotateFunction : returnRotation;
                 var scl = custom ? scaleFunction : returnScale;
                 var index = (cap === BABYLON.Mesh.NO_CAP || cap === BABYLON.Mesh.CAP_END) ? 0 : 2;
-                var rotationMatrix = BABYLON.Matrix.Zero();
+                var rotationMatrix = BABYLON.Tmp.Matrix[0];
                 for (var i = 0; i < curve.length; i++) {
                     var shapePath = new Array();
                     var angleStep = rotate(i, distances[i]);
@@ -633,8 +635,10 @@ var BABYLON;
                     for (var p = 0; p < shape.length; p++) {
                         BABYLON.Matrix.RotationAxisToRef(tangents[i], angle, rotationMatrix);
                         var planed = ((tangents[i].scale(shape[p].z)).add(normals[i].scale(shape[p].x)).add(binormals[i].scale(shape[p].y)));
-                        var rotated = BABYLON.Vector3.TransformCoordinates(planed, rotationMatrix).scaleInPlace(scaleRatio).add(curve[i]);
-                        shapePath.push(rotated);
+                        var rotated = shapePath[p] ? shapePath[p] : BABYLON.Vector3.Zero();
+                        BABYLON.Vector3.TransformCoordinatesToRef(planed, rotationMatrix, rotated);
+                        rotated.scaleInPlace(scaleRatio).addInPlace(curve[i]);
+                        shapePath[p] = rotated;
                     }
                     shapePaths[index] = shapePath;
                     angle += angleStep;

src/Mesh/babylon.meshBuilder.ts

@@ -816,3 +816,4 @@
         }
     }
 }
+

src/Tools/babylon.loadingScreen.js

@@ -20,6 +20,10 @@ var BABYLON;
         }
         DefaultLoadingScreen.prototype.displayLoadingUI = function () {
             var _this = this;
+            if (this._loadingDiv) {
+                // Do not add a loading screen if there is already one  
+                return;
+            }
             this._loadingDiv = document.createElement("div");
             this._loadingDiv.id = "babylonjsLoadingDiv";
             this._loadingDiv.style.opacity = "0";

src/Tools/babylon.loadingScreen.ts

@@ -1,31 +1,32 @@
 module BABYLON {
-	
-	export interface ILoadingScreen {
-		displayLoadingUI : () => void;
-		hideLoadingUI : () => void;
+
+    export interface ILoadingScreen {
+        displayLoadingUI: () => void;
+        hideLoadingUI: () => void;
         //default loader support
-        loadingUIBackgroundColor : string;
-        loadingUIText : string;
-                
-	}
-	
-	export class DefaultLoadingScreen implements ILoadingScreen {
-		
-		private _loadingDiv: HTMLDivElement;
+        loadingUIBackgroundColor: string;
+        loadingUIText: string;
+
+    }
+
+    export class DefaultLoadingScreen implements ILoadingScreen {
+
+        private _loadingDiv: HTMLDivElement;
         private _loadingTextDiv: HTMLDivElement;
-		
-		constructor(private _renderingCanvas : HTMLCanvasElement, private _loadingText = "", private _loadingDivBackgroundColor = "black") {
-			
-		}
-		
-		public displayLoadingUI(): void {
+
+        constructor(private _renderingCanvas: HTMLCanvasElement, private _loadingText = "", private _loadingDivBackgroundColor = "black") {
+
+        }
+
+        public displayLoadingUI(): void {
             if (this._loadingDiv) {
-                // Do not add a loading screen if there is already one
+                // Do not add a loading screen if there is already one  
                 return;
             }
-			this._loadingDiv = document.createElement("div");
 
-		    this._loadingDiv.id = "babylonjsLoadingDiv";
+            this._loadingDiv = document.createElement("div");
+
+            this._loadingDiv.id = "babylonjsLoadingDiv";
             this._loadingDiv.style.opacity = "0";
             this._loadingDiv.style.transition = "opacity 1.5s ease";
 
@@ -45,8 +46,8 @@ module BABYLON {
 
             this._loadingDiv.appendChild(this._loadingTextDiv);
 			
-			//set the predefined text
-			this._loadingTextDiv.innerHTML = this._loadingText;
+            //set the predefined text
+            this._loadingTextDiv.innerHTML = this._loadingText;
 
             // Loading img
             var imgBack = new Image();
@@ -97,9 +98,9 @@ module BABYLON {
                 imgBack.style.transform = "rotateZ(360deg)";
                 imgBack.style.webkitTransform = "rotateZ(360deg)";
             }, 0);
-		}	
+        }
 
-		public hideLoadingUI(): void {
+        public hideLoadingUI(): void {
             if (!this._loadingDiv) {
                 return;
             }
@@ -116,12 +117,12 @@ module BABYLON {
 
             this._loadingDiv.style.opacity = "0";
             this._loadingDiv.addEventListener("transitionend", onTransitionEnd);
-        }	
+        }
 
-		public set loadingUIText(text: string) {
+        public set loadingUIText(text: string) {
             this._loadingText = text;
-			
-			if (this._loadingTextDiv) {
+
+            if (this._loadingTextDiv) {
                 this._loadingTextDiv.innerHTML = this._loadingText;
             }
         }
@@ -140,15 +141,15 @@ module BABYLON {
             this._loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;
         }	
 
-		// Resize
-		private _resizeLoadingUI = () => {
-			var canvasRect = this._renderingCanvas.getBoundingClientRect();
-			this._loadingDiv.style.position = "absolute";
-			this._loadingDiv.style.left = canvasRect.left + "px";
-			this._loadingDiv.style.top = canvasRect.top + "px";
-			this._loadingDiv.style.width = canvasRect.width + "px";
-			this._loadingDiv.style.height = canvasRect.height + "px";
-		}
-	}
-	
+        // Resize
+        private _resizeLoadingUI = () => {
+            var canvasRect = this._renderingCanvas.getBoundingClientRect();
+            this._loadingDiv.style.position = "absolute";
+            this._loadingDiv.style.left = canvasRect.left + "px";
+            this._loadingDiv.style.top = canvasRect.top + "px";
+            this._loadingDiv.style.width = canvasRect.width + "px";
+            this._loadingDiv.style.height = canvasRect.height + "px";
+        }
+    }
+
 }

src/babylon.scene.js

@@ -619,6 +619,13 @@ var BABYLON;
             }
             return null;
         };
+        Object.defineProperty(Scene.prototype, "Animatables", {
+            get: function () {
+                return this._activeAnimatables;
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * Will stop the animation of the given target
          * @param target - the target

src/babylon.scene.ts

@@ -827,6 +827,10 @@
             return null;
         }
 
+        public get Animatables(): Animatable[] {
+            return this._activeAnimatables;
+        }
+
         /**
          * Will stop the animation of the given target
          * @param target - the target