Nightly

dist/preview release/babylon.max.js

@@ -27854,12 +27854,13 @@ var BABYLON;
          * @param onAnimationEnd defines the function to be executed when the animation ends
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the animatable object created for this animation
          */
-        Scene.prototype.beginWeightedAnimation = function (target, from, to, weight, loop, speedRatio, onAnimationEnd, animatable, targetMask) {
+        Scene.prototype.beginWeightedAnimation = function (target, from, to, weight, loop, speedRatio, onAnimationEnd, animatable, targetMask, onAnimationLoop) {
             if (weight === void 0) { weight = 1.0; }
             if (speedRatio === void 0) { speedRatio = 1.0; }
-            var returnedAnimatable = this.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, false, targetMask);
+            var returnedAnimatable = this.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, false, targetMask, onAnimationLoop);
             returnedAnimatable.weight = weight;
             return returnedAnimatable;
         };
@@ -27873,10 +27874,11 @@ var BABYLON;
          * @param onAnimationEnd defines the function to be executed when the animation ends
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param stopCurrent defines if the current animations must be stopped first (true by default)
-         * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param targetMask defines if the target should be animate if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the animatable object created for this animation
          */
-        Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask) {
+        Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop) {
             if (speedRatio === void 0) { speedRatio = 1.0; }
             if (stopCurrent === void 0) { stopCurrent = true; }
             if (from > to && speedRatio > 0) {
@@ -27886,7 +27888,7 @@ var BABYLON;
                 this.stopAnimation(target, undefined, targetMask);
             }
             if (!animatable) {
-                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd);
+                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, undefined, onAnimationLoop);
             }
             var shouldRunTargetAnimations = targetMask ? targetMask(target) : true;
             // Local animations
@@ -27897,7 +27899,7 @@ var BABYLON;
             if (target.getAnimatables) {
                 var animatables = target.getAnimatables();
                 for (var index = 0; index < animatables.length; index++) {
-                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask);
+                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop);
                 }
             }
             animatable.reset();
@@ -27915,9 +27917,10 @@ var BABYLON;
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param stopCurrent defines if the current animations must be stopped first (true by default)
          * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of created animatables
          */
-        Scene.prototype.beginHierarchyAnimation = function (target, directDescendantsOnly, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask) {
+        Scene.prototype.beginHierarchyAnimation = function (target, directDescendantsOnly, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop) {
             if (speedRatio === void 0) { speedRatio = 1.0; }
             if (stopCurrent === void 0) { stopCurrent = true; }
             var children = target.getDescendants(directDescendantsOnly);
@@ -27938,13 +27941,14 @@ var BABYLON;
          * @param loop defines if you want animation to loop (off by default)
          * @param speedRatio defines the speed ratio to apply to all animations
          * @param onAnimationEnd defines the callback to call when an animation ends (will be called once per node)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of created animatables
          */
-        Scene.prototype.beginDirectAnimation = function (target, animations, from, to, loop, speedRatio, onAnimationEnd) {
+        Scene.prototype.beginDirectAnimation = function (target, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop) {
             if (speedRatio === undefined) {
                 speedRatio = 1.0;
             }
-            var animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, animations);
+            var animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, animations, onAnimationLoop);
             return animatable;
         };
         /**
@@ -27957,15 +27961,16 @@ var BABYLON;
          * @param loop defines if you want animation to loop (off by default)
          * @param speedRatio defines the speed ratio to apply to all animations
          * @param onAnimationEnd defines the callback to call when an animation ends (will be called once per node)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of animatables created for all nodes
          */
-        Scene.prototype.beginDirectHierarchyAnimation = function (target, directDescendantsOnly, animations, from, to, loop, speedRatio, onAnimationEnd) {
+        Scene.prototype.beginDirectHierarchyAnimation = function (target, directDescendantsOnly, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop) {
             var children = target.getDescendants(directDescendantsOnly);
             var result = [];
-            result.push(this.beginDirectAnimation(target, animations, from, to, loop, speedRatio, onAnimationEnd));
+            result.push(this.beginDirectAnimation(target, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop));
             for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
                 var child = children_2[_i];
-                result.push(this.beginDirectAnimation(child, animations, from, to, loop, speedRatio, onAnimationEnd));
+                result.push(this.beginDirectAnimation(child, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop));
             }
             return result;
         };
@@ -55208,10 +55213,14 @@ var BABYLON;
             this._to = -Number.MAX_VALUE;
             this._speedRatio = 1;
             /**
-             * This observable will notify when one animation have ended.
+             * This observable will notify when one animation have ended
              */
             this.onAnimationEndObservable = new BABYLON.Observable();
             /**
+             * Observer raised when one animation loops
+             */
+            this.onAnimationLoopObservable = new BABYLON.Observable();
+            /**
              * This observable will notify when all animations have ended.
              */
             this.onAnimationGroupEndObservable = new BABYLON.Observable();
@@ -55398,6 +55407,9 @@ var BABYLON;
                     _this.onAnimationEndObservable.notifyObservers(targetedAnimation);
                     _this._checkAnimationGroupEnded(animatable);
                 };
+                animatable.onAnimationLoop = function () {
+                    _this.onAnimationLoopObservable.notifyObservers(targetedAnimation);
+                };
                 this_1._animatables.push(animatable);
             };
             var this_1 = this;
@@ -55549,6 +55561,11 @@ var BABYLON;
             if (index > -1) {
                 this._scene.animationGroups.splice(index, 1);
             }
+            this.onAnimationEndObservable.clear();
+            this.onAnimationGroupEndObservable.clear();
+            this.onAnimationGroupPauseObservable.clear();
+            this.onAnimationGroupPlayObservable.clear();
+            this.onAnimationLoopObservable.clear();
         };
         AnimationGroup.prototype._checkAnimationGroupEnded = function (animatable) {
             // animatable should be taken out of the array
@@ -55978,9 +55995,10 @@ var BABYLON;
          * @param loop defines if the current animation must loop
          * @param speedRatio defines the current speed ratio
          * @param weight defines the weight of the animation (default is -1 so no weight)
+         * @param onLoop optional callback called when animation loops
          * @returns a boolean indicating if the animation is running
          */
-        RuntimeAnimation.prototype.animate = function (delay, from, to, loop, speedRatio, weight) {
+        RuntimeAnimation.prototype.animate = function (delay, from, to, loop, speedRatio, weight, onLoop) {
             if (weight === void 0) { weight = -1.0; }
             var targetPropertyPath = this._animation.targetPropertyPath;
             if (!targetPropertyPath || targetPropertyPath.length < 1) {
@@ -56104,6 +56122,9 @@ var BABYLON;
             var events = this._events;
             if (range > 0 && this.currentFrame > currentFrame ||
                 range < 0 && this.currentFrame < currentFrame) {
+                if (onLoop) {
+                    onLoop();
+                }
                 // Need to reset animation events
                 for (var index = 0; index < events.length; index++) {
                     if (!events[index].onlyOnce) {
@@ -56161,6 +56182,7 @@ var BABYLON;
          * @param speedRatio defines the factor to apply to animation speed (default is 1)
          * @param onAnimationEnd defines a callback to call when animation ends if it is not looping
          * @param animations defines a group of animation to add to the new Animatable
+         * @param onAnimationLoop defines a callback to call when animation loops
          */
         function Animatable(scene, 
         /** defines the target object */
@@ -56172,7 +56194,9 @@ var BABYLON;
         /** defines if the animation must loop (default is false)  */
         loopAnimation, speedRatio, 
         /** defines a callback to call when animation ends if it is not looping */
-        onAnimationEnd, animations) {
+        onAnimationEnd, animations, 
+        /** defines a callback to call when animation loops */
+        onAnimationLoop) {
             if (fromFrame === void 0) { fromFrame = 0; }
             if (toFrame === void 0) { toFrame = 100; }
             if (loopAnimation === void 0) { loopAnimation = false; }
@@ -56182,6 +56206,7 @@ var BABYLON;
             this.toFrame = toFrame;
             this.loopAnimation = loopAnimation;
             this.onAnimationEnd = onAnimationEnd;
+            this.onAnimationLoop = onAnimationLoop;
             this._localDelayOffset = null;
             this._pausedDelay = null;
             this._runtimeAnimations = new Array();
@@ -56201,6 +56226,10 @@ var BABYLON;
              * Observer raised when the animation ends
              */
             this.onAnimationEndObservable = new BABYLON.Observable();
+            /**
+             * Observer raised when the animation loops
+             */
+            this.onAnimationLoopObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -56459,6 +56488,7 @@ var BABYLON;
         };
         /** @hidden */
         Animatable.prototype._animate = function (delay) {
+            var _this = this;
             if (this._paused) {
                 this.animationStarted = false;
                 if (this._pausedDelay === null) {
@@ -56483,7 +56513,12 @@ var BABYLON;
             var index;
             for (index = 0; index < runtimeAnimations.length; index++) {
                 var animation = runtimeAnimations[index];
-                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this._speedRatio, this._weight);
+                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this._speedRatio, this._weight, function () {
+                    _this.onAnimationLoopObservable.notifyObservers(_this);
+                    if (_this.onAnimationLoop) {
+                        _this.onAnimationLoop();
+                    }
+                });
                 running = running || isRunning;
             }
             this.animationStarted = running;
@@ -56500,6 +56535,8 @@ var BABYLON;
                 this._raiseOnAnimationEnd();
                 if (this.disposeOnEnd) {
                     this.onAnimationEnd = null;
+                    this.onAnimationLoop = null;
+                    this.onAnimationLoopObservable.clear();
                     this.onAnimationEndObservable.clear();
                 }
             }

dist/preview release/babylon.no-module.max.js

@@ -27821,12 +27821,13 @@ var BABYLON;
          * @param onAnimationEnd defines the function to be executed when the animation ends
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the animatable object created for this animation
          */
-        Scene.prototype.beginWeightedAnimation = function (target, from, to, weight, loop, speedRatio, onAnimationEnd, animatable, targetMask) {
+        Scene.prototype.beginWeightedAnimation = function (target, from, to, weight, loop, speedRatio, onAnimationEnd, animatable, targetMask, onAnimationLoop) {
             if (weight === void 0) { weight = 1.0; }
             if (speedRatio === void 0) { speedRatio = 1.0; }
-            var returnedAnimatable = this.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, false, targetMask);
+            var returnedAnimatable = this.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, false, targetMask, onAnimationLoop);
             returnedAnimatable.weight = weight;
             return returnedAnimatable;
         };
@@ -27840,10 +27841,11 @@ var BABYLON;
          * @param onAnimationEnd defines the function to be executed when the animation ends
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param stopCurrent defines if the current animations must be stopped first (true by default)
-         * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param targetMask defines if the target should be animate if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the animatable object created for this animation
          */
-        Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask) {
+        Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop) {
             if (speedRatio === void 0) { speedRatio = 1.0; }
             if (stopCurrent === void 0) { stopCurrent = true; }
             if (from > to && speedRatio > 0) {
@@ -27853,7 +27855,7 @@ var BABYLON;
                 this.stopAnimation(target, undefined, targetMask);
             }
             if (!animatable) {
-                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd);
+                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, undefined, onAnimationLoop);
             }
             var shouldRunTargetAnimations = targetMask ? targetMask(target) : true;
             // Local animations
@@ -27864,7 +27866,7 @@ var BABYLON;
             if (target.getAnimatables) {
                 var animatables = target.getAnimatables();
                 for (var index = 0; index < animatables.length; index++) {
-                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask);
+                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop);
                 }
             }
             animatable.reset();
@@ -27882,9 +27884,10 @@ var BABYLON;
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param stopCurrent defines if the current animations must be stopped first (true by default)
          * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of created animatables
          */
-        Scene.prototype.beginHierarchyAnimation = function (target, directDescendantsOnly, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask) {
+        Scene.prototype.beginHierarchyAnimation = function (target, directDescendantsOnly, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop) {
             if (speedRatio === void 0) { speedRatio = 1.0; }
             if (stopCurrent === void 0) { stopCurrent = true; }
             var children = target.getDescendants(directDescendantsOnly);
@@ -27905,13 +27908,14 @@ var BABYLON;
          * @param loop defines if you want animation to loop (off by default)
          * @param speedRatio defines the speed ratio to apply to all animations
          * @param onAnimationEnd defines the callback to call when an animation ends (will be called once per node)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of created animatables
          */
-        Scene.prototype.beginDirectAnimation = function (target, animations, from, to, loop, speedRatio, onAnimationEnd) {
+        Scene.prototype.beginDirectAnimation = function (target, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop) {
             if (speedRatio === undefined) {
                 speedRatio = 1.0;
             }
-            var animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, animations);
+            var animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, animations, onAnimationLoop);
             return animatable;
         };
         /**
@@ -27924,15 +27928,16 @@ var BABYLON;
          * @param loop defines if you want animation to loop (off by default)
          * @param speedRatio defines the speed ratio to apply to all animations
          * @param onAnimationEnd defines the callback to call when an animation ends (will be called once per node)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of animatables created for all nodes
          */
-        Scene.prototype.beginDirectHierarchyAnimation = function (target, directDescendantsOnly, animations, from, to, loop, speedRatio, onAnimationEnd) {
+        Scene.prototype.beginDirectHierarchyAnimation = function (target, directDescendantsOnly, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop) {
             var children = target.getDescendants(directDescendantsOnly);
             var result = [];
-            result.push(this.beginDirectAnimation(target, animations, from, to, loop, speedRatio, onAnimationEnd));
+            result.push(this.beginDirectAnimation(target, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop));
             for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
                 var child = children_2[_i];
-                result.push(this.beginDirectAnimation(child, animations, from, to, loop, speedRatio, onAnimationEnd));
+                result.push(this.beginDirectAnimation(child, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop));
             }
             return result;
         };
@@ -55175,10 +55180,14 @@ var BABYLON;
             this._to = -Number.MAX_VALUE;
             this._speedRatio = 1;
             /**
-             * This observable will notify when one animation have ended.
+             * This observable will notify when one animation have ended
              */
             this.onAnimationEndObservable = new BABYLON.Observable();
             /**
+             * Observer raised when one animation loops
+             */
+            this.onAnimationLoopObservable = new BABYLON.Observable();
+            /**
              * This observable will notify when all animations have ended.
              */
             this.onAnimationGroupEndObservable = new BABYLON.Observable();
@@ -55365,6 +55374,9 @@ var BABYLON;
                     _this.onAnimationEndObservable.notifyObservers(targetedAnimation);
                     _this._checkAnimationGroupEnded(animatable);
                 };
+                animatable.onAnimationLoop = function () {
+                    _this.onAnimationLoopObservable.notifyObservers(targetedAnimation);
+                };
                 this_1._animatables.push(animatable);
             };
             var this_1 = this;
@@ -55516,6 +55528,11 @@ var BABYLON;
             if (index > -1) {
                 this._scene.animationGroups.splice(index, 1);
             }
+            this.onAnimationEndObservable.clear();
+            this.onAnimationGroupEndObservable.clear();
+            this.onAnimationGroupPauseObservable.clear();
+            this.onAnimationGroupPlayObservable.clear();
+            this.onAnimationLoopObservable.clear();
         };
         AnimationGroup.prototype._checkAnimationGroupEnded = function (animatable) {
             // animatable should be taken out of the array
@@ -55945,9 +55962,10 @@ var BABYLON;
          * @param loop defines if the current animation must loop
          * @param speedRatio defines the current speed ratio
          * @param weight defines the weight of the animation (default is -1 so no weight)
+         * @param onLoop optional callback called when animation loops
          * @returns a boolean indicating if the animation is running
          */
-        RuntimeAnimation.prototype.animate = function (delay, from, to, loop, speedRatio, weight) {
+        RuntimeAnimation.prototype.animate = function (delay, from, to, loop, speedRatio, weight, onLoop) {
             if (weight === void 0) { weight = -1.0; }
             var targetPropertyPath = this._animation.targetPropertyPath;
             if (!targetPropertyPath || targetPropertyPath.length < 1) {
@@ -56071,6 +56089,9 @@ var BABYLON;
             var events = this._events;
             if (range > 0 && this.currentFrame > currentFrame ||
                 range < 0 && this.currentFrame < currentFrame) {
+                if (onLoop) {
+                    onLoop();
+                }
                 // Need to reset animation events
                 for (var index = 0; index < events.length; index++) {
                     if (!events[index].onlyOnce) {
@@ -56128,6 +56149,7 @@ var BABYLON;
          * @param speedRatio defines the factor to apply to animation speed (default is 1)
          * @param onAnimationEnd defines a callback to call when animation ends if it is not looping
          * @param animations defines a group of animation to add to the new Animatable
+         * @param onAnimationLoop defines a callback to call when animation loops
          */
         function Animatable(scene, 
         /** defines the target object */
@@ -56139,7 +56161,9 @@ var BABYLON;
         /** defines if the animation must loop (default is false)  */
         loopAnimation, speedRatio, 
         /** defines a callback to call when animation ends if it is not looping */
-        onAnimationEnd, animations) {
+        onAnimationEnd, animations, 
+        /** defines a callback to call when animation loops */
+        onAnimationLoop) {
             if (fromFrame === void 0) { fromFrame = 0; }
             if (toFrame === void 0) { toFrame = 100; }
             if (loopAnimation === void 0) { loopAnimation = false; }
@@ -56149,6 +56173,7 @@ var BABYLON;
             this.toFrame = toFrame;
             this.loopAnimation = loopAnimation;
             this.onAnimationEnd = onAnimationEnd;
+            this.onAnimationLoop = onAnimationLoop;
             this._localDelayOffset = null;
             this._pausedDelay = null;
             this._runtimeAnimations = new Array();
@@ -56168,6 +56193,10 @@ var BABYLON;
              * Observer raised when the animation ends
              */
             this.onAnimationEndObservable = new BABYLON.Observable();
+            /**
+             * Observer raised when the animation loops
+             */
+            this.onAnimationLoopObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -56426,6 +56455,7 @@ var BABYLON;
         };
         /** @hidden */
         Animatable.prototype._animate = function (delay) {
+            var _this = this;
             if (this._paused) {
                 this.animationStarted = false;
                 if (this._pausedDelay === null) {
@@ -56450,7 +56480,12 @@ var BABYLON;
             var index;
             for (index = 0; index < runtimeAnimations.length; index++) {
                 var animation = runtimeAnimations[index];
-                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this._speedRatio, this._weight);
+                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this._speedRatio, this._weight, function () {
+                    _this.onAnimationLoopObservable.notifyObservers(_this);
+                    if (_this.onAnimationLoop) {
+                        _this.onAnimationLoop();
+                    }
+                });
                 running = running || isRunning;
             }
             this.animationStarted = running;
@@ -56467,6 +56502,8 @@ var BABYLON;
                 this._raiseOnAnimationEnd();
                 if (this.disposeOnEnd) {
                     this.onAnimationEnd = null;
+                    this.onAnimationLoop = null;
+                    this.onAnimationLoopObservable.clear();
                     this.onAnimationEndObservable.clear();
                 }
             }

dist/preview release/es6.js

@@ -27821,12 +27821,13 @@ var BABYLON;
          * @param onAnimationEnd defines the function to be executed when the animation ends
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the animatable object created for this animation
          */
-        Scene.prototype.beginWeightedAnimation = function (target, from, to, weight, loop, speedRatio, onAnimationEnd, animatable, targetMask) {
+        Scene.prototype.beginWeightedAnimation = function (target, from, to, weight, loop, speedRatio, onAnimationEnd, animatable, targetMask, onAnimationLoop) {
             if (weight === void 0) { weight = 1.0; }
             if (speedRatio === void 0) { speedRatio = 1.0; }
-            var returnedAnimatable = this.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, false, targetMask);
+            var returnedAnimatable = this.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd, animatable, false, targetMask, onAnimationLoop);
             returnedAnimatable.weight = weight;
             return returnedAnimatable;
         };
@@ -27840,10 +27841,11 @@ var BABYLON;
          * @param onAnimationEnd defines the function to be executed when the animation ends
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param stopCurrent defines if the current animations must be stopped first (true by default)
-         * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param targetMask defines if the target should be animate if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the animatable object created for this animation
          */
-        Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask) {
+        Scene.prototype.beginAnimation = function (target, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop) {
             if (speedRatio === void 0) { speedRatio = 1.0; }
             if (stopCurrent === void 0) { stopCurrent = true; }
             if (from > to && speedRatio > 0) {
@@ -27853,7 +27855,7 @@ var BABYLON;
                 this.stopAnimation(target, undefined, targetMask);
             }
             if (!animatable) {
-                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd);
+                animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, undefined, onAnimationLoop);
             }
             var shouldRunTargetAnimations = targetMask ? targetMask(target) : true;
             // Local animations
@@ -27864,7 +27866,7 @@ var BABYLON;
             if (target.getAnimatables) {
                 var animatables = target.getAnimatables();
                 for (var index = 0; index < animatables.length; index++) {
-                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask);
+                    this.beginAnimation(animatables[index], from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop);
                 }
             }
             animatable.reset();
@@ -27882,9 +27884,10 @@ var BABYLON;
          * @param animatable defines an animatable object. If not provided a new one will be created from the given params
          * @param stopCurrent defines if the current animations must be stopped first (true by default)
          * @param targetMask defines if the target should be animated if animations are present (this is called recursively on descendant animatables regardless of return value)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of created animatables
          */
-        Scene.prototype.beginHierarchyAnimation = function (target, directDescendantsOnly, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask) {
+        Scene.prototype.beginHierarchyAnimation = function (target, directDescendantsOnly, from, to, loop, speedRatio, onAnimationEnd, animatable, stopCurrent, targetMask, onAnimationLoop) {
             if (speedRatio === void 0) { speedRatio = 1.0; }
             if (stopCurrent === void 0) { stopCurrent = true; }
             var children = target.getDescendants(directDescendantsOnly);
@@ -27905,13 +27908,14 @@ var BABYLON;
          * @param loop defines if you want animation to loop (off by default)
          * @param speedRatio defines the speed ratio to apply to all animations
          * @param onAnimationEnd defines the callback to call when an animation ends (will be called once per node)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of created animatables
          */
-        Scene.prototype.beginDirectAnimation = function (target, animations, from, to, loop, speedRatio, onAnimationEnd) {
+        Scene.prototype.beginDirectAnimation = function (target, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop) {
             if (speedRatio === undefined) {
                 speedRatio = 1.0;
             }
-            var animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, animations);
+            var animatable = new BABYLON.Animatable(this, target, from, to, loop, speedRatio, onAnimationEnd, animations, onAnimationLoop);
             return animatable;
         };
         /**
@@ -27924,15 +27928,16 @@ var BABYLON;
          * @param loop defines if you want animation to loop (off by default)
          * @param speedRatio defines the speed ratio to apply to all animations
          * @param onAnimationEnd defines the callback to call when an animation ends (will be called once per node)
+         * @param onAnimationLoop defines the callback to call when an animation loops
          * @returns the list of animatables created for all nodes
          */
-        Scene.prototype.beginDirectHierarchyAnimation = function (target, directDescendantsOnly, animations, from, to, loop, speedRatio, onAnimationEnd) {
+        Scene.prototype.beginDirectHierarchyAnimation = function (target, directDescendantsOnly, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop) {
             var children = target.getDescendants(directDescendantsOnly);
             var result = [];
-            result.push(this.beginDirectAnimation(target, animations, from, to, loop, speedRatio, onAnimationEnd));
+            result.push(this.beginDirectAnimation(target, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop));
             for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
                 var child = children_2[_i];
-                result.push(this.beginDirectAnimation(child, animations, from, to, loop, speedRatio, onAnimationEnd));
+                result.push(this.beginDirectAnimation(child, animations, from, to, loop, speedRatio, onAnimationEnd, onAnimationLoop));
             }
             return result;
         };
@@ -55175,10 +55180,14 @@ var BABYLON;
             this._to = -Number.MAX_VALUE;
             this._speedRatio = 1;
             /**
-             * This observable will notify when one animation have ended.
+             * This observable will notify when one animation have ended
              */
             this.onAnimationEndObservable = new BABYLON.Observable();
             /**
+             * Observer raised when one animation loops
+             */
+            this.onAnimationLoopObservable = new BABYLON.Observable();
+            /**
              * This observable will notify when all animations have ended.
              */
             this.onAnimationGroupEndObservable = new BABYLON.Observable();
@@ -55365,6 +55374,9 @@ var BABYLON;
                     _this.onAnimationEndObservable.notifyObservers(targetedAnimation);
                     _this._checkAnimationGroupEnded(animatable);
                 };
+                animatable.onAnimationLoop = function () {
+                    _this.onAnimationLoopObservable.notifyObservers(targetedAnimation);
+                };
                 this_1._animatables.push(animatable);
             };
             var this_1 = this;
@@ -55516,6 +55528,11 @@ var BABYLON;
             if (index > -1) {
                 this._scene.animationGroups.splice(index, 1);
             }
+            this.onAnimationEndObservable.clear();
+            this.onAnimationGroupEndObservable.clear();
+            this.onAnimationGroupPauseObservable.clear();
+            this.onAnimationGroupPlayObservable.clear();
+            this.onAnimationLoopObservable.clear();
         };
         AnimationGroup.prototype._checkAnimationGroupEnded = function (animatable) {
             // animatable should be taken out of the array
@@ -55945,9 +55962,10 @@ var BABYLON;
          * @param loop defines if the current animation must loop
          * @param speedRatio defines the current speed ratio
          * @param weight defines the weight of the animation (default is -1 so no weight)
+         * @param onLoop optional callback called when animation loops
          * @returns a boolean indicating if the animation is running
          */
-        RuntimeAnimation.prototype.animate = function (delay, from, to, loop, speedRatio, weight) {
+        RuntimeAnimation.prototype.animate = function (delay, from, to, loop, speedRatio, weight, onLoop) {
             if (weight === void 0) { weight = -1.0; }
             var targetPropertyPath = this._animation.targetPropertyPath;
             if (!targetPropertyPath || targetPropertyPath.length < 1) {
@@ -56071,6 +56089,9 @@ var BABYLON;
             var events = this._events;
             if (range > 0 && this.currentFrame > currentFrame ||
                 range < 0 && this.currentFrame < currentFrame) {
+                if (onLoop) {
+                    onLoop();
+                }
                 // Need to reset animation events
                 for (var index = 0; index < events.length; index++) {
                     if (!events[index].onlyOnce) {
@@ -56128,6 +56149,7 @@ var BABYLON;
          * @param speedRatio defines the factor to apply to animation speed (default is 1)
          * @param onAnimationEnd defines a callback to call when animation ends if it is not looping
          * @param animations defines a group of animation to add to the new Animatable
+         * @param onAnimationLoop defines a callback to call when animation loops
          */
         function Animatable(scene, 
         /** defines the target object */
@@ -56139,7 +56161,9 @@ var BABYLON;
         /** defines if the animation must loop (default is false)  */
         loopAnimation, speedRatio, 
         /** defines a callback to call when animation ends if it is not looping */
-        onAnimationEnd, animations) {
+        onAnimationEnd, animations, 
+        /** defines a callback to call when animation loops */
+        onAnimationLoop) {
             if (fromFrame === void 0) { fromFrame = 0; }
             if (toFrame === void 0) { toFrame = 100; }
             if (loopAnimation === void 0) { loopAnimation = false; }
@@ -56149,6 +56173,7 @@ var BABYLON;
             this.toFrame = toFrame;
             this.loopAnimation = loopAnimation;
             this.onAnimationEnd = onAnimationEnd;
+            this.onAnimationLoop = onAnimationLoop;
             this._localDelayOffset = null;
             this._pausedDelay = null;
             this._runtimeAnimations = new Array();
@@ -56168,6 +56193,10 @@ var BABYLON;
              * Observer raised when the animation ends
              */
             this.onAnimationEndObservable = new BABYLON.Observable();
+            /**
+             * Observer raised when the animation loops
+             */
+            this.onAnimationLoopObservable = new BABYLON.Observable();
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);
@@ -56426,6 +56455,7 @@ var BABYLON;
         };
         /** @hidden */
         Animatable.prototype._animate = function (delay) {
+            var _this = this;
             if (this._paused) {
                 this.animationStarted = false;
                 if (this._pausedDelay === null) {
@@ -56450,7 +56480,12 @@ var BABYLON;
             var index;
             for (index = 0; index < runtimeAnimations.length; index++) {
                 var animation = runtimeAnimations[index];
-                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this._speedRatio, this._weight);
+                var isRunning = animation.animate(delay - this._localDelayOffset, this.fromFrame, this.toFrame, this.loopAnimation, this._speedRatio, this._weight, function () {
+                    _this.onAnimationLoopObservable.notifyObservers(_this);
+                    if (_this.onAnimationLoop) {
+                        _this.onAnimationLoop();
+                    }
+                });
                 running = running || isRunning;
             }
             this.animationStarted = running;
@@ -56467,6 +56502,8 @@ var BABYLON;
                 this._raiseOnAnimationEnd();
                 if (this.disposeOnEnd) {
                     this.onAnimationEnd = null;
+                    this.onAnimationLoop = null;
+                    this.onAnimationLoopObservable.clear();
                     this.onAnimationEndObservable.clear();
                 }
             }

dist/preview release/gui/babylon.gui.d.ts

@@ -908,6 +908,8 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _isDirty: boolean;
             /** @hidden */
+            protected _wasDirty: boolean;
+            /** @hidden */
             _tempParentMeasure: Measure;
             /** @hidden */
             protected _cachedParentMeasure: Measure;
@@ -945,6 +947,10 @@ declare module BABYLON.GUI {
             isFocusInvisible: boolean;
             /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
             clipChildren: boolean;
+            /**
+                * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
+                */
+            useBitmapCache: boolean;
             /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
             shadowOffsetX: number;
             /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */

dist/preview release/gui/babylon.gui.module.d.ts

@@ -1015,6 +1015,8 @@ declare module 'babylonjs-gui/2D/controls/control' {
             /** @hidden */
             protected _isDirty: boolean;
             /** @hidden */
+            protected _wasDirty: boolean;
+            /** @hidden */
             _tempParentMeasure: Measure;
             /** @hidden */
             protected _cachedParentMeasure: Measure;
@@ -1052,6 +1054,10 @@ declare module 'babylonjs-gui/2D/controls/control' {
             isFocusInvisible: boolean;
             /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
             clipChildren: boolean;
+            /**
+                * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
+                */
+            useBitmapCache: boolean;
             /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
             shadowOffsetX: number;
             /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */
@@ -4078,6 +4084,8 @@ declare module BABYLON.GUI {
             /** @hidden */
             protected _isDirty: boolean;
             /** @hidden */
+            protected _wasDirty: boolean;
+            /** @hidden */
             _tempParentMeasure: Measure;
             /** @hidden */
             protected _cachedParentMeasure: Measure;
@@ -4115,6 +4123,10 @@ declare module BABYLON.GUI {
             isFocusInvisible: boolean;
             /** Gets or sets a boolean indicating if the children are clipped to the current control bounds */
             clipChildren: boolean;
+            /**
+                * Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)
+                */
+            useBitmapCache: boolean;
             /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
             shadowOffsetX: number;
             /** Gets or sets a value indicating the offset to apply on Y axis to render the shadow */

dist/preview release/viewer/babylon.viewer.d.ts

@@ -924,7 +924,7 @@ declare module BabylonViewer {
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 declare module BabylonViewer {
@@ -1558,20 +1558,6 @@ declare module BabylonViewer {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 declare module BabylonViewer {
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-declare module BabylonViewer {
 }
 declare module BabylonViewer {
     export interface IEnvironmentMapConfiguration {
@@ -1742,37 +1728,6 @@ declare module BabylonViewer {
     }
 }
 declare module BabylonViewer {
-    export interface ICameraConfiguration {
-        position?: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        rotation?: {
-            x: number;
-            y: number;
-            z: number;
-            w: number;
-        };
-        fov?: number;
-        fovMode?: number;
-        minZ?: number;
-        maxZ?: number;
-        inertia?: number;
-        exposure?: number;
-        pinchPrecision?: number;
-        behaviors?: {
-            [name: string]: boolean | number | ICameraBehaviorConfiguration;
-        };
-        disableCameraControl?: boolean;
-        disableCtrlForPanning?: boolean;
-        disableAutoFocus?: boolean;
-        [propName: string]: any;
-    }
-    export interface ICameraBehaviorConfiguration {
-        type: number;
-        [propName: string]: any;
-    }
 }
 declare module BabylonViewer {
     /**

dist/preview release/viewer/babylon.viewer.module.d.ts

@@ -985,14 +985,13 @@ declare module 'babylonjs-viewer/templating/viewerTemplatePlugin' {
 }
 
 declare module 'babylonjs-viewer/optimizer/custom' {
-    import { extendedUpgrade } from "babylonjs-viewer/optimizer/custom/extended";
     import { SceneManager } from "babylonjs-viewer/managers/sceneManager";
     /**
       *
       * @param name the name of the custom optimizer configuration
       * @param upgrade set to true if you want to upgrade optimizer and false if you want to degrade
       */
-    export function getCustomOptimizerByName(name: string, upgrade?: boolean): typeof extendedUpgrade;
+    export function getCustomOptimizerByName(name: string, upgrade?: boolean): (sceneManager: SceneManager) => boolean;
     export function registerCustomOptimizer(name: string, optimizer: (sceneManager: SceneManager) => boolean): void;
 }
 
@@ -1663,22 +1662,6 @@ declare module 'babylonjs-viewer/loader/plugins' {
     export function addLoaderPlugin(name: string, plugin: ILoaderPlugin): void;
 }
 
-declare module 'babylonjs-viewer/optimizer/custom/extended' {
-    import { SceneManager } from 'babylonjs-viewer/managers/sceneManager';
-    /**
-        * A custom upgrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedUpgrade(sceneManager: SceneManager): boolean;
-    /**
-        * A custom degrade-oriented function configuration for the scene optimizer.
-        *
-        * @param viewer the viewer to optimize
-        */
-    export function extendedDegrade(sceneManager: SceneManager): boolean;
-}
-
 declare module 'babylonjs-viewer/configuration/interfaces' {
     export * from 'babylonjs-viewer/configuration/interfaces/cameraConfiguration';
     export * from 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration';
@@ -1889,37 +1872,7 @@ declare module 'babylonjs-viewer/loader/plugins/extendedMaterialLoaderPlugin' {
 }
 
 declare module 'babylonjs-viewer/configuration/interfaces/cameraConfiguration' {
-    export interface ICameraConfiguration {
-        position?: {
-            x: number;
-            y: number;
-            z: number;
-        };
-        rotation?: {
-            x: number;
-            y: number;
-            z: number;
-            w: number;
-        };
-        fov?: number;
-        fovMode?: number;
-        minZ?: number;
-        maxZ?: number;
-        inertia?: number;
-        exposure?: number;
-        pinchPrecision?: number;
-        behaviors?: {
-            [name: string]: boolean | number | ICameraBehaviorConfiguration;
-        };
-        disableCameraControl?: boolean;
-        disableCtrlForPanning?: boolean;
-        disableAutoFocus?: boolean;
-        [propName: string]: any;
-    }
-    export interface ICameraBehaviorConfiguration {
-        type: number;
-        [propName: string]: any;
-    }
+    
 }
 
 declare module 'babylonjs-viewer/configuration/interfaces/colorGradingConfiguration' {

src/Animations/babylon.animatable.ts

@@ -111,7 +111,7 @@ module BABYLON {
             public onAnimationEnd?: Nullable<() => void>,
             animations?: Animation[],
             /** defines a callback to call when animation loops */
-            public onAnimationLoop?: Nullable<() => void>, ) {
+            public onAnimationLoop?: Nullable<() => void>) {
             this._scene = scene;
             if (animations) {
                 this.appendAnimations(target, animations);

src/Animations/babylon.animationGroup.ts

@@ -232,7 +232,7 @@ module BABYLON {
                 };
                 animatable.onAnimationLoop = () => {
                     this.onAnimationLoopObservable.notifyObservers(targetedAnimation);
-                }
+                };
                 this._animatables.push(animatable);
             }