Fixes 2116

dist/preview release/babylon.max.js

@@ -63,6 +63,30 @@ var __extends = (this && this.__extends) || (function () {
         return MathTools;
     }());
     BABYLON.MathTools = MathTools;
+    var Scalar = (function () {
+        function Scalar() {
+        }
+        /**
+         * Creates a new scalar with values linearly interpolated of "amount" between the start scalar and the end scalar.
+         */
+        Scalar.Lerp = function (start, end, amount) {
+            return start + ((end - start) * amount);
+        };
+        /**
+         * Returns a new scalar located for "amount" (float) on the Hermite spline defined by the scalars "value1", "value3", "tangent1", "tangent2".
+         */
+        Scalar.Hermite = function (value1, tangent1, value2, tangent2, amount) {
+            var squared = amount * amount;
+            var cubed = amount * squared;
+            var part1 = ((2.0 * cubed) - (3.0 * squared)) + 1.0;
+            var part2 = (-2.0 * cubed) + (3.0 * squared);
+            var part3 = (cubed - (2.0 * squared)) + amount;
+            var part4 = cubed - squared;
+            return (((value1 * part1) + (value2 * part2)) + (tangent1 * part3)) + (tangent2 * part4);
+        };
+        return Scalar;
+    }());
+    BABYLON.Scalar = Scalar;
     var Color3 = (function () {
         /**
          * Creates a new Color3 object from red, green, blue values, all between 0 and 1.
@@ -859,7 +883,7 @@ var __extends = (this && this.__extends) || (function () {
             return new Vector2(x, y);
         };
         /**
-         * Returns a new Vecto2 located for "amount" (float) on the Hermite spline defined by the vectors "value1", "value3", "tangent1", "tangent2".
+         * Returns a new Vector2 located for "amount" (float) on the Hermite spline defined by the vectors "value1", "value3", "tangent1", "tangent2".
          */
         Vector2.Hermite = function (value1, tangent1, value2, tangent2, amount) {
             var squared = amount * amount;
@@ -2661,6 +2685,9 @@ var __extends = (this && this.__extends) || (function () {
             result.z = (num3 * left.z) + (num2 * right.z);
             result.w = (num3 * left.w) + (num2 * right.w);
         };
+        /**
+         * Returns a new Quaternion located for "amount" (float) on the Hermite interpolation spline defined by the vectors "value1", "tangent1", "value2", "tangent2".
+         */
         Quaternion.Hermite = function (value1, tangent1, value2, tangent2, amount) {
             var squared = amount * amount;
             var cubed = amount * squared;
@@ -18059,7 +18086,8 @@ var BABYLON;
         };
         BaseTexture.prototype.isReady = function () {
             if (this.delayLoadState === BABYLON.Engine.DELAYLOADSTATE_NOTLOADED) {
-                return true;
+                this.delayLoad();
+                return false;
             }
             if (this._texture) {
                 return this._texture.isReady;
@@ -32723,7 +32751,10 @@ var BABYLON;
             this._easingFunction = easingFunction;
         };
         Animation.prototype.floatInterpolateFunction = function (startValue, endValue, gradient) {
-            return startValue + (endValue - startValue) * gradient;
+            return BABYLON.Scalar.Lerp(startValue, endValue, gradient);
+        };
+        Animation.prototype.floatInterpolateFunctionWithTangents = function (startValue, outTangent, endValue, inTangent, gradient) {
+            return BABYLON.Scalar.Hermite(startValue, outTangent, endValue, inTangent, gradient);
         };
         Animation.prototype.quaternionInterpolateFunction = function (startValue, endValue, gradient) {
             return BABYLON.Quaternion.Slerp(startValue, endValue, gradient);
@@ -32796,7 +32827,7 @@ var BABYLON;
                     var startKey = this._keys[key];
                     var startValue = this._getKeyValue(startKey.value);
                     var endValue = this._getKeyValue(endKey.value);
-                    var useTangent = startKey.outTangent && endKey.inTangent;
+                    var useTangent = startKey.outTangent !== undefined && endKey.inTangent !== undefined;
                     var frameDelta = endKey.frame - startKey.frame;
                     // gradient : percent of currentFrame between the frame inf and the frame sup
                     var gradient = (currentFrame - startKey.frame) / frameDelta;
@@ -32807,25 +32838,26 @@ var BABYLON;
                     switch (this.dataType) {
                         // Float
                         case Animation.ANIMATIONTYPE_FLOAT:
+                            var floatValue = useTangent ? this.floatInterpolateFunctionWithTangents(startValue, startKey.outTangent * frameDelta, endValue, endKey.inTangent * frameDelta, gradient) : this.floatInterpolateFunction(startValue, endValue, gradient);
                             switch (loopMode) {
                                 case Animation.ANIMATIONLOOPMODE_CYCLE:
                                 case Animation.ANIMATIONLOOPMODE_CONSTANT:
-                                    return this.floatInterpolateFunction(startValue, endValue, gradient);
+                                    return floatValue;
                                 case Animation.ANIMATIONLOOPMODE_RELATIVE:
-                                    return offsetValue * repeatCount + this.floatInterpolateFunction(startValue, endValue, gradient);
+                                    return offsetValue * repeatCount + floatValue;
                             }
                             break;
                         // Quaternion
                         case Animation.ANIMATIONTYPE_QUATERNION:
-                            var quaternion = useTangent ? this.quaternionInterpolateFunctionWithTangents(startValue, startKey.outTangent.scale(frameDelta), endValue, endKey.inTangent.scale(frameDelta), gradient) : this.quaternionInterpolateFunction(startValue, endValue, gradient);
+                            var quatValue = useTangent ? this.quaternionInterpolateFunctionWithTangents(startValue, startKey.outTangent.scale(frameDelta), endValue, endKey.inTangent.scale(frameDelta), gradient) : this.quaternionInterpolateFunction(startValue, endValue, gradient);
                             switch (loopMode) {
                                 case Animation.ANIMATIONLOOPMODE_CYCLE:
                                 case Animation.ANIMATIONLOOPMODE_CONSTANT:
-                                    return quaternion;
+                                    return quatValue;
                                 case Animation.ANIMATIONLOOPMODE_RELATIVE:
-                                    return quaternion.add(offsetValue.scale(repeatCount));
+                                    return quatValue.add(offsetValue.scale(repeatCount));
                             }
-                            return quaternion;
+                            return quatValue;
                         // Vector3
                         case Animation.ANIMATIONTYPE_VECTOR3:
                             var vec3Value = useTangent ? this.vector3InterpolateFunctionWithTangents(startValue, startKey.outTangent.scale(frameDelta), endValue, endKey.inTangent.scale(frameDelta), gradient) : this.vector3InterpolateFunction(startValue, endValue, gradient);
@@ -57277,6 +57309,7 @@ var BABYLON;
         function MorphTarget(name, influence) {
             if (influence === void 0) { influence = 0; }
             this.name = name;
+            this.animations = new Array();
             this.onInfluenceChanged = new BABYLON.Observable();
             this.influence = influence;
         }

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

@@ -4,8 +4,10 @@ declare module BABYLON.GUI {
         private _isDirty;
         private _renderObserver;
         private _resizeObserver;
+        private _pointerMoveObserver;
         private _background;
         private _rootContainer;
+        _lastControlOver: Control;
         background: string;
         constructor(name: string, width: number, height: number, scene: Scene, generateMipMaps?: boolean, samplingMode?: number);
         markAsDirty(): void;
@@ -15,6 +17,8 @@ declare module BABYLON.GUI {
         private _onResize();
         private _checkUpdate();
         private _render();
+        private _doPicking(x, y, type);
+        attach(): void;
         static CreateForMesh(mesh: AbstractMesh, width?: number, height?: number): AdvancedDynamicTexture;
         static CreateFullscreenUI(name: string, foreground: boolean, scene: Scene): AdvancedDynamicTexture;
     }
@@ -83,6 +87,26 @@ declare module BABYLON.GUI {
         private _marginBottom;
         private _left;
         private _top;
+        /**
+        * An event triggered when the pointer move over the control.
+        * @type {BABYLON.Observable}
+        */
+        onPointerMoveObservable: Observable<Control>;
+        /**
+        * An event triggered when the pointer move out of the control.
+        * @type {BABYLON.Observable}
+        */
+        onPointerOutObservable: Observable<Control>;
+        /**
+        * An event triggered when the pointer taps the control
+        * @type {BABYLON.Observable}
+        */
+        onPointerDownObservable: Observable<Control>;
+        /**
+        * An event triggered when pointer up
+        * @type {BABYLON.Observable}
+        */
+        onPointerUpObservable: Observable<Control>;
         horizontalAlignment: number;
         verticalAlignment: number;
         width: string;
@@ -108,6 +132,9 @@ declare module BABYLON.GUI {
         protected _computeAlignment(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        protected _contains(x: number, y: number): boolean;
+        _processPicking(x: number, y: number, type: number): boolean;
+        protected _processObservables(type: number): boolean;
         private _prepareFont();
         private static _HORIZONTAL_ALIGNMENT_LEFT;
         private static _HORIZONTAL_ALIGNMENT_RIGHT;
@@ -142,6 +169,7 @@ declare module BABYLON.GUI {
         _reOrderControl(control: Control): void;
         protected _localDraw(context: CanvasRenderingContext2D): void;
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+        _processPicking(x: number, y: number, type: number): boolean;
         protected _clipForChildren(context: CanvasRenderingContext2D): void;
         protected _additionalProcessing(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
     }
@@ -209,3 +237,12 @@ declare module BABYLON.GUI {
         static readonly STRETCH_UNIFORM: number;
     }
 }
+
+/// <reference path="../../../dist/preview release/babylon.d.ts" />
+declare module BABYLON.GUI {
+    class Button extends Rectangle {
+        name: string;
+        constructor(name: string);
+        static CreateImageButton(name: string, text: string, imageUrl: string): Button;
+    }
+}

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

@@ -62,6 +62,9 @@ var BABYLON;
                 if (this._resizeObserver) {
                     this.getScene().getEngine().onResizeObservable.remove(this._resizeObserver);
                 }
+                if (this._pointerMoveObserver) {
+                    this.getScene().onPointerObservable.remove(this._pointerMoveObserver);
+                }
                 _super.prototype.dispose.call(this);
             };
             AdvancedDynamicTexture.prototype._onResize = function () {
@@ -100,6 +103,28 @@ var BABYLON;
                 var measure = new GUI.Measure(0, 0, renderWidth, renderHeight);
                 this._rootContainer._draw(measure, context);
             };
+            AdvancedDynamicTexture.prototype._doPicking = function (x, y, type) {
+                if (!this._rootContainer._processPicking(x, y, type)) {
+                    if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
+                        if (this._lastControlOver && this._lastControlOver.onPointerOutObservable.hasObservers()) {
+                            this._lastControlOver.onPointerOutObservable.notifyObservers(this._lastControlOver);
+                        }
+                        this._lastControlOver = null;
+                    }
+                }
+            };
+            AdvancedDynamicTexture.prototype.attach = function () {
+                var _this = this;
+                var scene = this.getScene();
+                this._pointerMoveObserver = scene.onPointerObservable.add(function (pi, state) {
+                    if (pi.type !== BABYLON.PointerEventTypes.POINTERMOVE
+                        && pi.type !== BABYLON.PointerEventTypes.POINTERUP
+                        && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
+                        return;
+                    }
+                    _this._doPicking(scene.pointerX, scene.pointerY, pi.type);
+                });
+            };
             // Statics
             AdvancedDynamicTexture.CreateForMesh = function (mesh, width, height) {
                 if (width === void 0) { width = 1024; }
@@ -118,6 +143,8 @@ var BABYLON;
                 // Display
                 var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
                 layer.texture = result;
+                // Attach
+                result.attach();
                 return result;
             };
             return AdvancedDynamicTexture;
@@ -289,10 +316,30 @@ var BABYLON;
                 this._marginBottom = new GUI.ValueAndUnit(0);
                 this._left = new GUI.ValueAndUnit(0);
                 this._top = new GUI.ValueAndUnit(0);
+                // Properties
+                /**
+                * An event triggered when the pointer move over the control.
+                * @type {BABYLON.Observable}
+                */
+                this.onPointerMoveObservable = new BABYLON.Observable();
+                /**
+                * An event triggered when the pointer move out of the control.
+                * @type {BABYLON.Observable}
+                */
+                this.onPointerOutObservable = new BABYLON.Observable();
+                /**
+                * An event triggered when the pointer taps the control
+                * @type {BABYLON.Observable}
+                */
+                this.onPointerDownObservable = new BABYLON.Observable();
+                /**
+                * An event triggered when pointer up
+                * @type {BABYLON.Observable}
+                */
+                this.onPointerUpObservable = new BABYLON.Observable();
                 this.fontFamily = "Arial";
             }
             Object.defineProperty(Control.prototype, "horizontalAlignment", {
-                // Properties
                 get: function () {
                     return this._horizontalAlignment;
                 },
@@ -621,6 +668,47 @@ var BABYLON;
             Control.prototype._draw = function (parentMeasure, context) {
                 // Do nothing
             };
+            Control.prototype._contains = function (x, y) {
+                if (x < this._currentMeasure.left) {
+                    return false;
+                }
+                if (x > this._currentMeasure.left + this._currentMeasure.width) {
+                    return false;
+                }
+                if (y < this._currentMeasure.top) {
+                    return false;
+                }
+                if (y > this._currentMeasure.top + this._currentMeasure.height) {
+                    return false;
+                }
+                return true;
+            };
+            Control.prototype._processPicking = function (x, y, type) {
+                if (!this._contains(x, y)) {
+                    return false;
+                }
+                return this._processObservables(type);
+            };
+            Control.prototype._processObservables = function (type) {
+                if (type === BABYLON.PointerEventTypes.POINTERMOVE && this.onPointerMoveObservable.hasObservers()) {
+                    this.onPointerMoveObservable.notifyObservers(this);
+                    var previousControlOver = this._host._lastControlOver;
+                    if (previousControlOver && previousControlOver !== this && previousControlOver.onPointerOutObservable.hasObservers()) {
+                        previousControlOver.onPointerOutObservable.notifyObservers(previousControlOver);
+                    }
+                    this._host._lastControlOver = this;
+                    return true;
+                }
+                if (type === BABYLON.PointerEventTypes.POINTERDOWN && this.onPointerDownObservable.hasObservers()) {
+                    this.onPointerDownObservable.notifyObservers(this);
+                    return true;
+                }
+                if (type === BABYLON.PointerEventTypes.POINTERUP && this.onPointerUpObservable.hasObservers()) {
+                    this.onPointerUpObservable.notifyObservers(this);
+                    return true;
+                }
+                return false;
+            };
             Control.prototype._prepareFont = function () {
                 if (!this._fontFamily) {
                     return;
@@ -786,6 +874,19 @@ var BABYLON;
                 }
                 context.restore();
             };
+            Container.prototype._processPicking = function (x, y, type) {
+                if (!_super.prototype._contains.call(this, x, y)) {
+                    return false;
+                }
+                // Checking backwards to pick closest first
+                for (var index = this._children.length - 1; index >= 0; index--) {
+                    var child = this._children[index];
+                    if (child._processPicking(x, y, type)) {
+                        return true;
+                    }
+                }
+                return this._processObservables(type);
+            };
             Container.prototype._clipForChildren = function (context) {
                 // DO nothing
             };
@@ -910,16 +1011,17 @@ var BABYLON;
                 var y = this._currentMeasure.top + offset;
                 var width = this._currentMeasure.width - offset * 2;
                 var height = this._currentMeasure.height - offset * 2;
+                var radius = Math.min(height / 2 - 2, Math.min(width / 2 - 2, this._cornerRadius));
                 context.beginPath();
-                context.moveTo(x + this._cornerRadius, y);
-                context.lineTo(x + width - this._cornerRadius, y);
-                context.quadraticCurveTo(x + width, y, x + width, y + this._cornerRadius);
-                context.lineTo(x + width, y + height - this._cornerRadius);
-                context.quadraticCurveTo(x + width, y + height, x + width - this._cornerRadius, y + height);
-                context.lineTo(x + this._cornerRadius, y + height);
-                context.quadraticCurveTo(x, y + height, x, y + height - this._cornerRadius);
-                context.lineTo(x, y + this._cornerRadius);
-                context.quadraticCurveTo(x, y, x + this._cornerRadius, y);
+                context.moveTo(x + radius, y);
+                context.lineTo(x + width - radius, y);
+                context.quadraticCurveTo(x + width, y, x + width, y + radius);
+                context.lineTo(x + width, y + height - radius);
+                context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+                context.lineTo(x + radius, y + height);
+                context.quadraticCurveTo(x, y + height, x, y + height - radius);
+                context.lineTo(x, y + radius);
+                context.quadraticCurveTo(x, y, x + radius, y);
                 context.closePath();
             };
             Rectangle.prototype._clipForChildren = function (context) {
@@ -1205,3 +1307,50 @@ var BABYLON;
 })(BABYLON || (BABYLON = {}));
 
 //# sourceMappingURL=image.js.map
+
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Button = (function (_super) {
+            __extends(Button, _super);
+            function Button(name) {
+                var _this = _super.call(this, name) || this;
+                _this.name = name;
+                return _this;
+            }
+            // Statics
+            Button.CreateImageButton = function (name, text, imageUrl) {
+                var result = new Button(name);
+                // Adding text
+                var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
+                textBlock.textWrapping = true;
+                textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+                textBlock.marginLeft = "20%";
+                result.addControl(textBlock);
+                // Adding image
+                var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
+                iconImage.width = "20%";
+                iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
+                iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+                result.addControl(iconImage);
+                return result;
+            };
+            return Button;
+        }(GUI.Rectangle));
+        GUI.Button = Button;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=button.js.map

gui/src/controls/button.ts

@@ -14,12 +14,12 @@ module BABYLON.GUI {
             var textBlock = new BABYLON.GUI.TextBlock(name + "_button", text);
             textBlock.textWrapping = true;
             textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
-            textBlock.marginLeft = 0.2;
+            textBlock.marginLeft = "20%";
             result.addControl(textBlock);   
 
             // Adding image
             var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
-            iconImage.width = 0.2;
+            iconImage.width = "20%";
             iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
             iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
             result.addControl(iconImage);            

src/Materials/Textures/babylon.baseTexture.ts

@@ -112,7 +112,8 @@
 
         public isReady(): boolean {
             if (this.delayLoadState === Engine.DELAYLOADSTATE_NOTLOADED) {
-                return true;
+                this.delayLoad();
+                return false;
             }
 
             if (this._texture) {