Fix Matrix.Lerp

src/Animations/babylon.animation.js

@@ -155,8 +155,8 @@ var BABYLON;
                 ret += ", Ranges: {";
                 var first = true;
                 for (var name in this._ranges) {
-                    if (!first) {
-                        ret + ", ";
+                    if (first) {
+                        ret += ", ";
                         first = false;
                     }
                     ret += name;
@@ -390,16 +390,24 @@ var BABYLON;
             // Blending
             if (this.enableBlending && this._blendingFactor <= 1.0) {
                 if (!this._originalBlendValue) {
-                    this._originalBlendValue = destination[path];
+                    if (destination[path].clone) {
+                        this._originalBlendValue = destination[path].clone();
+                    }
+                    else {
+                        this._originalBlendValue = destination[path];
+                    }
                 }
                 if (this._originalBlendValue.prototype) {
                     if (this._originalBlendValue.prototype.Lerp) {
-                        destination[path] = this._originalBlendValue.prototype.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
+                        destination[path] = this._originalBlendValue.construtor.prototype.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
                     }
                     else {
                         destination[path] = currentValue;
                     }
                 }
+                else if (this._originalBlendValue.m) {
+                    destination[path] = BABYLON.Matrix.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
+                }
                 else {
                     destination[path] = this._originalBlendValue * (1.0 - this._blendingFactor) + this._blendingFactor * currentValue;
                 }
@@ -642,9 +650,10 @@ var BABYLON;
             var animation = new Animation(parsedAnimation.name, parsedAnimation.property, parsedAnimation.framePerSecond, parsedAnimation.dataType, parsedAnimation.loopBehavior);
             var dataType = parsedAnimation.dataType;
             var keys = [];
-            for (var index = 0; index < parsedAnimation.keys.length; index++) {
+            var data;
+            var index;
+            for (index = 0; index < parsedAnimation.keys.length; index++) {
                 var key = parsedAnimation.keys[index];
-                var data;
                 switch (dataType) {
                     case Animation.ANIMATIONTYPE_FLOAT:
                         data = key.values[0];
@@ -670,7 +679,7 @@ var BABYLON;
             }
             animation.setKeys(keys);
             if (parsedAnimation.ranges) {
-                for (var index = 0; index < parsedAnimation.ranges.length; index++) {
+                for (index = 0; index < parsedAnimation.ranges.length; index++) {
                     data = parsedAnimation.ranges[index];
                     animation.createRange(data.name, data.from, data.to);
                 }

src/Animations/babylon.animation.ts

@@ -179,12 +179,12 @@
             ret += ", datatype: " + (["Float", "Vector3", "Quaternion", "Matrix", "Color3", "Vector2"])[this.dataType];
             ret += ", nKeys: " + (this._keys ? this._keys.length : "none");
             ret += ", nRanges: " + (this._ranges ? Object.keys(this._ranges).length : "none");
-            if (fullDetails){
-                ret += ", Ranges: {" 
+            if (fullDetails) {
+                ret += ", Ranges: {";
                 var first = true;
                 for (var name in this._ranges) {
-                    if (!first){
-                        ret + ", ";
+                    if (first) {
+                        ret += ", ";
                         first = false; 
                     }
                     ret += name; 
@@ -446,7 +446,7 @@
                     property = property[this.targetPropertyPath[index]];
                 }
 
-                path = this.targetPropertyPath[this.targetPropertyPath.length - 1]
+                path = this.targetPropertyPath[this.targetPropertyPath.length - 1];
                 destination = property;
             } else {
                 path = this.targetPropertyPath[0];
@@ -456,17 +456,23 @@
             // Blending
             if (this.enableBlending && this._blendingFactor <= 1.0) {
                 if (!this._originalBlendValue) {
-                    this._originalBlendValue = destination[path];
+                    if (destination[path].clone) {
+                        this._originalBlendValue = destination[path].clone();
+                    } else {
+                        this._originalBlendValue = destination[path];
+                    }
                 }
 
                 if (this._originalBlendValue.prototype) { // Complex value
                     
                     if (this._originalBlendValue.prototype.Lerp) { // Lerp supported
-                        destination[path] = this._originalBlendValue.prototype.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
+                        destination[path] = this._originalBlendValue.construtor.prototype.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
                     } else { // Blending not supported
                         destination[path] = currentValue;
                     }
 
+                } else if (this._originalBlendValue.m) { // Matrix
+                    destination[path] = Matrix.Lerp(currentValue, this._originalBlendValue, this._blendingFactor);
                 } else { // Direct value
                     destination[path] = this._originalBlendValue * (1.0 - this._blendingFactor) + this._blendingFactor * currentValue;
                 }
@@ -482,7 +488,7 @@
 
         public goToFrame(frame: number): void {
             if (frame < this._keys[0].frame) {
-                frame = this._keys[0].frame
+                frame = this._keys[0].frame;
             } else if (frame > this._keys[this._keys.length - 1].frame) {
                 frame = this._keys[this._keys.length - 1].frame;
             }
@@ -715,10 +721,12 @@
 
             var dataType = parsedAnimation.dataType;
             var keys = [];
-            for (var index = 0; index < parsedAnimation.keys.length; index++) {
+            var data;
+            var index: number;
+
+            for (index = 0; index < parsedAnimation.keys.length; index++) {
                 var key = parsedAnimation.keys[index];
 
-                var data;
 
                 switch (dataType) {
                     case Animation.ANIMATIONTYPE_FLOAT:
@@ -748,7 +756,7 @@
             animation.setKeys(keys);
 
             if (parsedAnimation.ranges) {
-                for (var index = 0; index < parsedAnimation.ranges.length; index++) {
+                for (index = 0; index < parsedAnimation.ranges.length; index++) {
                     data = parsedAnimation.ranges[index];
                     animation.createRange(data.name, data.from, data.to);
                 }

src/Bones/babylon.bone.ts

@@ -123,9 +123,9 @@
             
             // loop vars declaration / initialization
             var orig: { frame: number, value: Matrix };
-            var origScale = scalingReqd ? BABYLON.Vector3.Zero() : null;
-            var origRotation = scalingReqd ? new BABYLON.Quaternion() : null;
-            var origTranslation = scalingReqd ? BABYLON.Vector3.Zero() : null;
+            var origScale = scalingReqd ? Vector3.Zero() : null;
+            var origRotation = scalingReqd ? new Quaternion() : null;
+            var origTranslation = scalingReqd ? Vector3.Zero() : null;
             var mat: Matrix;
 
             for (var key = 0, nKeys = sourceKeys.length; key < nKeys; key++) {

src/Bones/babylon.skeleton.js

@@ -36,12 +36,12 @@ var BABYLON;
             if (fullDetails) {
                 ret += ", Ranges: {";
                 var first = true;
-                for (var name in this._ranges) {
-                    if (!first) {
-                        ret + ", ";
+                for (var name_1 in this._ranges) {
+                    if (first) {
+                        ret += ", ";
                         first = false;
                     }
-                    ret += name;
+                    ret += name_1;
                 }
                 ret += "}";
             }
@@ -109,14 +109,16 @@ var BABYLON;
             // make a dictionary of source skeleton's bones, so exact same order or doublely nested loop is not required
             var boneDict = {};
             var sourceBones = source.bones;
-            for (var i = 0, nBones = sourceBones.length; i < nBones; i++) {
+            var nBones;
+            var i;
+            for (i = 0, nBones = sourceBones.length; i < nBones; i++) {
                 boneDict[sourceBones[i].name] = sourceBones[i];
             }
             if (this.bones.length !== sourceBones.length) {
                 BABYLON.Tools.Warn("copyAnimationRange: this rig has " + this.bones.length + " bones, while source as " + sourceBones.length);
                 ret = false;
             }
-            for (var i = 0, nBones = this.bones.length; i < nBones; i++) {
+            for (i = 0, nBones = this.bones.length; i < nBones; i++) {
                 var boneName = this.bones[i].name;
                 var sourceBone = boneDict[boneName];
                 if (sourceBone) {
@@ -154,7 +156,7 @@ var BABYLON;
             if (!range) {
                 return null;
             }
-            this._scene.beginAnimation(this, range.from, range.to, loop, speedRatio, onAnimationEnd);
+            return this._scene.beginAnimation(this, range.from, range.to, loop, speedRatio, onAnimationEnd);
         };
         Skeleton.prototype._markAsDirty = function () {
             this._isDirty = true;
@@ -250,6 +252,15 @@ var BABYLON;
             this._isDirty = true;
             return result;
         };
+        Skeleton.prototype.enableBlending = function (blendingSpeed) {
+            if (blendingSpeed === void 0) { blendingSpeed = 0.01; }
+            this.bones.forEach(function (bone) {
+                bone.animations.forEach(function (animation) {
+                    animation.enableBlending = true;
+                    animation.blendingSpeed = blendingSpeed;
+                });
+            });
+        };
         Skeleton.prototype.dispose = function () {
             this._meshesWithPoseMatrix = [];
             // Animations
@@ -292,7 +303,8 @@ var BABYLON;
         Skeleton.Parse = function (parsedSkeleton, scene) {
             var skeleton = new Skeleton(parsedSkeleton.name, parsedSkeleton.id, scene);
             skeleton.needInitialSkinMatrix = parsedSkeleton.needInitialSkinMatrix;
-            for (var index = 0; index < parsedSkeleton.bones.length; index++) {
+            var index;
+            for (index = 0; index < parsedSkeleton.bones.length; index++) {
                 var parsedBone = parsedSkeleton.bones[index];
                 var parentBone = null;
                 if (parsedBone.parentBoneIndex > -1) {
@@ -309,7 +321,7 @@ var BABYLON;
             }
             // placed after bones, so createAnimationRange can cascade down
             if (parsedSkeleton.ranges) {
-                for (var index = 0; index < parsedSkeleton.ranges.length; index++) {
+                for (index = 0; index < parsedSkeleton.ranges.length; index++) {
                     var data = parsedSkeleton.ranges[index];
                     skeleton.createAnimationRange(data.name, data.from, data.to);
                 }

src/Bones/babylon.skeleton.ts

@@ -42,14 +42,14 @@
          * @param {boolean} fullDetails - support for multiple levels of logging within scene loading
          */
         public toString(fullDetails? : boolean) : string {
-            var ret = "Name: " + this.name + ", nBones: " + this.bones.length;
-            ret += ", nAnimationRanges: " + (this._ranges ? Object.keys(this._ranges).length : "none");
-            if (fullDetails){
-                ret += ", Ranges: {" 
-                var first = true;
-                for (var name in this._ranges) {
-                    if (!first){
-                        ret + ", ";
+            var ret = `Name: ${this.name}, nBones: ${this.bones.length}`;
+            ret += `, nAnimationRanges: ${this._ranges ? Object.keys(this._ranges).length : "none"}`;
+            if (fullDetails) {
+                ret += ", Ranges: {"; 
+                let first = true;
+                for (let name in this._ranges) {
+                    if (first) {
+                        ret += ", ";
                         first = false; 
                     }
                     ret += name; 
@@ -125,22 +125,24 @@
             // make a dictionary of source skeleton's bones, so exact same order or doublely nested loop is not required
             var boneDict = {};
             var sourceBones = source.bones;
-            for (var i = 0, nBones = sourceBones.length; i < nBones; i++) {
+            var nBones: number;
+            var i: number;
+            for (i = 0, nBones = sourceBones.length; i < nBones; i++) {
                 boneDict[sourceBones[i].name] = sourceBones[i];
             }
 
             if (this.bones.length !== sourceBones.length){
-                BABYLON.Tools.Warn("copyAnimationRange: this rig has " + this.bones.length + " bones, while source as " + sourceBones.length);
+                Tools.Warn(`copyAnimationRange: this rig has ${this.bones.length} bones, while source as ${sourceBones.length}`);
                 ret = false;
             }
             
-            for (var i = 0, nBones = this.bones.length; i < nBones; i++) {
+            for (i = 0, nBones = this.bones.length; i < nBones; i++) {
                 var boneName = this.bones[i].name;
                 var sourceBone = boneDict[boneName];
                 if (sourceBone) {
                     ret = ret && this.bones[i].copyAnimationRange(sourceBone, name, frameOffset, rescaleAsRequired);
                 } else {
-                    BABYLON.Tools.Warn("copyAnimationRange: not same rig, missing source bone " + boneName);
+                    Tools.Warn("copyAnimationRange: not same rig, missing source bone " + boneName);
                     ret = false;
                 }
             }
@@ -169,14 +171,14 @@
             return ret;
         }
 
-        public beginAnimation(name: string, loop?: boolean, speedRatio?: number, onAnimationEnd?: () => void): void {
+        public beginAnimation(name: string, loop?: boolean, speedRatio?: number, onAnimationEnd?: () => void): Animatable {
             var range = this.getAnimationRange(name);
 
             if (!range) {
                 return null;
             }
 
-            this._scene.beginAnimation(this, range.from, range.to, loop, speedRatio, onAnimationEnd);
+            return this._scene.beginAnimation(this, range.from, range.to, loop, speedRatio, onAnimationEnd);
         }
 
         public _markAsDirty(): void {
@@ -299,6 +301,15 @@
             return result;
         }
 
+        public enableBlending(blendingSpeed = 0.01) {
+            this.bones.forEach((bone) => {
+                bone.animations.forEach((animation: Animation) => {
+                    animation.enableBlending = true;
+                    animation.blendingSpeed = blendingSpeed;
+                });
+            });
+        }
+
         public dispose() {
             this._meshesWithPoseMatrix = [];
 
@@ -356,7 +367,8 @@
 
             skeleton.needInitialSkinMatrix = parsedSkeleton.needInitialSkinMatrix;
 
-            for (var index = 0; index < parsedSkeleton.bones.length; index++) {
+            let index: number;
+            for (index = 0; index < parsedSkeleton.bones.length; index++) {
                 var parsedBone = parsedSkeleton.bones[index];
 
                 var parentBone = null;
@@ -377,7 +389,7 @@
             
             // placed after bones, so createAnimationRange can cascade down
             if (parsedSkeleton.ranges) {
-                for (var index = 0; index < parsedSkeleton.ranges.length; index++) {
+                for (index = 0; index < parsedSkeleton.ranges.length; index++) {
                     var data = parsedSkeleton.ranges[index];
                     skeleton.createAnimationRange(data.name, data.from, data.to);
                 }

src/Debug/babylon.debugLayer.js

@@ -670,7 +670,7 @@ var BABYLON;
                 + "</div><br>"
                 + glInfo.renderer + "<br>";
             if (this.customStatsFunction) {
-                this._statsSubsetDiv.innerHTML += this._statsSubsetDiv.innerHTML;
+                this._statsSubsetDiv.innerHTML += this.customStatsFunction();
             }
         };
         return DebugLayer;

src/Debug/babylon.debugLayer.ts

@@ -826,7 +826,7 @@
                 + glInfo.renderer + "<br>";
 
             if (this.customStatsFunction) {
-                this._statsSubsetDiv.innerHTML += this._statsSubsetDiv.innerHTML;
+                this._statsSubsetDiv.innerHTML += this.customStatsFunction();
             }
         }
     }

src/Math/babylon.math.js

@@ -2038,6 +2038,13 @@ var BABYLON;
             Matrix.FromValuesToRef(1.0, 0, 0, 0, 0, 1.0, 0, 0, 0, 0, 1.0, 0, x, y, z, 1.0, result);
         };
         Matrix.Lerp = function (startValue, endValue, gradient) {
+            var result = Matrix.Zero();
+            for (var index = 0; index < 16; index++) {
+                result.m[index] = startValue.m[index] * gradient + endValue.m[index] * (1.0 - gradient);
+            }
+            return result;
+        };
+        Matrix.DecomposeLerp = function (startValue, endValue, gradient) {
             var startScale = new Vector3(0, 0, 0);
             var startRotation = new Quaternion();
             var startTranslation = new Vector3(0, 0, 0);

src/Math/babylon.math.ts

@@ -2549,6 +2549,16 @@
         }
 
         public static Lerp(startValue: Matrix, endValue: Matrix, gradient: number): Matrix {
+            var result = Matrix.Zero();
+
+            for (var index = 0; index < 16; index++) {
+                result.m[index] = startValue.m[index] * gradient + endValue.m[index] * (1.0 - gradient);
+            }
+
+            return result;
+        }
+
+        public static DecomposeLerp(startValue: Matrix, endValue: Matrix, gradient: number): Matrix {
             var startScale = new Vector3(0, 0, 0);
             var startRotation = new Quaternion();
             var startTranslation = new Vector3(0, 0, 0);

src/Mesh/babylon.mesh.ts

@@ -2158,7 +2158,7 @@
          * Detail here : http://doc.babylonjs.com/tutorials/02._Discover_Basic_Elements#side-orientation    
          * The mesh can be set to updatable with the boolean parameter `updatable` (default false) if its internal geometry is supposed to change once created.  
          */
-        public static ExtrudeShapeCustom(name: string, shape: Vector3[], path: Vector3[], scaleFunction, rotationFunction, ribbonCloseArray: boolean, ribbonClosePath: boolean, cap: number, scene: Scene, updatable?: boolean, sideOrientation?: number, instance?: Mesh): Mesh {
+        public static ExtrudeShapeCustom(name: string, shape: Vector3[], path: Vector3[], scaleFunction: Function, rotationFunction: Function, ribbonCloseArray: boolean, ribbonClosePath: boolean, cap: number, scene: Scene, updatable?: boolean, sideOrientation?: number, instance?: Mesh): Mesh {
             var options = {
                 shape: shape,
                 path: path,