Fixed #4333

Tools/Gulp/config.json

@@ -1636,27 +1636,29 @@
         "libraries": [
             {
                 "files": [
-                    "../../gui/src/advancedDynamicTexture.ts",
-                    "../../gui/src/measure.ts",
-                    "../../gui/src/math2D.ts",
-                    "../../gui/src/valueAndUnit.ts",
-                    "../../gui/src/multiLinePoint.ts",
-                    "../../gui/src/controls/control.ts",
-                    "../../gui/src/controls/container.ts",
-                    "../../gui/src/controls/stackPanel.ts",
-                    "../../gui/src/controls/rectangle.ts",
-                    "../../gui/src/controls/ellipse.ts",
-                    "../../gui/src/controls/line.ts",
-                    "../../gui/src/controls/slider.ts",
-                    "../../gui/src/controls/checkbox.ts",
-                    "../../gui/src/controls/radioButton.ts",
-                    "../../gui/src/controls/textBlock.ts",
-                    "../../gui/src/controls/image.ts",
-                    "../../gui/src/controls/button.ts",
-                    "../../gui/src/controls/colorpicker.ts",
-                    "../../gui/src/controls/inputText.ts",
-                    "../../gui/src/controls/virtualKeyboard.ts",
-                    "../../gui/src/controls/multiLine.ts"
+                    "../../gui/src/2D/style.ts",
+                    "../../gui/src/2D/valueAndUnit.ts",
+                    "../../gui/src/2D/advancedDynamicTexture.ts",
+                    "../../gui/src/2D/measure.ts",
+                    "../../gui/src/2D/math2D.ts",
+                    "../../gui/src/2D/multiLinePoint.ts",
+                    "../../gui/src/2D/controls/control.ts",
+                    "../../gui/src/2D/controls/container.ts",
+                    "../../gui/src/2D/controls/stackPanel.ts",
+                    "../../gui/src/2D/controls/rectangle.ts",
+                    "../../gui/src/2D/controls/ellipse.ts",
+                    "../../gui/src/2D/controls/line.ts",
+                    "../../gui/src/2D/controls/slider.ts",
+                    "../../gui/src/2D/controls/checkbox.ts",
+                    "../../gui/src/2D/controls/radioButton.ts",
+                    "../../gui/src/2D/controls/textBlock.ts",
+                    "../../gui/src/2D/controls/image.ts",
+                    "../../gui/src/2D/controls/button.ts",
+                    "../../gui/src/2D/controls/colorpicker.ts",
+                    "../../gui/src/2D/controls/inputText.ts",
+                    "../../gui/src/2D/controls/virtualKeyboard.ts",
+                    "../../gui/src/2D/controls/multiLine.ts",
+                    "../../gui/src/3D/controls/control3D.ts"
                 ],
                 "output": "babylon.gui.js",
                 "buildAsModule": true,

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

@@ -1,5 +1,67 @@
 
 declare module BABYLON.GUI {
+    /**
+     * Define a style used by control to automatically setup properties based on a template.
+     * Only support font related properties so far
+     */
+    class Style implements BABYLON.IDisposable {
+        private _fontFamily;
+        private _fontStyle;
+        /** @hidden */
+        _host: AdvancedDynamicTexture;
+        /** @hidden */
+        _fontSize: ValueAndUnit;
+        /**
+         * Observable raised when the style values are changed
+         */
+        onChangedObservable: Observable<Style>;
+        /**
+         * Creates a new style object
+         * @param host defines the AdvancedDynamicTexture which hosts this style
+         */
+        constructor(host: AdvancedDynamicTexture);
+        /**
+         * Gets or sets the font size
+         */
+        fontSize: string | number;
+        /**
+         * Gets or sets the font family
+         */
+        fontFamily: string;
+        /**
+         * Gets or sets the font style
+         */
+        fontStyle: string;
+        /** Dispose all associated resources */
+        dispose(): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class ValueAndUnit {
+        unit: number;
+        negativeValueAllowed: boolean;
+        private _value;
+        ignoreAdaptiveScaling: boolean;
+        constructor(value: number, unit?: number, negativeValueAllowed?: boolean);
+        readonly isPercentage: boolean;
+        readonly isPixel: boolean;
+        readonly internalValue: number;
+        getValueInPixel(host: AdvancedDynamicTexture, refValue: number): number;
+        getValue(host: AdvancedDynamicTexture): number;
+        toString(host: AdvancedDynamicTexture): string;
+        fromString(source: string | number): boolean;
+        private static _Regex;
+        private static _UNITMODE_PERCENTAGE;
+        private static _UNITMODE_PIXEL;
+        static readonly UNITMODE_PERCENTAGE: number;
+        static readonly UNITMODE_PIXEL: number;
+    }
+}
+
+
+declare module BABYLON.GUI {
     interface IFocusableControl {
         onFocus(): void;
         onBlur(): void;
@@ -50,6 +112,10 @@ declare module BABYLON.GUI {
         constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number);
         executeOnAllControls(func: (control: Control) => void, container?: Container): void;
         markAsDirty(): void;
+        /**
+         * Helper function used to create a new style
+         */
+        createStyle(): Style;
         addControl(control: Control): AdvancedDynamicTexture;
         removeControl(control: Control): AdvancedDynamicTexture;
         dispose(): void;
@@ -129,29 +195,6 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
-    class ValueAndUnit {
-        unit: number;
-        negativeValueAllowed: boolean;
-        private _value;
-        ignoreAdaptiveScaling: boolean;
-        constructor(value: number, unit?: number, negativeValueAllowed?: boolean);
-        readonly isPercentage: boolean;
-        readonly isPixel: boolean;
-        readonly internalValue: number;
-        getValueInPixel(host: AdvancedDynamicTexture, refValue: number): number;
-        getValue(host: AdvancedDynamicTexture): number;
-        toString(host: AdvancedDynamicTexture): string;
-        fromString(source: string | number): boolean;
-        private static _Regex;
-        private static _UNITMODE_PERCENTAGE;
-        private static _UNITMODE_PIXEL;
-        static readonly UNITMODE_PERCENTAGE: number;
-        static readonly UNITMODE_PIXEL: number;
-    }
-}
-
-
-declare module BABYLON.GUI {
     class MultiLinePoint {
         private _multiLine;
         private _x;
@@ -195,6 +238,8 @@ declare module BABYLON.GUI {
             descent: number;
         };
         private _color;
+        private _style;
+        private _styleObserver;
         protected _horizontalAlignment: number;
         protected _verticalAlignment: number;
         private _isDirty;
@@ -288,6 +333,7 @@ declare module BABYLON.GUI {
         readonly heightInPixels: number;
         fontFamily: string;
         fontStyle: string;
+        style: BABYLON.Nullable<Style>;
         /** @hidden */
         readonly _isFontSizeInPercentage: boolean;
         readonly fontSizeInPixels: number;
@@ -916,3 +962,11 @@ declare module BABYLON.GUI {
         dispose(): void;
     }
 }
+
+
+declare module BABYLON.GUI {
+    class Control3D {
+        readonly typeName: string;
+        protected _getTypeName(): string;
+    }
+}

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

@@ -23,7 +23,225 @@
 
 var __decorate=this&&this.__decorate||function(e,t,r,c){var o,f=arguments.length,n=f<3?t:null===c?c=Object.getOwnPropertyDescriptor(t,r):c;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,c);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(n=(f<3?o(n):f>3?o(t,r,n):o(t,r))||n);return f>3&&n&&Object.defineProperty(t,r,n),n};
 var __extends=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,o){t.__proto__=o}||function(t,o){for(var n in o)o.hasOwnProperty(n)&&(t[n]=o[n])};return function(o,n){function r(){this.constructor=o}t(o,n),o.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}();
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        /**
+         * Define a style used by control to automatically setup properties based on a template.
+         * Only support font related properties so far
+         */
+        var Style = /** @class */ (function () {
+            /**
+             * Creates a new style object
+             * @param host defines the AdvancedDynamicTexture which hosts this style
+             */
+            function Style(host) {
+                this._fontFamily = "Arial";
+                this._fontStyle = "";
+                /** @hidden */
+                this._fontSize = new GUI.ValueAndUnit(18, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
+                /**
+                 * Observable raised when the style values are changed
+                 */
+                this.onChangedObservable = new BABYLON.Observable();
+                this._host = host;
+            }
+            Object.defineProperty(Style.prototype, "fontSize", {
+                /**
+                 * Gets or sets the font size
+                 */
+                get: function () {
+                    return this._fontSize.toString(this._host);
+                },
+                set: function (value) {
+                    if (this._fontSize.toString(this._host) === value) {
+                        return;
+                    }
+                    if (this._fontSize.fromString(value)) {
+                        this.onChangedObservable.notifyObservers(this);
+                    }
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Style.prototype, "fontFamily", {
+                /**
+                 * Gets or sets the font family
+                 */
+                get: function () {
+                    return this._fontFamily;
+                },
+                set: function (value) {
+                    if (this._fontFamily === value) {
+                        return;
+                    }
+                    this._fontFamily = value;
+                    this.onChangedObservable.notifyObservers(this);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Style.prototype, "fontStyle", {
+                /**
+                 * Gets or sets the font style
+                 */
+                get: function () {
+                    return this._fontStyle;
+                },
+                set: function (value) {
+                    if (this._fontStyle === value) {
+                        return;
+                    }
+                    this._fontStyle = value;
+                    this.onChangedObservable.notifyObservers(this);
+                },
+                enumerable: true,
+                configurable: true
+            });
+            /** Dispose all associated resources */
+            Style.prototype.dispose = function () {
+                this.onChangedObservable.clear();
+            };
+            return Style;
+        }());
+        GUI.Style = Style;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=style.js.map
+
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var ValueAndUnit = /** @class */ (function () {
+            function ValueAndUnit(value, unit, negativeValueAllowed) {
+                if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
+                if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
+                this.unit = unit;
+                this.negativeValueAllowed = negativeValueAllowed;
+                this._value = 1;
+                this.ignoreAdaptiveScaling = false;
+                this._value = value;
+            }
+            Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
+                get: function () {
+                    return this.unit === ValueAndUnit.UNITMODE_PERCENTAGE;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(ValueAndUnit.prototype, "isPixel", {
+                get: function () {
+                    return this.unit === ValueAndUnit.UNITMODE_PIXEL;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(ValueAndUnit.prototype, "internalValue", {
+                get: function () {
+                    return this._value;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            ValueAndUnit.prototype.getValueInPixel = function (host, refValue) {
+                if (this.isPixel) {
+                    return this.getValue(host);
+                }
+                return this.getValue(host) * refValue;
+            };
+            ValueAndUnit.prototype.getValue = function (host) {
+                if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
+                    var width = 0;
+                    var height = 0;
+                    if (host.idealWidth) {
+                        width = (this._value * host.getSize().width) / host.idealWidth;
+                    }
+                    if (host.idealHeight) {
+                        height = (this._value * host.getSize().height) / host.idealHeight;
+                    }
+                    if (host.useSmallestIdeal && host.idealWidth && host.idealHeight) {
+                        return window.innerWidth < window.innerHeight ? width : height;
+                    }
+                    if (host.idealWidth) { // horizontal
+                        return width;
+                    }
+                    if (host.idealHeight) { // vertical
+                        return height;
+                    }
+                }
+                return this._value;
+            };
+            ValueAndUnit.prototype.toString = function (host) {
+                switch (this.unit) {
+                    case ValueAndUnit.UNITMODE_PERCENTAGE:
+                        return (this.getValue(host) * 100) + "%";
+                    case ValueAndUnit.UNITMODE_PIXEL:
+                        return this.getValue(host) + "px";
+                }
+                return this.unit.toString();
+            };
+            ValueAndUnit.prototype.fromString = function (source) {
+                var match = ValueAndUnit._Regex.exec(source.toString());
+                if (!match || match.length === 0) {
+                    return false;
+                }
+                var sourceValue = parseFloat(match[1]);
+                var sourceUnit = this.unit;
+                if (!this.negativeValueAllowed) {
+                    if (sourceValue < 0) {
+                        sourceValue = 0;
+                    }
+                }
+                if (match.length === 4) {
+                    switch (match[3]) {
+                        case "px":
+                            sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
+                            break;
+                        case "%":
+                            sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
+                            sourceValue /= 100.0;
+                            break;
+                    }
+                }
+                if (sourceValue === this._value && sourceUnit === this.unit) {
+                    return false;
+                }
+                this._value = sourceValue;
+                this.unit = sourceUnit;
+                return true;
+            };
+            Object.defineProperty(ValueAndUnit, "UNITMODE_PERCENTAGE", {
+                get: function () {
+                    return ValueAndUnit._UNITMODE_PERCENTAGE;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(ValueAndUnit, "UNITMODE_PIXEL", {
+                get: function () {
+                    return ValueAndUnit._UNITMODE_PIXEL;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            // Static
+            ValueAndUnit._Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
+            ValueAndUnit._UNITMODE_PERCENTAGE = 0;
+            ValueAndUnit._UNITMODE_PIXEL = 1;
+            return ValueAndUnit;
+        }());
+        GUI.ValueAndUnit = ValueAndUnit;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
+//# sourceMappingURL=valueAndUnit.js.map
+
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -234,6 +452,12 @@ var BABYLON;
                     }
                 });
             };
+            /**
+             * Helper function used to create a new style
+             */
+            AdvancedDynamicTexture.prototype.createStyle = function () {
+                return new GUI.Style(this);
+            };
             AdvancedDynamicTexture.prototype.addControl = function (control) {
                 this._rootContainer.addControl(control);
                 return this;
@@ -568,7 +792,7 @@ var BABYLON;
 
 //# sourceMappingURL=advancedDynamicTexture.js.map
 
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 var BABYLON;
 (function (BABYLON) {
     var GUI;
@@ -612,7 +836,7 @@ var BABYLON;
 
 //# sourceMappingURL=measure.js.map
 
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -745,136 +969,7 @@ var BABYLON;
 
 //# sourceMappingURL=math2D.js.map
 
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
-var BABYLON;
-(function (BABYLON) {
-    var GUI;
-    (function (GUI) {
-        var ValueAndUnit = /** @class */ (function () {
-            function ValueAndUnit(value, unit, negativeValueAllowed) {
-                if (unit === void 0) { unit = ValueAndUnit.UNITMODE_PIXEL; }
-                if (negativeValueAllowed === void 0) { negativeValueAllowed = true; }
-                this.unit = unit;
-                this.negativeValueAllowed = negativeValueAllowed;
-                this._value = 1;
-                this.ignoreAdaptiveScaling = false;
-                this._value = value;
-            }
-            Object.defineProperty(ValueAndUnit.prototype, "isPercentage", {
-                get: function () {
-                    return this.unit === ValueAndUnit.UNITMODE_PERCENTAGE;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(ValueAndUnit.prototype, "isPixel", {
-                get: function () {
-                    return this.unit === ValueAndUnit.UNITMODE_PIXEL;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(ValueAndUnit.prototype, "internalValue", {
-                get: function () {
-                    return this._value;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            ValueAndUnit.prototype.getValueInPixel = function (host, refValue) {
-                if (this.isPixel) {
-                    return this.getValue(host);
-                }
-                return this.getValue(host) * refValue;
-            };
-            ValueAndUnit.prototype.getValue = function (host) {
-                if (host && !this.ignoreAdaptiveScaling && this.unit !== ValueAndUnit.UNITMODE_PERCENTAGE) {
-                    var width = 0;
-                    var height = 0;
-                    if (host.idealWidth) {
-                        width = (this._value * host.getSize().width) / host.idealWidth;
-                    }
-                    if (host.idealHeight) {
-                        height = (this._value * host.getSize().height) / host.idealHeight;
-                    }
-                    if (host.useSmallestIdeal && host.idealWidth && host.idealHeight) {
-                        return window.innerWidth < window.innerHeight ? width : height;
-                    }
-                    if (host.idealWidth) { // horizontal
-                        return width;
-                    }
-                    if (host.idealHeight) { // vertical
-                        return height;
-                    }
-                }
-                return this._value;
-            };
-            ValueAndUnit.prototype.toString = function (host) {
-                switch (this.unit) {
-                    case ValueAndUnit.UNITMODE_PERCENTAGE:
-                        return (this.getValue(host) * 100) + "%";
-                    case ValueAndUnit.UNITMODE_PIXEL:
-                        return this.getValue(host) + "px";
-                }
-                return this.unit.toString();
-            };
-            ValueAndUnit.prototype.fromString = function (source) {
-                var match = ValueAndUnit._Regex.exec(source.toString());
-                if (!match || match.length === 0) {
-                    return false;
-                }
-                var sourceValue = parseFloat(match[1]);
-                var sourceUnit = this.unit;
-                if (!this.negativeValueAllowed) {
-                    if (sourceValue < 0) {
-                        sourceValue = 0;
-                    }
-                }
-                if (match.length === 4) {
-                    switch (match[3]) {
-                        case "px":
-                            sourceUnit = ValueAndUnit.UNITMODE_PIXEL;
-                            break;
-                        case "%":
-                            sourceUnit = ValueAndUnit.UNITMODE_PERCENTAGE;
-                            sourceValue /= 100.0;
-                            break;
-                    }
-                }
-                if (sourceValue === this._value && sourceUnit === this.unit) {
-                    return false;
-                }
-                this._value = sourceValue;
-                this.unit = sourceUnit;
-                return true;
-            };
-            Object.defineProperty(ValueAndUnit, "UNITMODE_PERCENTAGE", {
-                get: function () {
-                    return ValueAndUnit._UNITMODE_PERCENTAGE;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Object.defineProperty(ValueAndUnit, "UNITMODE_PIXEL", {
-                get: function () {
-                    return ValueAndUnit._UNITMODE_PIXEL;
-                },
-                enumerable: true,
-                configurable: true
-            });
-            // Static
-            ValueAndUnit._Regex = /(^-?\d*(\.\d+)?)(%|px)?/;
-            ValueAndUnit._UNITMODE_PERCENTAGE = 0;
-            ValueAndUnit._UNITMODE_PIXEL = 1;
-            return ValueAndUnit;
-        }());
-        GUI.ValueAndUnit = ValueAndUnit;
-    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
-})(BABYLON || (BABYLON = {}));
-
-//# sourceMappingURL=valueAndUnit.js.map
-
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 var BABYLON;
 (function (BABYLON) {
     var GUI;
@@ -987,7 +1082,7 @@ var BABYLON;
 
 //# sourceMappingURL=multiLinePoint.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 var BABYLON;
 (function (BABYLON) {
     var GUI;
@@ -1006,6 +1101,7 @@ var BABYLON;
                 this._width = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
                 this._height = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
                 this._color = "";
+                this._style = null;
                 this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
                 this._verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
                 this._isDirty = true;
@@ -1266,7 +1362,7 @@ var BABYLON;
                         return;
                     }
                     this._fontFamily = value;
-                    this._fontSet = true;
+                    this._resetFontCache();
                 },
                 enumerable: true,
                 configurable: true
@@ -1280,7 +1376,30 @@ var BABYLON;
                         return;
                     }
                     this._fontStyle = value;
-                    this._fontSet = true;
+                    this._resetFontCache();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Object.defineProperty(Control.prototype, "style", {
+                get: function () {
+                    return this._style;
+                },
+                set: function (value) {
+                    var _this = this;
+                    if (this._style) {
+                        this._style.onChangedObservable.remove(this._styleObserver);
+                        this._styleObserver = null;
+                    }
+                    this._style = value;
+                    if (this._style) {
+                        this._styleObserver = this._style.onChangedObservable.add(function () {
+                            _this._markAsDirty();
+                            _this._resetFontCache();
+                        });
+                    }
+                    this._markAsDirty();
+                    this._resetFontCache();
                 },
                 enumerable: true,
                 configurable: true
@@ -1295,10 +1414,11 @@ var BABYLON;
             });
             Object.defineProperty(Control.prototype, "fontSizeInPixels", {
                 get: function () {
-                    if (this._fontSize.isPixel) {
-                        return this._fontSize.getValue(this._host);
+                    var fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
+                    if (fontSizeToUse.isPixel) {
+                        return fontSizeToUse.getValue(this._host);
                     }
-                    return this._fontSize.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
+                    return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
                 },
                 enumerable: true,
                 configurable: true
@@ -1313,7 +1433,7 @@ var BABYLON;
                     }
                     if (this._fontSize.fromString(value)) {
                         this._markAsDirty();
-                        this._fontSet = true;
+                        this._resetFontCache();
                     }
                 },
                 enumerable: true,
@@ -1966,7 +2086,12 @@ var BABYLON;
                 if (!this._font && !this._fontSet) {
                     return;
                 }
-                this._font = this._fontStyle + " " + this.fontSizeInPixels + "px " + this._fontFamily;
+                if (this._style) {
+                    this._font = this._style.fontStyle + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
+                }
+                else {
+                    this._font = this._fontStyle + " " + this.fontSizeInPixels + "px " + this._fontFamily;
+                }
                 this._fontOffset = Control._GetFontOffset(this._font);
             };
             Control.prototype.dispose = function () {
@@ -1978,6 +2103,10 @@ var BABYLON;
                 this.onPointerOutObservable.clear();
                 this.onPointerUpObservable.clear();
                 this.onPointerClickObservable.clear();
+                if (this._styleObserver && this._style) {
+                    this._style.onChangedObservable.remove(this._styleObserver);
+                    this._styleObserver = null;
+                }
                 if (this._root) {
                     this._root.removeControl(this);
                     this._root = null;
@@ -2115,7 +2244,7 @@ var BABYLON;
 
 //# sourceMappingURL=control.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -2363,7 +2492,7 @@ var BABYLON;
 
 //# sourceMappingURL=container.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -2505,7 +2634,7 @@ var BABYLON;
 
 //# sourceMappingURL=stackPanel.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -2632,7 +2761,7 @@ var BABYLON;
 
 //# sourceMappingURL=rectangle.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -2709,7 +2838,7 @@ var BABYLON;
 
 //# sourceMappingURL=ellipse.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -2952,7 +3081,7 @@ var BABYLON;
 
 //# sourceMappingURL=line.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -3240,7 +3369,7 @@ var BABYLON;
 
 //# sourceMappingURL=slider.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -3367,7 +3496,7 @@ var BABYLON;
 
 //# sourceMappingURL=checkbox.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -3517,7 +3646,7 @@ var BABYLON;
 
 //# sourceMappingURL=radioButton.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -3864,7 +3993,7 @@ var BABYLON;
 
 //# sourceMappingURL=textBlock.js.map
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var DOMImage = Image;
 var BABYLON;
@@ -4173,9 +4302,7 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
-//# sourceMappingURL=image.js.map
-
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -4302,7 +4429,7 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -4660,7 +4787,7 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -5103,7 +5230,7 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -5264,7 +5391,7 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
 (function (BABYLON) {
@@ -5465,6 +5592,30 @@ var BABYLON;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        var Control3D = /** @class */ (function () {
+            function Control3D() {
+            }
+            Object.defineProperty(Control3D.prototype, "typeName", {
+                get: function () {
+                    return this._getTypeName();
+                },
+                enumerable: true,
+                configurable: true
+            });
+            Control3D.prototype._getTypeName = function () {
+                return "Control3D";
+            };
+            return Control3D;
+        }());
+        GUI.Control3D = Control3D;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
     
 
     return BABYLON.GUI;

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

@@ -5,6 +5,68 @@ declare module 'babylonjs-gui' {
 }
 
 declare module BABYLON.GUI {
+    /**
+     * Define a style used by control to automatically setup properties based on a template.
+     * Only support font related properties so far
+     */
+    class Style implements BABYLON.IDisposable {
+        private _fontFamily;
+        private _fontStyle;
+        /** @hidden */
+        _host: AdvancedDynamicTexture;
+        /** @hidden */
+        _fontSize: ValueAndUnit;
+        /**
+         * Observable raised when the style values are changed
+         */
+        onChangedObservable: Observable<Style>;
+        /**
+         * Creates a new style object
+         * @param host defines the AdvancedDynamicTexture which hosts this style
+         */
+        constructor(host: AdvancedDynamicTexture);
+        /**
+         * Gets or sets the font size
+         */
+        fontSize: string | number;
+        /**
+         * Gets or sets the font family
+         */
+        fontFamily: string;
+        /**
+         * Gets or sets the font style
+         */
+        fontStyle: string;
+        /** Dispose all associated resources */
+        dispose(): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    class ValueAndUnit {
+        unit: number;
+        negativeValueAllowed: boolean;
+        private _value;
+        ignoreAdaptiveScaling: boolean;
+        constructor(value: number, unit?: number, negativeValueAllowed?: boolean);
+        readonly isPercentage: boolean;
+        readonly isPixel: boolean;
+        readonly internalValue: number;
+        getValueInPixel(host: AdvancedDynamicTexture, refValue: number): number;
+        getValue(host: AdvancedDynamicTexture): number;
+        toString(host: AdvancedDynamicTexture): string;
+        fromString(source: string | number): boolean;
+        private static _Regex;
+        private static _UNITMODE_PERCENTAGE;
+        private static _UNITMODE_PIXEL;
+        static readonly UNITMODE_PERCENTAGE: number;
+        static readonly UNITMODE_PIXEL: number;
+    }
+}
+
+
+declare module BABYLON.GUI {
     interface IFocusableControl {
         onFocus(): void;
         onBlur(): void;
@@ -55,6 +117,10 @@ declare module BABYLON.GUI {
         constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number);
         executeOnAllControls(func: (control: Control) => void, container?: Container): void;
         markAsDirty(): void;
+        /**
+         * Helper function used to create a new style
+         */
+        createStyle(): Style;
         addControl(control: Control): AdvancedDynamicTexture;
         removeControl(control: Control): AdvancedDynamicTexture;
         dispose(): void;
@@ -134,29 +200,6 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
-    class ValueAndUnit {
-        unit: number;
-        negativeValueAllowed: boolean;
-        private _value;
-        ignoreAdaptiveScaling: boolean;
-        constructor(value: number, unit?: number, negativeValueAllowed?: boolean);
-        readonly isPercentage: boolean;
-        readonly isPixel: boolean;
-        readonly internalValue: number;
-        getValueInPixel(host: AdvancedDynamicTexture, refValue: number): number;
-        getValue(host: AdvancedDynamicTexture): number;
-        toString(host: AdvancedDynamicTexture): string;
-        fromString(source: string | number): boolean;
-        private static _Regex;
-        private static _UNITMODE_PERCENTAGE;
-        private static _UNITMODE_PIXEL;
-        static readonly UNITMODE_PERCENTAGE: number;
-        static readonly UNITMODE_PIXEL: number;
-    }
-}
-
-
-declare module BABYLON.GUI {
     class MultiLinePoint {
         private _multiLine;
         private _x;
@@ -200,6 +243,8 @@ declare module BABYLON.GUI {
             descent: number;
         };
         private _color;
+        private _style;
+        private _styleObserver;
         protected _horizontalAlignment: number;
         protected _verticalAlignment: number;
         private _isDirty;
@@ -293,6 +338,7 @@ declare module BABYLON.GUI {
         readonly heightInPixels: number;
         fontFamily: string;
         fontStyle: string;
+        style: BABYLON.Nullable<Style>;
         /** @hidden */
         readonly _isFontSizeInPercentage: boolean;
         readonly fontSizeInPixels: number;
@@ -921,3 +967,11 @@ declare module BABYLON.GUI {
         dispose(): void;
     }
 }
+
+
+declare module BABYLON.GUI {
+    class Control3D {
+        readonly typeName: string;
+        protected _getTypeName(): string;
+    }
+}

gui/src/advancedDynamicTexture.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export interface IFocusableControl {
@@ -219,6 +219,13 @@ module BABYLON.GUI {
             });
         }
 
+        /**
+         * Helper function used to create a new style
+         */
+        public createStyle(): Style {
+            return new Style(this);
+        }
+
         public addControl(control: Control): AdvancedDynamicTexture {
             this._rootContainer.addControl(control);
 

gui/src/controls/button.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Button extends Rectangle {    

gui/src/controls/checkbox.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Checkbox extends Control {

gui/src/controls/colorpicker.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class ColorPicker extends Control {

gui/src/controls/container.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Container extends Control {

gui/src/controls/control.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Control {
@@ -17,6 +17,8 @@ module BABYLON.GUI {
         public _height = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
         protected _fontOffset: { ascent: number, height: number, descent: number };
         private _color = "";
+        private _style: BABYLON.Nullable<Style> = null;
+        private _styleObserver: BABYLON.Nullable<BABYLON.Observer<Style>>;
         protected _horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
         protected _verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
         private _isDirty = true;
@@ -271,7 +273,7 @@ module BABYLON.GUI {
             }
 
             this._fontFamily = value;
-            this._fontSet = true;
+            this._resetFontCache();
         }
 
         public get fontStyle(): string {
@@ -284,7 +286,30 @@ module BABYLON.GUI {
             }
 
             this._fontStyle = value;
-            this._fontSet = true;
+            this._resetFontCache();
+        }
+
+        public get style(): BABYLON.Nullable<Style> {
+            return this._style;
+        }
+
+        public set style(value: BABYLON.Nullable<Style>) {
+            if (this._style) {
+                this._style.onChangedObservable.remove(this._styleObserver);
+                this._styleObserver = null;
+            }
+
+            this._style = value;
+
+            if (this._style) {
+                this._styleObserver = this._style.onChangedObservable.add(() => {
+                    this._markAsDirty();
+                    this._resetFontCache();
+                });
+            }
+
+            this._markAsDirty();
+            this._resetFontCache();
         }
 
         /** @hidden */
@@ -293,11 +318,13 @@ module BABYLON.GUI {
         }
 
         public get fontSizeInPixels(): number {
-            if (this._fontSize.isPixel) {
-                return this._fontSize.getValue(this._host);
+            let fontSizeToUse =  this._style ? this._style._fontSize : this._fontSize;
+
+            if (fontSizeToUse.isPixel) {
+                return fontSizeToUse.getValue(this._host);
             }
 
-            return this._fontSize.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
+            return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
         }
 
         public get fontSize(): string | number {
@@ -311,7 +338,7 @@ module BABYLON.GUI {
 
             if (this._fontSize.fromString(value)) {
                 this._markAsDirty();
-                this._fontSet = true;
+                this._resetFontCache();
             }
         }
 
@@ -1018,7 +1045,11 @@ module BABYLON.GUI {
                 return;
             }
 
-            this._font = this._fontStyle + " " + this.fontSizeInPixels + "px " + this._fontFamily;
+            if (this._style) {
+                this._font = this._style.fontStyle + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
+            } else {
+                this._font = this._fontStyle + " " + this.fontSizeInPixels + "px " + this._fontFamily;
+            }
 
             this._fontOffset = Control._GetFontOffset(this._font);
         }
@@ -1031,7 +1062,12 @@ module BABYLON.GUI {
             this.onPointerMoveObservable.clear();
             this.onPointerOutObservable.clear();
             this.onPointerUpObservable.clear();
-			this.onPointerClickObservable.clear();
+            this.onPointerClickObservable.clear();
+            
+            if (this._styleObserver && this._style) {
+                this._style.onChangedObservable.remove(this._styleObserver);
+                this._styleObserver = null;
+            }
 
             if (this._root) {
                 this._root.removeControl(this);

gui/src/controls/ellipse.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Ellipse extends Container {

gui/src/controls/image.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 var DOMImage = Image;
 

gui/src/controls/inputText.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class InputText extends Control implements IFocusableControl {

gui/src/controls/line.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Line extends Control {

gui/src/controls/multiLine.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
 

gui/src/controls/radioButton.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class RadioButton extends Control {

gui/src/controls/rectangle.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Rectangle extends Container {

gui/src/controls/slider.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Slider extends Control {

gui/src/controls/stackPanel.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class StackPanel extends Container {

gui/src/controls/textBlock.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class TextBlock extends Control {

gui/src/controls/virtualKeyboard.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
 

gui/src/math2D.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Vector2WithInfo extends Vector2 {        

gui/src/measure.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class Measure {

gui/src/multiLinePoint.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
 

gui/src/2D/style.ts

@@ -0,0 +1,83 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    /**
+     * Define a style used by control to automatically setup properties based on a template.
+     * Only support font related properties so far
+     */
+    export class Style implements BABYLON.IDisposable {
+        private _fontFamily = "Arial";
+        private _fontStyle = "";       
+        /** @hidden */ 
+        public _host: AdvancedDynamicTexture;
+        /** @hidden */
+        public _fontSize = new ValueAndUnit(18, ValueAndUnit.UNITMODE_PIXEL, false);
+
+        /**
+         * Observable raised when the style values are changed
+         */
+        public onChangedObservable = new BABYLON.Observable<Style>();
+
+        /**
+         * Creates a new style object
+         * @param host defines the AdvancedDynamicTexture which hosts this style
+         */
+        public constructor(host: AdvancedDynamicTexture) {
+            this._host = host;
+        }
+
+        /**
+         * Gets or sets the font size
+         */
+        public get fontSize(): string | number {
+            return this._fontSize.toString(this._host);
+        }
+
+        public set fontSize(value: string | number) {
+            if (this._fontSize.toString(this._host) === value) {
+                return;
+            }
+
+            if (this._fontSize.fromString(value)) {
+                this.onChangedObservable.notifyObservers(this);
+            }
+        }        
+        
+        /**
+         * Gets or sets the font family
+         */
+        public get fontFamily(): string {
+            return this._fontFamily;
+        }
+
+        public set fontFamily(value: string) {
+            if (this._fontFamily === value) {
+                return;
+            }
+
+            this._fontFamily = value;
+            this.onChangedObservable.notifyObservers(this);
+        }
+
+        /**
+         * Gets or sets the font style 
+         */
+        public get fontStyle(): string {
+            return this._fontStyle;
+        }
+
+        public set fontStyle(value: string) {
+            if (this._fontStyle === value) {
+                return;
+            }
+
+            this._fontStyle = value;
+            this.onChangedObservable.notifyObservers(this);
+        }
+
+        /** Dispose all associated resources */
+        public dispose() {
+            this.onChangedObservable.clear();
+        }
+    }    
+}

gui/src/valueAndUnit.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../dist/preview release/babylon.d.ts"/>
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 module BABYLON.GUI {
     export class ValueAndUnit {

gui/src/3D/controls/control3D.ts

@@ -0,0 +1,13 @@
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    export class Control3D {
+        public get typeName(): string {
+            return this._getTypeName();
+        }
+
+        protected _getTypeName(): string {
+            return "Control3D";
+        }
+    }
+}