Adding HolographicButton (#4130)

Tools/Gulp/config.json

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

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

@@ -5,7 +5,8 @@ module BABYLON.GUI {
      * Class used to create a button in 3D
      */
     export class Button3D extends Control3D {
-        private _currentMaterial: FluentMaterial;
+        /** @hidden */
+        protected _currentMaterial: Material;
         private _facadeTexture: AdvancedDynamicTexture;
         private _content: Control;
 
@@ -22,11 +23,11 @@ module BABYLON.GUI {
                 if (!this.mesh) {
                     return;
                 }
-               // this._currentMaterial.emissiveColor = Color3.Red();
+                (<StandardMaterial>this._currentMaterial).emissiveColor = Color3.Red();
             }
 
             this.pointerOutAnimation = () => {
-               // this._currentMaterial.emissiveColor = Color3.Black();
+                (<StandardMaterial>this._currentMaterial).emissiveColor = Color3.Black();
             }    
 
             this.pointerDownAnimation = () => {
@@ -67,7 +68,7 @@ module BABYLON.GUI {
             
             this._facadeTexture.addControl(value);
         
-            this._currentMaterial.emissiveTexture = this._facadeTexture;
+            (<any>this._currentMaterial).emissiveTexture = this._facadeTexture;
         }
 
         protected _getTypeName(): string {
@@ -89,12 +90,16 @@ module BABYLON.GUI {
                 depth: 0.1,
                 faceUV: faceUV
             }, scene); 
+           
+            return mesh;
+        }
 
-            this._currentMaterial = new FluentMaterial(this.name + "Material", scene);
+        protected _affectMaterial(mesh: Mesh) {
+            let material = new StandardMaterial(this.name + "Material", mesh.getScene());
+            material.specularColor = Color3.Black();
 
-            mesh.material = this._currentMaterial;
-            
-            return mesh;
+            mesh.material = material;
+            this._currentMaterial = material;
         }
     }
 }

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

@@ -211,6 +211,8 @@ module BABYLON.GUI {
                 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;
@@ -227,6 +229,15 @@ module BABYLON.GUI {
             return null;
         }
 
+        /**
+         * Affect a material to the given mesh
+         * @param mesh defines the mesh which will represent the control
+         */
+        protected _affectMaterial(mesh: Mesh) {
+            mesh.material = null;
+        }
+
+
         // Pointers
 
         /** @hidden */

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

@@ -0,0 +1,69 @@
+/// <reference path="../../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON.GUI {
+    /**
+     * Class used to create a button in 3D
+     */
+    export class HolographicButton extends Button3D {
+        /**
+         * Creates a new button
+         * @param name defines the control name
+         */
+        constructor(name?: string) {
+            super(name);
+
+            // Default animations
+
+            this.pointerEnterAnimation = () => {
+                if (!this.mesh) {
+                    return;
+                }
+                this.mesh.enableEdgesRendering();
+            }
+
+            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);
+            }                     
+        }
+
+    
+        protected _getTypeName(): string {
+            return "HolographicButton";
+        }        
+
+        // Mesh association
+        protected _createMesh(scene: Scene): Mesh {
+            var mesh = super._createMesh(scene);
+
+            mesh.edgesWidth = 0.5;
+            mesh.edgesColor = new Color4(1.0, 1.0, 1.0, 1.0);
+            
+            return mesh;
+        }
+
+        protected _affectMaterial(mesh: Mesh) {
+            this._currentMaterial = new FluentMaterial(this.name + "Material", mesh.getScene());
+
+            mesh.material = this._currentMaterial;
+        }
+    }
+}