Nightly

dist/preview release/babylon.max.js

@@ -34973,6 +34973,7 @@ var BABYLON;
             this.name = name;
             this.id = name || BABYLON.Tools.RandomId();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
+            this.uniqueId = this._scene.getUniqueId();
             if (this._scene.useRightHandedSystem) {
                 this.sideOrientation = Material.ClockWiseSideOrientation;
             }
@@ -35903,6 +35904,9 @@ var BABYLON;
         ], Material.prototype, "id", void 0);
         __decorate([
             BABYLON.serialize()
+        ], Material.prototype, "uniqueId", void 0);
+        __decorate([
+            BABYLON.serialize()
         ], Material.prototype, "name", void 0);
         __decorate([
             BABYLON.serialize()

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

@@ -34940,6 +34940,7 @@ var BABYLON;
             this.name = name;
             this.id = name || BABYLON.Tools.RandomId();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
+            this.uniqueId = this._scene.getUniqueId();
             if (this._scene.useRightHandedSystem) {
                 this.sideOrientation = Material.ClockWiseSideOrientation;
             }
@@ -35870,6 +35871,9 @@ var BABYLON;
         ], Material.prototype, "id", void 0);
         __decorate([
             BABYLON.serialize()
+        ], Material.prototype, "uniqueId", void 0);
+        __decorate([
+            BABYLON.serialize()
         ], Material.prototype, "name", void 0);
         __decorate([
             BABYLON.serialize()

dist/preview release/es6.js

@@ -34940,6 +34940,7 @@ var BABYLON;
             this.name = name;
             this.id = name || BABYLON.Tools.RandomId();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
+            this.uniqueId = this._scene.getUniqueId();
             if (this._scene.useRightHandedSystem) {
                 this.sideOrientation = Material.ClockWiseSideOrientation;
             }
@@ -35870,6 +35871,9 @@ var BABYLON;
         ], Material.prototype, "id", void 0);
         __decorate([
             BABYLON.serialize()
+        ], Material.prototype, "uniqueId", void 0);
+        __decorate([
+            BABYLON.serialize()
         ], Material.prototype, "name", void 0);
         __decorate([
             BABYLON.serialize()

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

@@ -987,6 +987,13 @@ declare module BABYLON.GUI {
         _lastControlDown: {
             [pointerId: number]: Control3D;
         };
+        /**
+         * Observable raised when the point picked by the pointer events changed
+         */
+        onPickedPointChangedObservable: Observable<Nullable<Vector3>>;
+        sharedMaterials: {
+            [key: string]: Material;
+        };
         /** Gets the hosting scene */
         readonly scene: Scene;
         readonly utilityLayer: Nullable<UtilityLayerRenderer>;
@@ -1031,6 +1038,7 @@ declare module BABYLON.GUI {
     class FluentMaterialDefines extends MaterialDefines {
         INNERGLOW: boolean;
         BORDER: boolean;
+        HOVERLIGHT: boolean;
         constructor();
     }
     /**
@@ -1070,6 +1078,22 @@ declare module BABYLON.GUI {
          */
         borderMinValue: number;
         /**
+         * Gets or sets a boolean indicating if hover light must be rendered (default is false)
+         */
+        renderHoverLight: boolean;
+        /**
+         * Gets or sets the radius used to render the hover light (default is 0.15)
+         */
+        hoverRadius: number;
+        /**
+         * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
+         */
+        hoverColor: Color4;
+        /**
+         * Gets or sets the hover light position in world space (default is Vector3.Zero())
+         */
+        hoverPosition: Vector3;
+        /**
          * Creates a new Fluent material
          * @param name defines the name of the material
          * @param scene defines the hosting scene
@@ -1317,6 +1341,10 @@ declare module BABYLON.GUI {
         protected _getTypeName(): string;
         protected _createNode(scene: Scene): TransformNode;
         protected _affectMaterial(mesh: AbstractMesh): void;
+        /**
+         * Releases all associated resources
+         */
+        dispose(): void;
     }
 }
 
@@ -1329,23 +1357,49 @@ declare module BABYLON.GUI {
         private _backPlate;
         private _textPlate;
         private _frontPlate;
-        private _backFluentMaterial;
-        private _frontFluentMaterial;
         private _text;
+        private _shareMaterials;
+        private _frontMaterial;
+        private _backMaterial;
+        private _plateMaterial;
+        private _pickedPointObserver;
         /**
          * Gets or sets text for the button
          */
         text: string;
         /**
+         * Gets the back material used by this button
+         */
+        readonly backMaterial: FluentMaterial;
+        /**
+         * Gets the front material used by this button
+         */
+        readonly frontMaterial: FluentMaterial;
+        /**
+         * Gets the plate material used by this button
+         */
+        readonly plateMaterial: StandardMaterial;
+        /**
+         * Gets a boolean indicating if this button shares its material with other HolographicButtons
+         */
+        readonly shareMaterials: boolean;
+        /**
          * Creates a new button
          * @param name defines the control name
          */
-        constructor(name?: string);
+        constructor(name?: string, shareMaterials?: boolean);
         protected _getTypeName(): string;
         private _rebuildContent();
         protected _createNode(scene: Scene): TransformNode;
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
+        private _createBackMaterial(mesh);
+        private _createFrontMaterial(mesh);
+        private _createPlateMaterial(mesh);
         protected _affectMaterial(mesh: Mesh): void;
+        /**
+         * Releases all associated resources
+         */
+        dispose(): void;
     }
 }
 

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

@@ -992,6 +992,13 @@ declare module BABYLON.GUI {
         _lastControlDown: {
             [pointerId: number]: Control3D;
         };
+        /**
+         * Observable raised when the point picked by the pointer events changed
+         */
+        onPickedPointChangedObservable: Observable<Nullable<Vector3>>;
+        sharedMaterials: {
+            [key: string]: Material;
+        };
         /** Gets the hosting scene */
         readonly scene: Scene;
         readonly utilityLayer: Nullable<UtilityLayerRenderer>;
@@ -1036,6 +1043,7 @@ declare module BABYLON.GUI {
     class FluentMaterialDefines extends MaterialDefines {
         INNERGLOW: boolean;
         BORDER: boolean;
+        HOVERLIGHT: boolean;
         constructor();
     }
     /**
@@ -1075,6 +1083,22 @@ declare module BABYLON.GUI {
          */
         borderMinValue: number;
         /**
+         * Gets or sets a boolean indicating if hover light must be rendered (default is false)
+         */
+        renderHoverLight: boolean;
+        /**
+         * Gets or sets the radius used to render the hover light (default is 0.15)
+         */
+        hoverRadius: number;
+        /**
+         * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
+         */
+        hoverColor: Color4;
+        /**
+         * Gets or sets the hover light position in world space (default is Vector3.Zero())
+         */
+        hoverPosition: Vector3;
+        /**
          * Creates a new Fluent material
          * @param name defines the name of the material
          * @param scene defines the hosting scene
@@ -1322,6 +1346,10 @@ declare module BABYLON.GUI {
         protected _getTypeName(): string;
         protected _createNode(scene: Scene): TransformNode;
         protected _affectMaterial(mesh: AbstractMesh): void;
+        /**
+         * Releases all associated resources
+         */
+        dispose(): void;
     }
 }
 
@@ -1334,23 +1362,49 @@ declare module BABYLON.GUI {
         private _backPlate;
         private _textPlate;
         private _frontPlate;
-        private _backFluentMaterial;
-        private _frontFluentMaterial;
         private _text;
+        private _shareMaterials;
+        private _frontMaterial;
+        private _backMaterial;
+        private _plateMaterial;
+        private _pickedPointObserver;
         /**
          * Gets or sets text for the button
          */
         text: string;
         /**
+         * Gets the back material used by this button
+         */
+        readonly backMaterial: FluentMaterial;
+        /**
+         * Gets the front material used by this button
+         */
+        readonly frontMaterial: FluentMaterial;
+        /**
+         * Gets the plate material used by this button
+         */
+        readonly plateMaterial: StandardMaterial;
+        /**
+         * Gets a boolean indicating if this button shares its material with other HolographicButtons
+         */
+        readonly shareMaterials: boolean;
+        /**
          * Creates a new button
          * @param name defines the control name
          */
-        constructor(name?: string);
+        constructor(name?: string, shareMaterials?: boolean);
         protected _getTypeName(): string;
         private _rebuildContent();
         protected _createNode(scene: Scene): TransformNode;
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
+        private _createBackMaterial(mesh);
+        private _createFrontMaterial(mesh);
+        private _createPlateMaterial(mesh);
         protected _affectMaterial(mesh: Mesh): void;
+        /**
+         * Releases all associated resources
+         */
+        dispose(): void;
     }
 }
 

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

@@ -35061,6 +35061,7 @@ var BABYLON;
             this.name = name;
             this.id = name || BABYLON.Tools.RandomId();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
+            this.uniqueId = this._scene.getUniqueId();
             if (this._scene.useRightHandedSystem) {
                 this.sideOrientation = Material.ClockWiseSideOrientation;
             }
@@ -35991,6 +35992,9 @@ var BABYLON;
         ], Material.prototype, "id", void 0);
         __decorate([
             BABYLON.serialize()
+        ], Material.prototype, "uniqueId", void 0);
+        __decorate([
+            BABYLON.serialize()
         ], Material.prototype, "name", void 0);
         __decorate([
             BABYLON.serialize()

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

@@ -110,5 +110,16 @@ module BABYLON.GUI {
             mesh.material = material;
             this._currentMaterial = material;
         }
+
+        /**
+         * Releases all associated resources
+         */
+        public dispose() {
+            super.dispose();
+
+            if (this._currentMaterial) {
+                this._currentMaterial.dispose();
+            }
+        }
     }
 }

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

@@ -12,7 +12,7 @@ module BABYLON.GUI {
         private _enterCount = 0;
         private _downPointerIds:{[id:number] : boolean} = {};
         private _isVisible = true;
-
+    
         /** Gets or sets the control position */
         public position = new Vector3(0, 0, 0);
         /** Gets or sets the control scaling */
@@ -244,7 +244,6 @@ module BABYLON.GUI {
             mesh.material = null;
         }
 
-
         // Pointers
 
         /** @hidden */
@@ -374,7 +373,7 @@ module BABYLON.GUI {
             this.onPointerClickObservable.clear();
 
             if (this._node) {
-                this._node.dispose(false, true);
+                this._node.dispose();
                 this._node = null;
             }
 

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

@@ -8,9 +8,13 @@ module BABYLON.GUI {
         private _backPlate: Mesh;
         private _textPlate: Mesh;
         private _frontPlate: Mesh;
-        private _backFluentMaterial: FluentMaterial;
-        private _frontFluentMaterial: FluentMaterial;
         private _text: string;
+        private _shareMaterials = true;
+        private _frontMaterial: FluentMaterial;
+        private _backMaterial: FluentMaterial;
+        private _plateMaterial: StandardMaterial;
+        private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;
+
         // private _imageUrl: string;
 
         /**
@@ -30,14 +34,43 @@ module BABYLON.GUI {
         }
 
         /**
+         * Gets the back material used by this button
+         */
+        public get backMaterial(): FluentMaterial {
+            return this._backMaterial;
+        }
+
+        /**
+         * Gets the front material used by this button
+         */
+        public get frontMaterial(): FluentMaterial {
+            return this._frontMaterial;
+        }       
+        
+        /**
+         * Gets the plate material used by this button
+         */
+        public get plateMaterial(): StandardMaterial {
+            return this._plateMaterial;
+        }          
+
+        /**
+         * Gets a boolean indicating if this button shares its material with other HolographicButtons
+         */
+        public get shareMaterials(): boolean {
+            return this._shareMaterials;
+        }
+
+        /**
          * Creates a new button
          * @param name defines the control name
          */
-        constructor(name?: string) {
+        constructor(name?: string, shareMaterials = true) {
             super(name);
 
-            // Default animations
+            this._shareMaterials = shareMaterials;
 
+            // Default animations
             this.pointerEnterAnimation = () => {
                 if (!this.mesh) {
                     return;
@@ -103,22 +136,89 @@ module BABYLON.GUI {
         }
 
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture) {
-            (<any>this._currentMaterial).emissiveTexture = facadeTexture;
-            (<any>this._currentMaterial).opacityTexture = facadeTexture;
-        }        
+            this._plateMaterial.emissiveTexture = facadeTexture;
+            this._plateMaterial.opacityTexture = facadeTexture;
+        }   
+        
+        private _createBackMaterial(mesh: Mesh) {
+            this._backMaterial = new FluentMaterial(this.name + "Back Material", mesh.getScene());
+            this._backMaterial.renderHoverLight = true;
+            this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(pickedPoint => {
+                if (pickedPoint) {
+                    this._backMaterial.hoverPosition = pickedPoint;
+                    this._backMaterial.hoverColor.a = 1.0;
+                } else {
+                    this._backMaterial.hoverColor.a = 0;
+                }
+            });
+        }
+
+        private _createFrontMaterial(mesh: Mesh) {
+            this._frontMaterial = new FluentMaterial(this.name + "Front Material", mesh.getScene());
+            this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow
+            this._frontMaterial.alpha = 0.5; // Additive
+            this._frontMaterial.renderBorders = true;
+        }     
+        
+        private _createPlateMaterial(mesh: Mesh) {
+            this._plateMaterial = new StandardMaterial(this.name + "Plate Material", mesh.getScene());
+            this._plateMaterial.specularColor = Color3.Black();
+        }
 
         protected _affectMaterial(mesh: Mesh) {
-            this._backFluentMaterial = new FluentMaterial(this.name + "Back Material", mesh.getScene());
-            mesh.material = this._backFluentMaterial;
+            // Back
+            if (this._shareMaterials) {
+                if (!this._host.sharedMaterials["backFluentMaterial"]) {
+                    this._createBackMaterial(mesh);
+                    this._host.sharedMaterials["backFluentMaterial"] =  this._backMaterial;
+                } else {
+                    this._backMaterial = this._host.sharedMaterials["backFluentMaterial"] as FluentMaterial;
+                }
 
-            this._frontFluentMaterial = new FluentMaterial(this.name + "Front Material", mesh.getScene());
-            this._frontPlate.material = this._frontFluentMaterial;
-            this._frontFluentMaterial.innerGlowColorIntensity = 0; // No inner glow
-            this._frontFluentMaterial.alpha = 0.5; // Additive
-            this._frontFluentMaterial.renderBorders = true;
+                // Front
+                if (!this._host.sharedMaterials["frontFluentMaterial"]) {
+                    this._createFrontMaterial(mesh);
+                    this._host.sharedMaterials["frontFluentMaterial"] = this._frontMaterial;                
+                } else {
+                    this._frontMaterial = this._host.sharedMaterials["frontFluentMaterial"] as FluentMaterial;
+                }  
+
+                // Plate
+                if (!this._host.sharedMaterials["plateMaterial"]) {
+                    this._createPlateMaterial(mesh);
+                    this._host.sharedMaterials["plateMaterial"] = this._plateMaterial;
+                } else {
+                    this._plateMaterial = this._host.sharedMaterials["plateMaterial"] as StandardMaterial;
+                }            
+            } else {
+                this._createBackMaterial(mesh);
+                this._createFrontMaterial(mesh);
+                this._createPlateMaterial(mesh);
+            }
+
+            this._backPlate.material =  this._backMaterial;
+            this._frontPlate.material = this._frontMaterial;
+            this._textPlate.material = this._plateMaterial;
 
-            super._affectMaterial(this._textPlate);
             this._rebuildContent();
         }
+
+        /**
+         * Releases all associated resources
+         */
+        public dispose() {
+            super.dispose(); // will dispose main mesh ie. back plate
+            
+            if (!this.shareMaterials) {
+                this._backMaterial.dispose();
+                this._frontMaterial.dispose();
+                this._plateMaterial.dispose();
+
+                if (this._pickedPointObserver) {
+                    this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+                    this._pickedPointObserver = null;
+                }
+            }
+        }        
     }
 }

gui/src/3D/gui3DManager.ts

@@ -16,6 +16,14 @@ module BABYLON.GUI {
         /** @hidden */
         public _lastControlDown: {[pointerId:number]: Control3D} = {};      
 
+        /**
+         * Observable raised when the point picked by the pointer events changed
+         */
+        public onPickedPointChangedObservable = new Observable<Nullable<Vector3>>();
+
+        // Shared resources
+        public sharedMaterials: {[key:string]: Material} = {};     
+
         /** Gets the hosting scene */
         public get scene(): Scene {
             return this._scene;
@@ -93,11 +101,16 @@ module BABYLON.GUI {
                         this._lastControlDown[pointerEvent.pointerId].forcePointerUp();
                         delete this._lastControlDown[pointerEvent.pointerId];
                     }
-                }                
+                }        
+                
+                this.onPickedPointChangedObservable.notifyObservers(null);
                 return false;
             }
 
             let control = <Control3D>(pickingInfo.pickedMesh!.metadata);
+            if (pickingInfo.pickedPoint) {
+                this.onPickedPointChangedObservable.notifyObservers(pickingInfo.pickedPoint);
+            }
 
             if (!control._processObservables(type, pickingInfo.pickedPoint!, pointerId, buttonIndex)) {
 
@@ -162,6 +175,10 @@ module BABYLON.GUI {
         public dispose() {
             this._rootContainer.dispose();
 
+            this.sharedMaterials = {};
+
+            this.onPickedPointChangedObservable.clear();
+
             if (this._scene) {
                 if (this._pointerObserver) {
                     this._scene.onPrePointerObservable.remove(this._pointerObserver);

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

@@ -6,6 +6,7 @@ module BABYLON.GUI {
     export class FluentMaterialDefines extends MaterialDefines {
         public INNERGLOW = false;
         public BORDER = false;
+        public HOVERLIGHT = false;
     
         constructor() {
             super();
@@ -66,7 +67,32 @@ module BABYLON.GUI {
          * Gets or sets the minimum value that can be applied to border width (default is 0.1)
          */
         @serialize()
-        public borderMinValue = 0.1;        
+        public borderMinValue = 0.1;      
+        
+        /**
+         * Gets or sets a boolean indicating if hover light must be rendered (default is false)
+         */
+        @serialize()
+        @expandToProperty("_markAllSubMeshesAsTexturesDirty")
+        public renderHoverLight = false;         
+        
+        /**
+         * Gets or sets the radius used to render the hover light (default is 0.15)
+         */
+        @serialize()
+        public hoverRadius = 1.0;            
+        
+        /**
+         * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
+         */
+        @serializeAsColor4()
+        public hoverColor = new Color4(0.3, 0.3, 0.3, 1.0);           
+        
+        /**
+         * Gets or sets the hover light position in world space (default is Vector3.Zero())
+         */
+        @serializeAsVector3()
+        public hoverPosition = Vector3.Zero();             
         
         /**
          * Creates a new Fluent material
@@ -111,6 +137,7 @@ module BABYLON.GUI {
             if (defines._areTexturesDirty) {
                 defines.INNERGLOW = this.innerGlowColorIntensity > 0;
                 defines.BORDER = this.renderBorders;
+                defines.HOVERLIGHT = this.renderHoverLight;
             }
 
             var engine = scene.getEngine();
@@ -126,7 +153,9 @@ module BABYLON.GUI {
 
                 var shaderName = "fluent";
 
-                var uniforms = ["world", "viewProjection", "innerGlowColor", "albedoColor", "borderWidth", "edgeSmoothingValue", "scaleFactor", "borderMinValue"];
+                var uniforms = ["world", "viewProjection", "innerGlowColor", "albedoColor", "borderWidth", "edgeSmoothingValue", "scaleFactor", "borderMinValue",
+                                "hoverColor", "hoverPosition", "hoverRadius"
+                ];
 
                 var samplers = new Array<String>();
                 var uniformBuffers = new Array<string>();
@@ -198,6 +227,12 @@ module BABYLON.GUI {
 
                     this._activeEffect.setVector3("scaleFactor", mesh.getBoundingInfo().boundingBox.extendSizeWorld);
                 }
+
+                if (defines.HOVERLIGHT) {
+                    this._activeEffect.setDirectColor4("hoverColor", this.hoverColor);
+                    this._activeEffect.setFloat("hoverRadius", this.hoverRadius);
+                    this._activeEffect.setVector3("hoverPosition", this.hoverPosition);
+                }
             }
 
             this._afterBind(mesh, this._activeEffect);

gui/src/3D/materials/shaders/fluent.fragment.fx

@@ -12,7 +12,14 @@ uniform vec4 innerGlowColor;
 varying vec2 scaleInfo;
 uniform float edgeSmoothingValue;
 uniform float borderMinValue;
+#endif
+
+#ifdef HOVERLIGHT
+varying vec3 worldPosition;
 
+uniform vec3 hoverPosition;
+uniform vec4 hoverColor;
+uniform float hoverRadius;
 #endif
 
 void main(void) {
@@ -20,10 +27,16 @@ void main(void) {
 	vec3 albedo = albedoColor.rgb;
 	float alpha = albedoColor.a;
 
+#ifdef HOVERLIGHT
+	float pointToHover = (1.0 - clamp(length(hoverPosition - worldPosition) / hoverRadius, 0., 1.)) * hoverColor.a;
+	albedo = clamp(albedo + hoverColor.rgb * pointToHover, 0., 1.);
+#else
+	float pointToHover = 1.0;
+#endif
+
 #ifdef BORDER	
 	float borderPower = 10.0;
 	float inverseBorderPower = 1.0 / borderPower;
-	float pointToHover = 1.0;
 	vec3 borderColor = albedo * borderPower;
 
 	vec2 distanceToEdge;

gui/src/3D/materials/shaders/fluent.vertex.fx

@@ -17,6 +17,10 @@ uniform float borderWidth;
 uniform vec3 scaleFactor;
 #endif
 
+#ifdef HOVERLIGHT
+varying vec3 worldPosition;
+#endif
+
 void main(void) {
 	vUV = uv;
 
@@ -70,5 +74,11 @@ void main(void) {
 	}	
 #endif		
 
-	gl_Position = viewProjection * world * vec4(position, 1.0);
+	vec4 worldPos = world * vec4(position, 1.0);
+
+#ifdef HOVERLIGHT
+	worldPosition = worldPos.xyz;
+#endif
+
+	gl_Position = viewProjection * worldPos;
 }