Fix json

Tools/Gulp/config.json

@@ -1668,7 +1668,7 @@
                     "../../gui/src/3D/controls/control3D.ts",
                     "../../gui/src/3D/controls/container3D.ts",
                     "../../gui/src/3D/controls/button3D.ts",
-                    "../../gui/src/3D/controls/holographicButton.ts",
+                    "../../gui/src/3D/controls/holographicButton.ts"
                 ],
                 "shaderFiles": [
                     "../../gui/src/3D/materials/shaders/fluent.vertex.fx",

dist/preview release/babylon.max.js

@@ -20153,6 +20153,16 @@ var BABYLON;
             this._edgesRenderer = new BABYLON.EdgesRenderer(this, epsilon, checkVerticesInsteadOfIndices);
             return this;
         };
+        Object.defineProperty(AbstractMesh.prototype, "edgesRenderer", {
+            /**
+             * Gets the edgesRenderer associated with the mesh
+             */
+            get: function () {
+                return this._edgesRenderer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(AbstractMesh.prototype, "isBlocked", {
             /**
              * Returns true if the mesh is blocked. Implemented by child classes
@@ -23590,7 +23600,7 @@ var BABYLON;
                 }
                 this._opaqueSubMeshes.push(subMesh); // Opaque
             }
-            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined) {
+            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined && mesh._edgesRenderer.isEnabled) {
                 this._edgesRenderers.push(mesh._edgesRenderer);
             }
         };
@@ -65113,7 +65123,7 @@ var BABYLON;
         /**
          * Updates the texture
          * @param invertY defines the direction for the Y axis (default is true - y increases downwards)
-         * @param premulAlpha defines if alpha is stored as premultiplied
+         * @param premulAlpha defines if alpha is stored as premultiplied (default is false)
          */
         DynamicTexture.prototype.update = function (invertY, premulAlpha) {
             if (premulAlpha === void 0) { premulAlpha = false; }
@@ -92241,6 +92251,8 @@ var BABYLON;
             this._linesIndices = new Array();
             this._buffers = {};
             this._checkVerticesInsteadOfIndices = false;
+            /** Gets or sets a boolean indicating if the edgesRenderer is active */
+            this.isEnabled = true;
             this._source = source;
             this._checkVerticesInsteadOfIndices = checkVerticesInsteadOfIndices;
             this._epsilon = epsilon;

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

@@ -20120,6 +20120,16 @@ var BABYLON;
             this._edgesRenderer = new BABYLON.EdgesRenderer(this, epsilon, checkVerticesInsteadOfIndices);
             return this;
         };
+        Object.defineProperty(AbstractMesh.prototype, "edgesRenderer", {
+            /**
+             * Gets the edgesRenderer associated with the mesh
+             */
+            get: function () {
+                return this._edgesRenderer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(AbstractMesh.prototype, "isBlocked", {
             /**
              * Returns true if the mesh is blocked. Implemented by child classes
@@ -23557,7 +23567,7 @@ var BABYLON;
                 }
                 this._opaqueSubMeshes.push(subMesh); // Opaque
             }
-            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined) {
+            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined && mesh._edgesRenderer.isEnabled) {
                 this._edgesRenderers.push(mesh._edgesRenderer);
             }
         };
@@ -65080,7 +65090,7 @@ var BABYLON;
         /**
          * Updates the texture
          * @param invertY defines the direction for the Y axis (default is true - y increases downwards)
-         * @param premulAlpha defines if alpha is stored as premultiplied
+         * @param premulAlpha defines if alpha is stored as premultiplied (default is false)
          */
         DynamicTexture.prototype.update = function (invertY, premulAlpha) {
             if (premulAlpha === void 0) { premulAlpha = false; }
@@ -92208,6 +92218,8 @@ var BABYLON;
             this._linesIndices = new Array();
             this._buffers = {};
             this._checkVerticesInsteadOfIndices = false;
+            /** Gets or sets a boolean indicating if the edgesRenderer is active */
+            this.isEnabled = true;
             this._source = source;
             this._checkVerticesInsteadOfIndices = checkVerticesInsteadOfIndices;
             this._epsilon = epsilon;

dist/preview release/es6.js

@@ -20120,6 +20120,16 @@ var BABYLON;
             this._edgesRenderer = new BABYLON.EdgesRenderer(this, epsilon, checkVerticesInsteadOfIndices);
             return this;
         };
+        Object.defineProperty(AbstractMesh.prototype, "edgesRenderer", {
+            /**
+             * Gets the edgesRenderer associated with the mesh
+             */
+            get: function () {
+                return this._edgesRenderer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(AbstractMesh.prototype, "isBlocked", {
             /**
              * Returns true if the mesh is blocked. Implemented by child classes
@@ -23557,7 +23567,7 @@ var BABYLON;
                 }
                 this._opaqueSubMeshes.push(subMesh); // Opaque
             }
-            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined) {
+            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined && mesh._edgesRenderer.isEnabled) {
                 this._edgesRenderers.push(mesh._edgesRenderer);
             }
         };
@@ -65080,7 +65090,7 @@ var BABYLON;
         /**
          * Updates the texture
          * @param invertY defines the direction for the Y axis (default is true - y increases downwards)
-         * @param premulAlpha defines if alpha is stored as premultiplied
+         * @param premulAlpha defines if alpha is stored as premultiplied (default is false)
          */
         DynamicTexture.prototype.update = function (invertY, premulAlpha) {
             if (premulAlpha === void 0) { premulAlpha = false; }
@@ -92208,6 +92218,8 @@ var BABYLON;
             this._linesIndices = new Array();
             this._buffers = {};
             this._checkVerticesInsteadOfIndices = false;
+            /** Gets or sets a boolean indicating if the edgesRenderer is active */
+            this.isEnabled = true;
             this._source = source;
             this._checkVerticesInsteadOfIndices = checkVerticesInsteadOfIndices;
             this._epsilon = epsilon;

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

@@ -1027,6 +1027,31 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
+    /**
+     * Class used to render controls with fluent desgin
+     */
+    class FluentMaterial extends PushMaterial {
+        private _emissiveTexture;
+        emissiveTexture: BaseTexture;
+        private _renderId;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): Nullable<BaseTexture>;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): FluentMaterial;
+        serialize(): any;
+        getClassName(): string;
+        static Parse(source: any, scene: Scene, rootUrl: string): FluentMaterial;
+    }
+}
+
+
+declare module BABYLON.GUI {
     class Vector3WithInfo extends Vector3 {
         buttonIndex: number;
         constructor(source: Vector3, buttonIndex?: number);
@@ -1150,6 +1175,11 @@ declare module BABYLON.GUI {
          * @returns the attached mesh or null if none
          */
         protected _createMesh(scene: Scene): Nullable<Mesh>;
+        /**
+         * Affect a material to the given mesh
+         * @param mesh defines the mesh which will represent the control
+         */
+        protected _affectMaterial(mesh: Mesh): void;
         /** @hidden */
         _onPointerMove(target: Control3D, coordinates: Vector3): void;
         /** @hidden */
@@ -1215,7 +1245,31 @@ declare module BABYLON.GUI {
      * Class used to create a button in 3D
      */
     class Button3D extends Control3D {
-        private _currentMaterial;
+        /** @hidden */
+        protected _currentMaterial: Material;
+        private _facadeTexture;
+        private _content;
+        /**
+         * Creates a new button
+         * @param name defines the control name
+         */
+        constructor(name?: string);
+        /**
+         * Gets or sets the GUI 2D content used to display the button's facade
+         */
+        content: Control;
+        protected _getTypeName(): string;
+        protected _createMesh(scene: Scene): Mesh;
+        protected _affectMaterial(mesh: Mesh): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
+     * Class used to create a button in 3D
+     */
+    class HolographicButton extends Button3D {
         /**
          * Creates a new button
          * @param name defines the control name
@@ -1223,5 +1277,6 @@ declare module BABYLON.GUI {
         constructor(name?: string);
         protected _getTypeName(): string;
         protected _createMesh(scene: Scene): Mesh;
+        protected _affectMaterial(mesh: Mesh): void;
     }
 }

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

@@ -23,6 +23,9 @@
 
 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)}}();
+BABYLON.Effect.ShadersStore['fluentVertexShader'] = "precision highp float;\n\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\n\nuniform mat4 world;\nuniform mat4 viewProjection;\nuniform mat4 emissiveMatrix;\nvarying vec2 vEmissiveUV;\nvoid main(void) {\nvEmissiveUV=vec2(emissiveMatrix*vec4(uv,1.0,0.0));\ngl_Position=viewProjection*world*vec4(position,1.0);\n}\n";
+BABYLON.Effect.ShadersStore['fluentPixelShader'] = "precision highp float;\nvarying vec2 vEmissiveUV;\nuniform sampler2D emissiveSampler;\nvoid main(void) {\nvec3 emissiveColor=texture2D(emissiveSampler,vEmissiveUV).rgb;\ngl_FragColor=vec4(emissiveColor,1.0);\n}";
+
 /// <reference path="../../../dist/preview release/babylon.d.ts"/>
 var BABYLON;
 (function (BABYLON) {
@@ -582,7 +585,7 @@ var BABYLON;
                 }
                 this._isDirty = false;
                 this._render();
-                this.update(false, this.premulAlpha);
+                this.update(true, this.premulAlpha);
             };
             AdvancedDynamicTexture.prototype._render = function () {
                 var textureSize = this.getSize();
@@ -5762,6 +5765,146 @@ 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) {
+        /**
+         * Class used to render controls with fluent desgin
+         */
+        var FluentMaterial = /** @class */ (function (_super) {
+            __extends(FluentMaterial, _super);
+            function FluentMaterial(name, scene) {
+                return _super.call(this, name, scene) || this;
+            }
+            FluentMaterial.prototype.needAlphaBlending = function () {
+                return false;
+            };
+            FluentMaterial.prototype.needAlphaTesting = function () {
+                return false;
+            };
+            FluentMaterial.prototype.getAlphaTestTexture = function () {
+                return null;
+            };
+            FluentMaterial.prototype.isReadyForSubMesh = function (mesh, subMesh, useInstances) {
+                if (this.isFrozen) {
+                    if (this._wasPreviouslyReady && subMesh.effect) {
+                        return true;
+                    }
+                }
+                var scene = this.getScene();
+                if (!this.checkReadyOnEveryCall && subMesh.effect) {
+                    if (this._renderId === scene.getRenderId()) {
+                        return true;
+                    }
+                }
+                var engine = scene.getEngine();
+                scene.resetCachedMaterial();
+                //Attributes
+                var attribs = [BABYLON.VertexBuffer.PositionKind];
+                attribs.push(BABYLON.VertexBuffer.NormalKind);
+                attribs.push(BABYLON.VertexBuffer.UVKind);
+                var shaderName = "fluent";
+                var uniforms = ["world", "viewProjection", "emissiveMatrix"];
+                var samplers = ["emissiveSampler"];
+                var uniformBuffers = new Array();
+                BABYLON.MaterialHelper.PrepareUniformsAndSamplersList({
+                    uniformsNames: uniforms,
+                    uniformBuffersNames: uniformBuffers,
+                    samplers: samplers,
+                    defines: "",
+                    maxSimultaneousLights: 4
+                });
+                subMesh.setEffect(scene.getEngine().createEffect(shaderName, {
+                    attributes: attribs,
+                    uniformsNames: uniforms,
+                    uniformBuffersNames: uniformBuffers,
+                    samplers: samplers,
+                    defines: "",
+                    fallbacks: null,
+                    onCompiled: this.onCompiled,
+                    onError: this.onError,
+                    indexParameters: { maxSimultaneousLights: 4 }
+                }, engine));
+                if (!subMesh.effect || !subMesh.effect.isReady()) {
+                    return false;
+                }
+                this._renderId = scene.getRenderId();
+                this._wasPreviouslyReady = true;
+                return true;
+            };
+            FluentMaterial.prototype.bindForSubMesh = function (world, mesh, subMesh) {
+                var scene = this.getScene();
+                var effect = subMesh.effect;
+                if (!effect) {
+                    return;
+                }
+                this._activeEffect = effect;
+                // Matrices        
+                this.bindOnlyWorldMatrix(world);
+                this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
+                if (this._mustRebind(scene, effect)) {
+                    // Textures        
+                    if (this._emissiveTexture && BABYLON.StandardMaterial.DiffuseTextureEnabled) {
+                        this._activeEffect.setTexture("emissiveSampler", this._emissiveTexture);
+                        this._activeEffect.setMatrix("emissiveMatrix", this._emissiveTexture.getTextureMatrix());
+                    }
+                }
+                this._afterBind(mesh, this._activeEffect);
+            };
+            FluentMaterial.prototype.getActiveTextures = function () {
+                var activeTextures = _super.prototype.getActiveTextures.call(this);
+                if (this._emissiveTexture) {
+                    activeTextures.push(this._emissiveTexture);
+                }
+                return activeTextures;
+            };
+            FluentMaterial.prototype.hasTexture = function (texture) {
+                if (_super.prototype.hasTexture.call(this, texture)) {
+                    return true;
+                }
+                if (this._emissiveTexture === texture) {
+                    return true;
+                }
+                return false;
+            };
+            FluentMaterial.prototype.dispose = function (forceDisposeEffect) {
+                if (this._emissiveTexture) {
+                    this._emissiveTexture.dispose();
+                }
+                _super.prototype.dispose.call(this, forceDisposeEffect);
+            };
+            FluentMaterial.prototype.clone = function (name) {
+                var _this = this;
+                return BABYLON.SerializationHelper.Clone(function () { return new FluentMaterial(name, _this.getScene()); }, this);
+            };
+            FluentMaterial.prototype.serialize = function () {
+                var serializationObject = BABYLON.SerializationHelper.Serialize(this);
+                serializationObject.customType = "BABYLON.GUI.FluentMaterial";
+                return serializationObject;
+            };
+            FluentMaterial.prototype.getClassName = function () {
+                return "FluentMaterial";
+            };
+            // Statics
+            FluentMaterial.Parse = function (source, scene, rootUrl) {
+                return BABYLON.SerializationHelper.Parse(function () { return new FluentMaterial(source.name, scene); }, source, scene, rootUrl);
+            };
+            __decorate([
+                BABYLON.serializeAsTexture("emissiveTexture")
+            ], FluentMaterial.prototype, "_emissiveTexture", void 0);
+            __decorate([
+                BABYLON.expandToProperty("_markAllSubMeshesAsTexturesDirty")
+            ], FluentMaterial.prototype, "emissiveTexture", void 0);
+            return FluentMaterial;
+        }(BABYLON.PushMaterial));
+        GUI.FluentMaterial = FluentMaterial;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
 /// <reference path="../../../dist/preview release/babylon.d.ts"/>
 
 var BABYLON;
@@ -5974,6 +6117,7 @@ var BABYLON;
                     this._mesh = this._createMesh(scene);
                     this._mesh.isPickable = true;
                     this._mesh.metadata = this; // Store the control on the metadata field in order to get it when picking
+                    this._affectMaterial(this._mesh);
                 }
                 return this._mesh;
             };
@@ -5987,12 +6131,17 @@ var BABYLON;
                 // Do nothing by default
                 return null;
             };
+            /**
+             * Affect a material to the given mesh
+             * @param mesh defines the mesh which will represent the control
+             */
+            Control3D.prototype._affectMaterial = function (mesh) {
+                mesh.material = null;
+            };
             // Pointers
             /** @hidden */
             Control3D.prototype._onPointerMove = function (target, coordinates) {
-                var canNotify = this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
-                if (canNotify && this.parent != null)
-                    this.parent._onPointerMove(target, coordinates);
+                this.onPointerMoveObservable.notifyObservers(coordinates, -1, target, this);
             };
             /** @hidden */
             Control3D.prototype._onPointerEnter = function (target) {
@@ -6000,9 +6149,7 @@ var BABYLON;
                     return false;
                 }
                 this._enterCount++;
-                var canNotify = this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
-                if (canNotify && this.parent != null)
-                    this.parent._onPointerEnter(target);
+                this.onPointerEnterObservable.notifyObservers(this, -1, target, this);
                 if (this.pointerEnterAnimation) {
                     this.pointerEnterAnimation();
                 }
@@ -6011,9 +6158,7 @@ var BABYLON;
             /** @hidden */
             Control3D.prototype._onPointerOut = function (target) {
                 this._enterCount = 0;
-                var canNotify = this.onPointerOutObservable.notifyObservers(this, -1, target, this);
-                if (canNotify && this.parent != null)
-                    this.parent._onPointerOut(target);
+                this.onPointerOutObservable.notifyObservers(this, -1, target, this);
                 if (this.pointerOutAnimation) {
                     this.pointerOutAnimation();
                 }
@@ -6025,9 +6170,7 @@ var BABYLON;
                 }
                 this._downCount++;
                 this._downPointerIds[pointerId] = true;
-                var canNotify = this.onPointerDownObservable.notifyObservers(new GUI.Vector3WithInfo(coordinates, buttonIndex), -1, target, this);
-                if (canNotify && this.parent != null)
-                    this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex);
+                this.onPointerDownObservable.notifyObservers(new GUI.Vector3WithInfo(coordinates, buttonIndex), -1, target, this);
                 if (this.pointerDownAnimation) {
                     this.pointerDownAnimation();
                 }
@@ -6037,13 +6180,10 @@ var BABYLON;
             Control3D.prototype._onPointerUp = function (target, coordinates, pointerId, buttonIndex, notifyClick) {
                 this._downCount = 0;
                 delete this._downPointerIds[pointerId];
-                var canNotifyClick = notifyClick;
                 if (notifyClick && this._enterCount > 0) {
-                    canNotifyClick = this.onPointerClickObservable.notifyObservers(new GUI.Vector3WithInfo(coordinates, buttonIndex), -1, target, this);
+                    this.onPointerClickObservable.notifyObservers(new GUI.Vector3WithInfo(coordinates, buttonIndex), -1, target, this);
                 }
-                var canNotify = this.onPointerUpObservable.notifyObservers(new GUI.Vector3WithInfo(coordinates, buttonIndex), -1, target, this);
-                if (canNotify && this.parent != null)
-                    this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick);
+                this.onPointerUpObservable.notifyObservers(new GUI.Vector3WithInfo(coordinates, buttonIndex), -1, target, this);
                 if (this.pointerUpAnimation) {
                     this.pointerUpAnimation();
                 }
@@ -6099,6 +6239,10 @@ var BABYLON;
                 this.onPointerOutObservable.clear();
                 this.onPointerUpObservable.clear();
                 this.onPointerClickObservable.clear();
+                if (this._mesh) {
+                    this._mesh.dispose(false, true);
+                    this._mesh = null;
+                }
                 // Behaviors
                 for (var _i = 0, _a = this._behaviors; _i < _a.length; _i++) {
                     var behavior = _a[_i];
@@ -6226,31 +6370,117 @@ var BABYLON;
                     if (!_this.mesh) {
                         return;
                     }
-                    _this.mesh.scaling.scaleInPlace(1.05);
+                    _this.mesh.scaling.scaleInPlace(1.0 / 0.95);
                 };
                 return _this;
             }
+            Object.defineProperty(Button3D.prototype, "content", {
+                /**
+                 * Gets or sets the GUI 2D content used to display the button's facade
+                 */
+                get: function () {
+                    return this._content;
+                },
+                set: function (value) {
+                    if (!this._host || !this._host.utilityLayer) {
+                        return;
+                    }
+                    if (!this._facadeTexture) {
+                        this._facadeTexture = new BABYLON.GUI.AdvancedDynamicTexture("Facade", 512, 512, this._host.utilityLayer.utilityLayerScene, true, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
+                        this._facadeTexture.rootContainer.scaleX = 2;
+                        this._facadeTexture.rootContainer.scaleY = 2;
+                        this._facadeTexture.premulAlpha = true;
+                    }
+                    this._facadeTexture.addControl(value);
+                    this._currentMaterial.emissiveTexture = this._facadeTexture;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Button3D.prototype._getTypeName = function () {
                 return "Button3D";
             };
             // Mesh association
             Button3D.prototype._createMesh = function (scene) {
+                var faceUV = new Array(6);
+                for (var i = 0; i < 6; i++) {
+                    faceUV[i] = new BABYLON.Vector4(0, 0, 0, 0);
+                }
+                faceUV[1] = new BABYLON.Vector4(0, 0, 1, 1);
                 var mesh = BABYLON.MeshBuilder.CreateBox(this.name + "Mesh", {
                     width: 1.0,
                     height: 1.0,
-                    depth: 0.1
+                    depth: 0.1,
+                    faceUV: faceUV
                 }, scene);
-                this._currentMaterial = new BABYLON.StandardMaterial(this.name + "Material", scene);
-                this._currentMaterial.specularColor = BABYLON.Color3.Black();
-                mesh.material = this._currentMaterial;
                 return mesh;
             };
+            Button3D.prototype._affectMaterial = function (mesh) {
+                var material = new BABYLON.StandardMaterial(this.name + "Material", mesh.getScene());
+                material.specularColor = BABYLON.Color3.Black();
+                mesh.material = material;
+                this._currentMaterial = material;
+            };
             return Button3D;
         }(GUI.Control3D));
         GUI.Button3D = Button3D;
     })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
 })(BABYLON || (BABYLON = {}));
 
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+var BABYLON;
+(function (BABYLON) {
+    var GUI;
+    (function (GUI) {
+        /**
+         * Class used to create a button in 3D
+         */
+        var HolographicButton = /** @class */ (function (_super) {
+            __extends(HolographicButton, _super);
+            /**
+             * Creates a new button
+             * @param name defines the control name
+             */
+            function HolographicButton(name) {
+                var _this = _super.call(this, name) || this;
+                // Default animations
+                _this.pointerEnterAnimation = function () {
+                    if (!_this.mesh) {
+                        return;
+                    }
+                    _this.mesh.edgesRenderer.isEnabled = true;
+                };
+                _this.pointerOutAnimation = function () {
+                    if (!_this.mesh) {
+                        return;
+                    }
+                    _this.mesh.edgesRenderer.isEnabled = false;
+                };
+                return _this;
+            }
+            HolographicButton.prototype._getTypeName = function () {
+                return "HolographicButton";
+            };
+            // Mesh association
+            HolographicButton.prototype._createMesh = function (scene) {
+                var mesh = _super.prototype._createMesh.call(this, scene);
+                mesh.edgesWidth = 0.5;
+                mesh.edgesColor = new BABYLON.Color4(1.0, 1.0, 1.0, 1.0);
+                mesh.enableEdgesRendering();
+                mesh.edgesRenderer.isEnabled = false;
+                return mesh;
+            };
+            HolographicButton.prototype._affectMaterial = function (mesh) {
+                this._currentMaterial = new GUI.FluentMaterial(this.name + "Material", mesh.getScene());
+                mesh.material = this._currentMaterial;
+            };
+            return HolographicButton;
+        }(GUI.Button3D));
+        GUI.HolographicButton = HolographicButton;
+    })(GUI = BABYLON.GUI || (BABYLON.GUI = {}));
+})(BABYLON || (BABYLON = {}));
+
     
 
     return BABYLON.GUI;

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

@@ -1032,6 +1032,31 @@ declare module BABYLON.GUI {
 
 
 declare module BABYLON.GUI {
+    /**
+     * Class used to render controls with fluent desgin
+     */
+    class FluentMaterial extends PushMaterial {
+        private _emissiveTexture;
+        emissiveTexture: BaseTexture;
+        private _renderId;
+        constructor(name: string, scene: Scene);
+        needAlphaBlending(): boolean;
+        needAlphaTesting(): boolean;
+        getAlphaTestTexture(): Nullable<BaseTexture>;
+        isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh, useInstances?: boolean): boolean;
+        bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
+        getActiveTextures(): BaseTexture[];
+        hasTexture(texture: BaseTexture): boolean;
+        dispose(forceDisposeEffect?: boolean): void;
+        clone(name: string): FluentMaterial;
+        serialize(): any;
+        getClassName(): string;
+        static Parse(source: any, scene: Scene, rootUrl: string): FluentMaterial;
+    }
+}
+
+
+declare module BABYLON.GUI {
     class Vector3WithInfo extends Vector3 {
         buttonIndex: number;
         constructor(source: Vector3, buttonIndex?: number);
@@ -1155,6 +1180,11 @@ declare module BABYLON.GUI {
          * @returns the attached mesh or null if none
          */
         protected _createMesh(scene: Scene): Nullable<Mesh>;
+        /**
+         * Affect a material to the given mesh
+         * @param mesh defines the mesh which will represent the control
+         */
+        protected _affectMaterial(mesh: Mesh): void;
         /** @hidden */
         _onPointerMove(target: Control3D, coordinates: Vector3): void;
         /** @hidden */
@@ -1220,7 +1250,31 @@ declare module BABYLON.GUI {
      * Class used to create a button in 3D
      */
     class Button3D extends Control3D {
-        private _currentMaterial;
+        /** @hidden */
+        protected _currentMaterial: Material;
+        private _facadeTexture;
+        private _content;
+        /**
+         * Creates a new button
+         * @param name defines the control name
+         */
+        constructor(name?: string);
+        /**
+         * Gets or sets the GUI 2D content used to display the button's facade
+         */
+        content: Control;
+        protected _getTypeName(): string;
+        protected _createMesh(scene: Scene): Mesh;
+        protected _affectMaterial(mesh: Mesh): void;
+    }
+}
+
+
+declare module BABYLON.GUI {
+    /**
+     * Class used to create a button in 3D
+     */
+    class HolographicButton extends Button3D {
         /**
          * Creates a new button
          * @param name defines the control name
@@ -1228,5 +1282,6 @@ declare module BABYLON.GUI {
         constructor(name?: string);
         protected _getTypeName(): string;
         protected _createMesh(scene: Scene): Mesh;
+        protected _affectMaterial(mesh: Mesh): void;
     }
 }

dist/preview release/viewer/babylon.viewer.max.js

@@ -20241,6 +20241,16 @@ var BABYLON;
             this._edgesRenderer = new BABYLON.EdgesRenderer(this, epsilon, checkVerticesInsteadOfIndices);
             return this;
         };
+        Object.defineProperty(AbstractMesh.prototype, "edgesRenderer", {
+            /**
+             * Gets the edgesRenderer associated with the mesh
+             */
+            get: function () {
+                return this._edgesRenderer;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(AbstractMesh.prototype, "isBlocked", {
             /**
              * Returns true if the mesh is blocked. Implemented by child classes
@@ -23678,7 +23688,7 @@ var BABYLON;
                 }
                 this._opaqueSubMeshes.push(subMesh); // Opaque
             }
-            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined) {
+            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined && mesh._edgesRenderer.isEnabled) {
                 this._edgesRenderers.push(mesh._edgesRenderer);
             }
         };
@@ -65201,7 +65211,7 @@ var BABYLON;
         /**
          * Updates the texture
          * @param invertY defines the direction for the Y axis (default is true - y increases downwards)
-         * @param premulAlpha defines if alpha is stored as premultiplied
+         * @param premulAlpha defines if alpha is stored as premultiplied (default is false)
          */
         DynamicTexture.prototype.update = function (invertY, premulAlpha) {
             if (premulAlpha === void 0) { premulAlpha = false; }
@@ -92329,6 +92339,8 @@ var BABYLON;
             this._linesIndices = new Array();
             this._buffers = {};
             this._checkVerticesInsteadOfIndices = false;
+            /** Gets or sets a boolean indicating if the edgesRenderer is active */
+            this.isEnabled = true;
             this._source = source;
             this._checkVerticesInsteadOfIndices = checkVerticesInsteadOfIndices;
             this._epsilon = epsilon;

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

@@ -5,6 +5,7 @@ module BABYLON.GUI {
      * Class used to create a button in 3D
      */
     export class HolographicButton extends Button3D {
+        private _edgesRenderer: EdgesRenderer;
         /**
          * Creates a new button
          * @param name defines the control name
@@ -18,33 +19,16 @@ module BABYLON.GUI {
                 if (!this.mesh) {
                     return;
                 }
-                this.mesh.enableEdgesRendering();
+                this._edgesRenderer.isEnabled = true;
             }
 
             this.pointerOutAnimation = () => {
                 if (!this.mesh) {
                     return;
                 }
-                this.mesh.disableEdgesRendering();
-            }    
-
-            this.pointerDownAnimation = () => {
-                if (!this.mesh) {
-                    return;
-                }
-
-                this.mesh.scaling.scaleInPlace(0.95);
-            }
-
-            this.pointerUpAnimation = () => {
-                if (!this.mesh) {
-                    return;
-                }
-
-                this.mesh.scaling.scaleInPlace(1.0 / 0.95);
-            }                     
+                this._edgesRenderer.isEnabled = false;
+            }                      
         }
-
     
         protected _getTypeName(): string {
             return "HolographicButton";
@@ -56,6 +40,9 @@ module BABYLON.GUI {
 
             mesh.edgesWidth = 0.5;
             mesh.edgesColor = new Color4(1.0, 1.0, 1.0, 1.0);
+            mesh.enableEdgesRendering();
+            this._edgesRenderer = mesh.edgesRenderer!;
+            this._edgesRenderer.isEnabled = false
             
             return mesh;
         }

gui/src/3D/materials/fluentMaterial.ts

@@ -106,10 +106,10 @@ module BABYLON.GUI {
 
             if (this._mustRebind(scene, effect)) {
                 // Textures        
-                if (this.emissiveTexture && StandardMaterial.DiffuseTextureEnabled) {
-                    this._activeEffect.setTexture("emissiveSampler", this.emissiveTexture);
+                if (this._emissiveTexture && StandardMaterial.DiffuseTextureEnabled) {
+                    this._activeEffect.setTexture("emissiveSampler", this._emissiveTexture);
 
-                    this._activeEffect.setMatrix("emissiveMatrix", this.emissiveTexture.getTextureMatrix());
+                    this._activeEffect.setMatrix("emissiveMatrix", this._emissiveTexture.getTextureMatrix());
                 }                
             }
 
@@ -119,8 +119,8 @@ module BABYLON.GUI {
         public getActiveTextures(): BaseTexture[] {
             var activeTextures = super.getActiveTextures();
 
-            if (this.emissiveTexture) {
-                activeTextures.push(this.emissiveTexture);
+            if (this._emissiveTexture) {
+                activeTextures.push(this._emissiveTexture);
             }
 
             return activeTextures;
@@ -131,7 +131,7 @@ module BABYLON.GUI {
                 return true;
             }
 
-            if (this.emissiveTexture === texture) {
+            if (this._emissiveTexture === texture) {
                 return true;
             }
 
@@ -139,8 +139,8 @@ module BABYLON.GUI {
         }        
         
         public dispose(forceDisposeEffect?: boolean): void {
-            if (this.emissiveTexture) {
-                this.emissiveTexture.dispose();
+            if (this._emissiveTexture) {
+                this._emissiveTexture.dispose();
             }
 
             super.dispose(forceDisposeEffect);

src/Mesh/babylon.abstractMesh.ts

@@ -777,6 +777,7 @@
             }
             return this;
         }
+
         /**
          * Enables the edge rendering mode on the mesh.  
          * This mode makes the mesh edges visible
@@ -792,6 +793,13 @@
         }
 
         /**
+         * Gets the edgesRenderer associated with the mesh
+         */
+        public get edgesRenderer(): Nullable<EdgesRenderer> {
+            return this._edgesRenderer;
+        }
+
+        /**
          * Returns true if the mesh is blocked. Implemented by child classes
          */
         public get isBlocked(): boolean {

src/Rendering/babylon.edgesRenderer.ts

@@ -23,6 +23,9 @@
         private _buffers: { [key: string]: Nullable<VertexBuffer> } = {};
         private _checkVerticesInsteadOfIndices = false;
 
+        /** Gets or sets a boolean indicating if the edgesRenderer is active */
+        public isEnabled = true;
+
         // Beware when you use this class with complex objects as the adjacencies computation can be really long
         constructor(source: AbstractMesh, epsilon = 0.95, checkVerticesInsteadOfIndices = false) {
             this._source = source;

src/Rendering/babylon.renderingGroup.ts

@@ -341,7 +341,7 @@
                 this._opaqueSubMeshes.push(subMesh); // Opaque
             }
 
-            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined) {
+            if (mesh._edgesRenderer !== null && mesh._edgesRenderer !== undefined && mesh._edgesRenderer.isEnabled) {
                 this._edgesRenderers.push(mesh._edgesRenderer);
             }
         }