@babylonjs/gui 5.0.0-alpha.6 → 5.0.0-alpha.63

package/3D/controls/touchButton3D.js

@@ -0,0 +1,133 @@
+// Assumptions: absolute position of button mesh is inside the mesh
+import { __extends } from "tslib";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
+import { TmpVectors } from "@babylonjs/core/Maths/math.vector.js";
+import { Button3D } from "./button3D.js";
+/**
+ * Class used to create a touchable button in 3D
+ */
+var TouchButton3D = /** @class */ (function (_super) {
+    __extends(TouchButton3D, _super);
+    /**
+     * Creates a new touchable button
+     * @param name defines the control name
+     * @param collisionMesh mesh to track collisions with
+     */
+    function TouchButton3D(name, collisionMesh) {
+        var _this = _super.call(this, name) || this;
+        _this._isNearPressed = false;
+        _this.collidableFrontDirection = Vector3.Zero();
+        if (collisionMesh) {
+            _this.collisionMesh = collisionMesh;
+        }
+        return _this;
+    }
+    Object.defineProperty(TouchButton3D.prototype, "collidableFrontDirection", {
+        /**
+         * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'
+         */
+        get: function () {
+            if (this._collisionMesh) {
+                // Update the front direction to reflect any rotations of the collision mesh
+                var transformedDirection = TmpVectors.Vector3[0];
+                Vector3.TransformNormalToRef(this._collidableFrontDirection, this._collisionMesh.getWorldMatrix(), transformedDirection);
+                return transformedDirection.normalize();
+            }
+            return this._collidableFrontDirection;
+        },
+        /**
+         * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction
+         * @param frontDir the forward direction of the button
+         */
+        set: function (frontWorldDir) {
+            this._collidableFrontDirection = frontWorldDir.normalize();
+            if (this._collisionMesh) {
+                var invert = TmpVectors.Matrix[0];
+                invert.copyFrom(this._collisionMesh.getWorldMatrix());
+                invert.invert();
+                Vector3.TransformNormalToRef(this._collidableFrontDirection, invert, this._collidableFrontDirection);
+                this._collidableFrontDirection.normalize();
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchButton3D.prototype, "collisionMesh", {
+        /**
+         * Sets the mesh used for testing input collision
+         * @param collisionMesh the new collision mesh for the button
+         */
+        set: function (collisionMesh) {
+            if (this._collisionMesh) {
+                this._collisionMesh.dispose();
+            }
+            // parent the mesh to sync transforms
+            if (!collisionMesh.parent && this.mesh) {
+                collisionMesh.setParent(this.mesh);
+            }
+            this._collisionMesh = collisionMesh;
+            this._injectGUI3DReservedDataStore(this._collisionMesh).control = this;
+            this._collisionMesh.isNearPickable = true;
+            this.collidableFrontDirection = collisionMesh.forward;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Returns true if the collidable is in front of the button, or if the button has no front direction
+    TouchButton3D.prototype._isInteractionInFrontOfButton = function (collidablePos) {
+        return this._getInteractionHeight(collidablePos, this._collisionMesh.getAbsolutePosition()) > 0;
+    };
+    // Returns true if the collidable is in front of the button, or if the button has no front direction
+    TouchButton3D.prototype._getInteractionHeight = function (interactionPos, basePos) {
+        var frontDir = this.collidableFrontDirection;
+        if (frontDir.length() === 0) {
+            // The button has no front, just return the distance to the base
+            return Vector3.Distance(interactionPos, basePos);
+        }
+        var d = Vector3.Dot(basePos, frontDir);
+        var abc = Vector3.Dot(interactionPos, frontDir);
+        return abc - d;
+    };
+    /** @hidden */
+    TouchButton3D.prototype._generatePointerEventType = function (providedType, nearMeshPosition, activeInteractionCount) {
+        if (providedType === PointerEventTypes.POINTERDOWN) {
+            if (!this._isInteractionInFrontOfButton(nearMeshPosition)) {
+                // Near interaction mesh is behind the button, don't send a pointer down
+                return PointerEventTypes.POINTERMOVE;
+            }
+            else {
+                this._isNearPressed = true;
+            }
+        }
+        if (providedType === PointerEventTypes.POINTERUP) {
+            if (activeInteractionCount == 0) {
+                // We get the release for the down we swallowed earlier, swallow as well
+                return PointerEventTypes.POINTERMOVE;
+            }
+            else {
+                this._isNearPressed = false;
+            }
+        }
+        return providedType;
+    };
+    TouchButton3D.prototype._getTypeName = function () {
+        return "TouchButton3D";
+    };
+    // Mesh association
+    TouchButton3D.prototype._createNode = function (scene) {
+        return _super.prototype._createNode.call(this, scene);
+    };
+    /**
+     * Releases all associated resources
+     */
+    TouchButton3D.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        if (this._collisionMesh) {
+            this._collisionMesh.dispose();
+        }
+    };
+    return TouchButton3D;
+}(Button3D));
+export { TouchButton3D };
+//# sourceMappingURL=touchButton3D.js.map

package/3D/controls/touchButton3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touchButton3D.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/touchButton3D.ts"],"names":[],"mappings":"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","sourcesContent":["// Assumptions: absolute position of button mesh is inside the mesh\r\n\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { PointerEventTypes } from \"@babylonjs/core/Events/pointerEvents\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { TmpVectors } from \"@babylonjs/core/Maths/math.vector\";\r\n\r\nimport { Button3D } from \"./button3D\";\r\n\r\n/**\r\n * Class used to create a touchable button in 3D\r\n */\r\nexport class TouchButton3D extends Button3D {\r\n    private _collisionMesh: Mesh;\r\n\r\n    // 'front' direction. If Vector3.Zero, there is no front and all directions of interaction are accepted\r\n    private _collidableFrontDirection: Vector3;\r\n    protected _isNearPressed = false;\r\n\r\n    /**\r\n     * Creates a new touchable button\r\n     * @param name defines the control name\r\n     * @param collisionMesh mesh to track collisions with\r\n     */\r\n    constructor(name?: string, collisionMesh?: Mesh) {\r\n        super(name);\r\n\r\n        this.collidableFrontDirection = Vector3.Zero();\r\n\r\n        if (collisionMesh) {\r\n            this.collisionMesh = collisionMesh;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction\r\n     * @param frontDir the forward direction of the button\r\n     */\r\n    public set collidableFrontDirection(frontWorldDir: Vector3) {\r\n        this._collidableFrontDirection = frontWorldDir.normalize();\r\n\r\n        if (this._collisionMesh) {\r\n            const invert = TmpVectors.Matrix[0];\r\n\r\n            invert.copyFrom(this._collisionMesh.getWorldMatrix());\r\n            invert.invert();\r\n            Vector3.TransformNormalToRef(this._collidableFrontDirection, invert, this._collidableFrontDirection);\r\n            this._collidableFrontDirection.normalize();\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'\r\n     */\r\n    public get collidableFrontDirection() {\r\n        if (this._collisionMesh) {\r\n            // Update the front direction to reflect any rotations of the collision mesh\r\n            const transformedDirection = TmpVectors.Vector3[0];\r\n            Vector3.TransformNormalToRef(this._collidableFrontDirection, this._collisionMesh.getWorldMatrix(), transformedDirection);\r\n\r\n            return transformedDirection.normalize();\r\n        }\r\n\r\n        return this._collidableFrontDirection;\r\n    }\r\n\r\n    /**\r\n     * Sets the mesh used for testing input collision\r\n     * @param collisionMesh the new collision mesh for the button\r\n     */\r\n    public set collisionMesh(collisionMesh: Mesh) {\r\n        if (this._collisionMesh) {\r\n            this._collisionMesh.dispose();\r\n        }\r\n\r\n        // parent the mesh to sync transforms\r\n        if (!collisionMesh.parent && this.mesh) {\r\n            collisionMesh.setParent(this.mesh);\r\n        }\r\n\r\n        this._collisionMesh = collisionMesh;\r\n        this._injectGUI3DReservedDataStore(this._collisionMesh).control = this;\r\n        this._collisionMesh.isNearPickable = true;\r\n\r\n        this.collidableFrontDirection = collisionMesh.forward;\r\n    }\r\n\r\n    // Returns true if the collidable is in front of the button, or if the button has no front direction\r\n    private _isInteractionInFrontOfButton(collidablePos: Vector3) {\r\n        return this._getInteractionHeight(collidablePos, this._collisionMesh.getAbsolutePosition()) > 0;\r\n    }\r\n\r\n    // Returns true if the collidable is in front of the button, or if the button has no front direction\r\n    protected _getInteractionHeight(interactionPos: Vector3, basePos: Vector3) {\r\n        const frontDir = this.collidableFrontDirection;\r\n        if (frontDir.length() === 0) {\r\n            // The button has no front, just return the distance to the base\r\n            return Vector3.Distance(interactionPos, basePos);\r\n        }\r\n        const d = Vector3.Dot(basePos, frontDir);\r\n        const abc = Vector3.Dot(interactionPos, frontDir);\r\n\r\n        return abc - d;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number {\r\n        if (providedType === PointerEventTypes.POINTERDOWN) {\r\n            if (!this._isInteractionInFrontOfButton(nearMeshPosition)) {\r\n                // Near interaction mesh is behind the button, don't send a pointer down\r\n                return PointerEventTypes.POINTERMOVE;\r\n            }\r\n            else {\r\n                this._isNearPressed = true;\r\n            }\r\n        }\r\n        if (providedType === PointerEventTypes.POINTERUP) {\r\n            if (activeInteractionCount == 0) {\r\n                // We get the release for the down we swallowed earlier, swallow as well\r\n                return PointerEventTypes.POINTERMOVE;\r\n            }\r\n            else {\r\n                this._isNearPressed = false;\r\n            }\r\n        }\r\n\r\n        return providedType;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"TouchButton3D\";\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        return super._createNode(scene);\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose();\r\n\r\n        if (this._collisionMesh) {\r\n            this._collisionMesh.dispose();\r\n        }\r\n    }\r\n}"]}

package/3D/controls/touchHolographicButton.d.ts

@@ -0,0 +1,100 @@
+import { Nullable } from "@babylonjs/core/types";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
+import { Scene } from "@babylonjs/core/scene";
+import { FluentButtonMaterial } from "../materials/fluentButton/fluentButtonMaterial";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
+import { TouchButton3D } from "./touchButton3D";
+/**
+ * Class used to create a holographic button in 3D
+ * @since 5.0.0
+ */
+export declare class TouchHolographicButton extends TouchButton3D {
+    /**
+     * Base Url for the button model.
+     */
+    static MODEL_BASE_URL: string;
+    /**
+     * File name for the button model.
+     */
+    static MODEL_FILENAME: string;
+    private _backPlate;
+    private _textPlate;
+    private _frontPlate;
+    private _text;
+    private _imageUrl;
+    private _shareMaterials;
+    private _isBackplateVisible;
+    private _frontMaterial;
+    private _backMaterial;
+    private _plateMaterial;
+    private _pickedPointObserver;
+    private _pointerHoverObserver;
+    private _frontPlateDepth;
+    private _backPlateDepth;
+    private _tooltipFade;
+    private _tooltipTextBlock;
+    private _tooltipTexture;
+    private _tooltipMesh;
+    private _tooltipHoverObserver;
+    private _tooltipOutObserver;
+    private _disposeTooltip;
+    /**
+     * Rendering ground id of all the mesh in the button
+     */
+    set renderingGroupId(id: number);
+    get renderingGroupId(): number;
+    /**
+     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+     */
+    set tooltipText(text: Nullable<string>);
+    get tooltipText(): Nullable<string>;
+    /**
+     * Gets or sets text for the button
+     */
+    get text(): string;
+    set text(value: string);
+    /**
+     * Gets or sets the image url for the button
+     */
+    get imageUrl(): string;
+    set imageUrl(value: string);
+    /**
+     * Gets the back material used by this button
+     */
+    get backMaterial(): StandardMaterial;
+    /**
+     * Gets the front material used by this button
+     */
+    get frontMaterial(): FluentButtonMaterial;
+    /**
+     * Gets the plate material used by this button
+     */
+    get plateMaterial(): StandardMaterial;
+    /**
+     * Gets a boolean indicating if this button shares its material with other HolographicButtons
+     */
+    get shareMaterials(): boolean;
+    /**
+     * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
+     */
+    set isBackplateVisible(isVisible: boolean);
+    /**
+     * Creates a new button
+     * @param name defines the control name
+     */
+    constructor(name?: string, shareMaterials?: boolean);
+    protected _getTypeName(): string;
+    private _rebuildContent;
+    protected _createNode(scene: Scene): TransformNode;
+    protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
+    private _createBackMaterial;
+    private _createFrontMaterial;
+    private _createPlateMaterial;
+    protected _affectMaterial(mesh: Mesh): void;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}

package/3D/controls/touchHolographicButton.js

@@ -0,0 +1,408 @@
+import { __extends } from "tslib";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior.js";
+import { FluentButtonMaterial } from "../materials/fluentButton/fluentButtonMaterial.js";
+import { StackPanel } from "../../2D/controls/stackPanel.js";
+import { Image } from "../../2D/controls/image.js";
+import { TextBlock } from "../../2D/controls/textBlock.js";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture.js";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { TouchButton3D } from "./touchButton3D.js";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
+import { Scalar } from "@babylonjs/core/Maths/math.scalar.js";
+/**
+ * Class used to create a holographic button in 3D
+ * @since 5.0.0
+ */
+var TouchHolographicButton = /** @class */ (function (_super) {
+    __extends(TouchHolographicButton, _super);
+    /**
+     * Creates a new button
+     * @param name defines the control name
+     */
+    function TouchHolographicButton(name, shareMaterials) {
+        if (shareMaterials === void 0) { shareMaterials = true; }
+        var _this = _super.call(this, name) || this;
+        _this._shareMaterials = true;
+        _this._isBackplateVisible = true;
+        _this._frontPlateDepth = 0.5;
+        _this._backPlateDepth = 0.04;
+        _this._shareMaterials = shareMaterials;
+        _this.pointerEnterAnimation = function () {
+            _this._frontMaterial.leftBlobEnable = true;
+            _this._frontMaterial.rightBlobEnable = true;
+        };
+        _this.pointerOutAnimation = function () {
+            _this._frontMaterial.leftBlobEnable = false;
+            _this._frontMaterial.rightBlobEnable = false;
+        };
+        _this.pointerDownAnimation = function () {
+            if (_this._frontPlate && !_this._isNearPressed) {
+                _this._frontPlate.scaling.z = _this._frontPlateDepth * 0.2;
+                _this._frontPlate.position.z = (_this._frontPlateDepth - (0.2 * _this._frontPlateDepth)) / 2;
+                _this._textPlate.position.z = -(_this._backPlateDepth + (0.2 * _this._frontPlateDepth)) / 2;
+            }
+        };
+        _this.pointerUpAnimation = function () {
+            if (_this._frontPlate) {
+                _this._frontPlate.scaling.z = _this._frontPlateDepth;
+                _this._frontPlate.position.z = (_this._frontPlateDepth - _this._frontPlateDepth) / 2;
+                _this._textPlate.position.z = -(_this._backPlateDepth + _this._frontPlateDepth) / 2;
+            }
+        };
+        _this.onPointerMoveObservable.add(function (position) {
+            if (_this._frontPlate && _this._isNearPressed) {
+                var scale = Vector3.Zero();
+                if (_this._backPlate.getWorldMatrix().decompose(scale, undefined, undefined)) {
+                    var interactionHeight = _this._getInteractionHeight(position, _this._backPlate.position) / scale.z;
+                    interactionHeight = Scalar.Clamp(interactionHeight - (_this._backPlateDepth / 2), 0.2 * _this._frontPlateDepth, _this._frontPlateDepth);
+                    _this._frontPlate.scaling.z = interactionHeight;
+                    _this._frontPlate.position.z = (_this._frontPlateDepth - interactionHeight) / 2;
+                    _this._textPlate.position.z = -(_this._backPlateDepth + interactionHeight) / 2;
+                }
+            }
+        });
+        _this._pointerHoverObserver = _this.onPointerMoveObservable.add(function (hoverPosition) {
+            _this._frontMaterial.globalLeftIndexTipPosition = hoverPosition;
+        });
+        return _this;
+    }
+    TouchHolographicButton.prototype._disposeTooltip = function () {
+        this._tooltipFade = null;
+        if (this._tooltipTextBlock) {
+            this._tooltipTextBlock.dispose();
+        }
+        if (this._tooltipTexture) {
+            this._tooltipTexture.dispose();
+        }
+        if (this._tooltipMesh) {
+            this._tooltipMesh.dispose();
+        }
+        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
+        this.onPointerOutObservable.remove(this._tooltipOutObserver);
+    };
+    Object.defineProperty(TouchHolographicButton.prototype, "renderingGroupId", {
+        get: function () {
+            return this._backPlate.renderingGroupId;
+        },
+        /**
+         * Rendering ground id of all the mesh in the button
+         */
+        set: function (id) {
+            this._backPlate.renderingGroupId = id;
+            this._textPlate.renderingGroupId = id;
+            this._frontPlate.renderingGroupId = id;
+            if (this._tooltipMesh) {
+                this._tooltipMesh.renderingGroupId = id;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "tooltipText", {
+        get: function () {
+            if (this._tooltipTextBlock) {
+                return this._tooltipTextBlock.text;
+            }
+            return null;
+        },
+        /**
+         * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+         */
+        set: function (text) {
+            var _this = this;
+            if (!text) {
+                this._disposeTooltip();
+                return;
+            }
+            if (!this._tooltipFade) {
+                // Create tooltip with mesh and text
+                this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
+                var tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
+                var mat = new StandardMaterial("", this._backPlate._scene);
+                mat.diffuseColor = Color3.FromHexString("#212121");
+                tooltipBackground.material = mat;
+                tooltipBackground.isPickable = false;
+                this._tooltipMesh.addChild(tooltipBackground);
+                tooltipBackground.position.z = 0.05;
+                this._tooltipMesh.scaling.y = 1 / 3;
+                this._tooltipMesh.position.y = 0.7;
+                this._tooltipMesh.position.z = -0.15;
+                this._tooltipMesh.isPickable = false;
+                this._tooltipMesh.parent = this._backPlate;
+                // Create text texture for the tooltip
+                this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);
+                this._tooltipTextBlock = new TextBlock();
+                this._tooltipTextBlock.scaleY = 3;
+                this._tooltipTextBlock.color = "white";
+                this._tooltipTextBlock.fontSize = 130;
+                this._tooltipTexture.addControl(this._tooltipTextBlock);
+                // Add hover action to tooltip
+                this._tooltipFade = new FadeInOutBehavior();
+                this._tooltipFade.delay = 500;
+                this._tooltipMesh.addBehavior(this._tooltipFade);
+                this._tooltipHoverObserver = this.onPointerEnterObservable.add(function () {
+                    if (_this._tooltipFade) {
+                        _this._tooltipFade.fadeIn(true);
+                    }
+                });
+                this._tooltipOutObserver = this.onPointerOutObservable.add(function () {
+                    if (_this._tooltipFade) {
+                        _this._tooltipFade.fadeIn(false);
+                    }
+                });
+            }
+            if (this._tooltipTextBlock) {
+                this._tooltipTextBlock.text = text;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "text", {
+        /**
+         * Gets or sets text for the button
+         */
+        get: function () {
+            return this._text;
+        },
+        set: function (value) {
+            if (this._text === value) {
+                return;
+            }
+            this._text = value;
+            this._rebuildContent();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "imageUrl", {
+        /**
+         * Gets or sets the image url for the button
+         */
+        get: function () {
+            return this._imageUrl;
+        },
+        set: function (value) {
+            if (this._imageUrl === value) {
+                return;
+            }
+            this._imageUrl = value;
+            this._rebuildContent();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "backMaterial", {
+        /**
+         * Gets the back material used by this button
+         */
+        get: function () {
+            return this._backMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "frontMaterial", {
+        /**
+         * Gets the front material used by this button
+         */
+        get: function () {
+            return this._frontMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "plateMaterial", {
+        /**
+         * Gets the plate material used by this button
+         */
+        get: function () {
+            return this._plateMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "shareMaterials", {
+        /**
+         * Gets a boolean indicating if this button shares its material with other HolographicButtons
+         */
+        get: function () {
+            return this._shareMaterials;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TouchHolographicButton.prototype, "isBackplateVisible", {
+        /**
+         * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
+         */
+        set: function (isVisible) {
+            if (this.mesh && !!this._backMaterial) {
+                if (isVisible && !this._isBackplateVisible) {
+                    this._backPlate.visibility = 1;
+                }
+                else if (!isVisible && this._isBackplateVisible) {
+                    this._backPlate.visibility = 0;
+                }
+            }
+            this._isBackplateVisible = isVisible;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TouchHolographicButton.prototype._getTypeName = function () {
+        return "TouchHolographicButton";
+    };
+    TouchHolographicButton.prototype._rebuildContent = function () {
+        this._disposeFacadeTexture();
+        var panel = new StackPanel();
+        panel.isVertical = true;
+        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
+            if (this._imageUrl) {
+                var image = new Image();
+                image.source = this._imageUrl;
+                image.paddingTop = "40px";
+                image.height = "180px";
+                image.width = "100px";
+                image.paddingBottom = "40px";
+                panel.addControl(image);
+            }
+        }
+        if (this._text) {
+            var text = new TextBlock();
+            text.text = this._text;
+            text.color = "white";
+            text.height = "30px";
+            text.fontSize = 24;
+            panel.addControl(text);
+        }
+        this.content = panel;
+    };
+    // Mesh association
+    TouchHolographicButton.prototype._createNode = function (scene) {
+        var _this = this;
+        var _a;
+        this.name = (_a = this.name) !== null && _a !== void 0 ? _a : "TouchHolographicButton";
+        var collisionMesh = CreateBox(this.name + "_collisionMesh", {
+            width: 1.0,
+            height: 1.0,
+            depth: this._frontPlateDepth,
+        }, scene);
+        collisionMesh.isPickable = true;
+        collisionMesh.isNearPickable = true;
+        collisionMesh.visibility = 0;
+        collisionMesh.position.z = -this._frontPlateDepth / 2;
+        SceneLoader.ImportMeshAsync(undefined, TouchHolographicButton.MODEL_BASE_URL, TouchHolographicButton.MODEL_FILENAME, scene)
+            .then(function (result) {
+            var importedFrontPlate = result.meshes[1];
+            importedFrontPlate.name = _this.name + "_frontPlate";
+            importedFrontPlate.isPickable = false;
+            importedFrontPlate.scaling.z = _this._frontPlateDepth;
+            importedFrontPlate.parent = collisionMesh;
+            if (!!_this._frontMaterial) {
+                importedFrontPlate.material = _this._frontMaterial;
+            }
+            _this._frontPlate = importedFrontPlate;
+        });
+        this._backPlate = CreateBox(this.name + "_backPlate", {
+            width: 1.0,
+            height: 1.0,
+            depth: this._backPlateDepth,
+        }, scene);
+        this._backPlate.position.z = this._backPlateDepth / 2;
+        this._backPlate.isPickable = false;
+        this._textPlate = _super.prototype._createNode.call(this, scene);
+        this._textPlate.name = this.name + "_textPlate";
+        this._textPlate.isPickable = false;
+        this._textPlate.position.z = -this._frontPlateDepth / 2;
+        this._backPlate.addChild(collisionMesh);
+        this._backPlate.addChild(this._textPlate);
+        this.collisionMesh = collisionMesh;
+        this.collidableFrontDirection = this._backPlate.forward.negate(); // Mesh is facing the wrong way
+        return this._backPlate;
+    };
+    TouchHolographicButton.prototype._applyFacade = function (facadeTexture) {
+        this._plateMaterial.emissiveTexture = facadeTexture;
+        this._plateMaterial.opacityTexture = facadeTexture;
+        this._plateMaterial.diffuseColor = new Color3(0.4, 0.4, 0.4);
+    };
+    TouchHolographicButton.prototype._createBackMaterial = function (mesh) {
+        this._backMaterial = new StandardMaterial(this.name + "Back Material", mesh.getScene());
+        this._backMaterial.diffuseColor = new Color3(0.5, 0.5, 0.5);
+    };
+    TouchHolographicButton.prototype._createFrontMaterial = function (mesh) {
+        this._frontMaterial = new FluentButtonMaterial(this.name + "Front Material", mesh.getScene());
+    };
+    TouchHolographicButton.prototype._createPlateMaterial = function (mesh) {
+        this._plateMaterial = new StandardMaterial(this.name + "Plate Material", mesh.getScene());
+        this._plateMaterial.specularColor = Color3.Black();
+    };
+    TouchHolographicButton.prototype._affectMaterial = function (mesh) {
+        if (this._shareMaterials) {
+            // Back
+            if (!this._host._touchSharedMaterials["backFluentMaterial"]) {
+                this._createBackMaterial(mesh);
+                this._host._touchSharedMaterials["backFluentMaterial"] = this._backMaterial;
+            }
+            else {
+                this._backMaterial = this._host._touchSharedMaterials["backFluentMaterial"];
+            }
+            // Front
+            if (!this._host._touchSharedMaterials["frontFluentMaterial"]) {
+                this._createFrontMaterial(mesh);
+                this._host._touchSharedMaterials["frontFluentMaterial"] = this._frontMaterial;
+            }
+            else {
+                this._frontMaterial = this._host._touchSharedMaterials["frontFluentMaterial"];
+            }
+        }
+        else {
+            this._createBackMaterial(mesh);
+            this._createFrontMaterial(mesh);
+        }
+        this._createPlateMaterial(mesh);
+        this._backPlate.material = this._backMaterial;
+        this._textPlate.material = this._plateMaterial;
+        if (!this._isBackplateVisible) {
+            this._backPlate.visibility = 0;
+        }
+        if (!!this._frontPlate) {
+            this._frontPlate.material = this._frontMaterial;
+        }
+        this._rebuildContent();
+    };
+    /**
+     * Releases all associated resources
+     */
+    TouchHolographicButton.prototype.dispose = function () {
+        _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
+        this._disposeTooltip();
+        this.onPointerMoveObservable.remove(this._pointerHoverObserver);
+        if (!this.shareMaterials) {
+            this._backMaterial.dispose();
+            this._frontMaterial.dispose();
+            this._plateMaterial.dispose();
+            if (this._pickedPointObserver) {
+                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+                this._pickedPointObserver = null;
+            }
+        }
+    };
+    /**
+     * Base Url for the button model.
+     */
+    TouchHolographicButton.MODEL_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
+    /**
+     * File name for the button model.
+     */
+    TouchHolographicButton.MODEL_FILENAME = "mrtk-fluent-button.glb";
+    return TouchHolographicButton;
+}(TouchButton3D));
+export { TouchHolographicButton };
+//# sourceMappingURL=touchHolographicButton.js.map