@onerjs/gui 8.23.1

package/3D/controls/MRTK3/touchHolographicButton.js

@@ -0,0 +1,868 @@
+import { AdvancedDynamicTexture } from "../../../2D/advancedDynamicTexture.js";
+import { Animation } from "@babylonjs/core/Animations/animation.js";
+import { AnimationGroup } from "@babylonjs/core/Animations/animationGroup.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import { Control } from "../../../2D/controls/control.js";
+import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { IsDocumentAvailable } from "@babylonjs/core/Misc/domManagement.js";
+import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior.js";
+import { Grid } from "../../../2D/controls/grid.js";
+import { Image } from "../../../2D/controls/image.js";
+import { MRDLBackglowMaterial } from "../../materials/mrdl/mrdlBackglowMaterial.js";
+import { MRDLBackplateMaterial } from "../../materials/mrdl/mrdlBackplateMaterial.js";
+import { MRDLFrontplateMaterial } from "../../materials/mrdl/mrdlFrontplateMaterial.js";
+import { MRDLInnerquadMaterial } from "../../materials/mrdl/mrdlInnerquadMaterial.js";
+import { Rectangle } from "../../../2D/controls/rectangle.js";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+import { StackPanel } from "../../../2D/controls/stackPanel.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { TextBlock } from "../../../2D/controls/textBlock.js";
+import { TouchButton3D } from "../touchButton3D.js";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+/**
+ * Class used to create the mrtkv3 button
+ */
+export class TouchHolographicButton extends TouchButton3D {
+    _disposeTooltip() {
+        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);
+    }
+    /**
+     * Rendering ground id of all the mesh in the button
+     */
+    set renderingGroupId(id) {
+        this._backPlate.renderingGroupId = id;
+        this._textPlate.renderingGroupId = id;
+        this._frontPlate.renderingGroupId = id;
+        this._backGlow.renderingGroupId = id;
+        this._innerQuad.renderingGroupId = id;
+        if (this._tooltipMesh) {
+            this._tooltipMesh.renderingGroupId = id;
+        }
+    }
+    get renderingGroupId() {
+        return this._backPlate.renderingGroupId;
+    }
+    /**
+     * Gets the mesh used to render this control
+     */
+    get mesh() {
+        return this._backPlate;
+    }
+    /**
+     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+     * Set this property after adding the button to the GUI3DManager
+     */
+    set tooltipText(text) {
+        if (!text) {
+            this._disposeTooltip();
+            return;
+        }
+        if (!this._tooltipFade) {
+            const rightHandedScene = this._backPlate._scene.useRightHandedSystem;
+            // Create tooltip with mesh and text
+            this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
+            this._tooltipMesh.position = Vector3.Down().scale(0.7).add(Vector3.Forward(rightHandedScene).scale(-0.15));
+            this._tooltipMesh.isPickable = false;
+            this._tooltipMesh.parent = this._frontPlateCollisionMesh;
+            // Create text texture for the tooltip
+            this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);
+            const tooltipBackground = new Rectangle();
+            tooltipBackground.height = 0.25;
+            tooltipBackground.width = 0.8;
+            tooltipBackground.cornerRadius = 25;
+            tooltipBackground.color = "#ffffff";
+            tooltipBackground.thickness = 20;
+            tooltipBackground.background = "#060668";
+            this._tooltipTexture.addControl(tooltipBackground);
+            this._tooltipTextBlock = new TextBlock();
+            this._tooltipTextBlock.color = "white";
+            this._tooltipTextBlock.fontSize = 100;
+            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(() => {
+                if (this._tooltipFade) {
+                    this._tooltipFade.fadeIn(true);
+                }
+            });
+            this._tooltipOutObserver = this.onPointerOutObservable.add(() => {
+                if (this._tooltipFade) {
+                    this._tooltipFade.fadeIn(false);
+                }
+            });
+        }
+        if (this._tooltipTextBlock) {
+            this._tooltipTextBlock.text = text;
+        }
+    }
+    get tooltipText() {
+        return this._tooltipTextBlock?.text || null;
+    }
+    /**
+     * Gets or sets text for the button
+     */
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        if (this._text === value) {
+            return;
+        }
+        this._text = value;
+        this._rebuildContent();
+    }
+    /**
+     * Gets or sets subtext for a button with larger width
+     */
+    get subtext() {
+        return this._subtext;
+    }
+    set subtext(value) {
+        if (this._subtext === value) {
+            return;
+        }
+        this._subtext = value;
+        this._rebuildContent();
+    }
+    /**
+     * Gets or sets the image url for the button
+     */
+    get imageUrl() {
+        return this._imageUrl;
+    }
+    set imageUrl(value) {
+        if (this._imageUrl === value) {
+            return;
+        }
+        this._imageUrl = value;
+        this._rebuildContent();
+    }
+    /**
+     * Gets the back material used by this button
+     */
+    get backMaterial() {
+        return this._backMaterial;
+    }
+    /**
+     * Gets the front material used by this button
+     */
+    get frontMaterial() {
+        return this._frontMaterial;
+    }
+    /**
+     * Gets the back glow material used by this button
+     */
+    get backGlowMaterial() {
+        return this._backGlowMaterial;
+    }
+    /**
+     * Gets the inner quad material used by this button
+     */
+    get innerQuadMaterial() {
+        return this._innerQuadMaterial;
+    }
+    /**
+     * Gets the plate material used by this button
+     */
+    get plateMaterial() {
+        return this._plateMaterial;
+    }
+    /**
+     * Gets a boolean indicating if this button shares its material with other V3 Buttons
+     */
+    get shareMaterials() {
+        return this._shareMaterials;
+    }
+    /**
+     * Sets whether the backplate is visible or hidden. Hiding the backplate is not recommended without some sort of replacement
+     */
+    set isBackplateVisible(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;
+    }
+    /**
+     * Creates a new button
+     * @param name defines the control name
+     * @param shareMaterials
+     */
+    constructor(name, shareMaterials = true) {
+        super(name);
+        /**
+         * Gets or sets the horizontal scaling for the button.
+         */
+        this.width = 1;
+        /**
+         * Gets or sets the vertical scaling for the button.
+         */
+        this.height = 1;
+        /**
+         * Gets or sets the bevel radius for the button.
+         */
+        this.radius = 0.14;
+        /**
+         * Gets or sets the font size of the button text in pixels.
+         * This is only adjustable for a button with width to height ratio greater than 1.
+         */
+        this.textSizeInPixels = 18;
+        /**
+         * Gets or sets the size of the button image in pixels.
+         * This is only adjustable for a button with width to height ratio greater than 1.
+         */
+        this.imageSizeInPixels = 40;
+        /**
+         * Gets or sets the color of the button plate.
+         */
+        this.plateMaterialColor = new Color3(0.4, 0.4, 0.4);
+        // Shared variables for meshes
+        /**
+         * Gets or sets the depth of the button's front plate.
+         * This variable determines the z scaling and z position for some of the button's meshes.
+         */
+        this.frontPlateDepth = 0.2;
+        /**
+         * Gets or sets the depth of the button's back plate.
+         * This variable determines the z scaling and z position for some of the button's meshes.
+         */
+        this.backPlateDepth = 0.04;
+        /**
+         * Gets or sets the offset value for button's back glow.
+         * This variable determines the x, y scaling of the button's meshes.
+         */
+        this.backGlowOffset = 0.1;
+        /**
+         * Gets or sets the value that determines the z scaling and z position for the innerQuad and BackGlow meshes.
+         */
+        this.flatPlaneDepth = 0.001;
+        /**
+         * Gets or sets the radius for FrontMaterial and innerQuadMaterial.
+         */
+        this.innerQuadRadius = this.radius - 0.04;
+        /**
+         * Gets or sets the color for innerQuadMaterial.
+         */
+        this.innerQuadColor = new Color4(0, 0, 0, 0);
+        /**
+         * Gets or sets the color for innerQuadMaterial for when it is toggled.
+         */
+        this.innerQuadToggledColor = new Color4(0.5197843, 0.6485234, 0.9607843, 0.6);
+        /**
+         * Gets or sets the color for innerQuadMaterial for when it is hovered.
+         */
+        this.innerQuadHoverColor = new Color4(1, 1, 1, 0.05);
+        /**
+         * Gets or sets the color for innerQuadMaterial for when it is toggled and hovered.
+         */
+        this.innerQuadToggledHoverColor = new Color4(0.5197843, 0.6485234, 0.9607843, 1);
+        this._isBackplateVisible = true;
+        // Materials
+        this._shareMaterials = true;
+        this._shareMaterials = shareMaterials;
+        this.pointerEnterAnimation = () => {
+            if (this._frontPlate && this._textPlate && !this.isToggleButton) {
+                this._performEnterExitAnimation(1);
+            }
+            if (this.isToggleButton && this._innerQuadMaterial) {
+                if (this.isToggled) {
+                    this._innerQuadMaterial.color = this.innerQuadToggledHoverColor;
+                }
+                else {
+                    this._innerQuadMaterial.color = this.innerQuadHoverColor;
+                }
+            }
+        };
+        this.pointerOutAnimation = () => {
+            if (this._frontPlate && this._textPlate && !this.isToggleButton) {
+                this._performEnterExitAnimation(-0.8);
+            }
+            if (this.isToggleButton && this._innerQuadMaterial) {
+                this._onToggle(this.isToggled);
+            }
+        };
+        this.pointerDownAnimation = () => {
+            // Do nothing
+        };
+        this.pointerUpAnimation = () => {
+            // Do nothing
+        };
+        this._pointerClickObserver = this.onPointerClickObservable.add(() => {
+            if (this._frontPlate && this._backGlow && !this.isActiveNearInteraction) {
+                this._performClickAnimation();
+            }
+            if (this.isToggleButton && this._innerQuadMaterial) {
+                this._onToggle(this.isToggled);
+            }
+        });
+        this._pointerEnterObserver = this.onPointerEnterObservable.add(() => {
+            this.pointerEnterAnimation();
+        });
+        this._pointerOutObserver = this.onPointerOutObservable.add(() => {
+            this.pointerOutAnimation();
+        });
+        this._toggleObserver = this.onToggleObservable.add((isToggled) => {
+            if (isToggled) {
+                this._innerQuadMaterial.color = this.innerQuadToggledColor;
+            }
+            else {
+                this._innerQuadMaterial.color = this.innerQuadColor;
+            }
+        });
+    }
+    _getTypeName() {
+        return "TouchHolographicButton";
+    }
+    _rebuildContent() {
+        let content;
+        if (this._getAspectRatio() <= 1) {
+            // align text and image vertically
+            content = this._alignContentVertically();
+        }
+        else {
+            // align text and image horizontally
+            content = this._alignContentHorizontally();
+        }
+        this.content = content;
+    }
+    _getAspectRatio() {
+        return this.width / this.height;
+    }
+    _alignContentVertically() {
+        const panel = new StackPanel();
+        panel.isVertical = true;
+        if (IsDocumentAvailable() && !!document.createElement) {
+            if (this._imageUrl) {
+                const image = new Image();
+                image.source = this._imageUrl;
+                image.heightInPixels = 180;
+                image.widthInPixels = 100;
+                image.paddingTopInPixels = 40;
+                image.paddingBottomInPixels = 40;
+                panel.addControl(image);
+            }
+        }
+        if (this._text) {
+            const text = new TextBlock();
+            text.text = this._text;
+            text.color = "white";
+            text.heightInPixels = 30;
+            text.fontSize = 24;
+            panel.addControl(text);
+        }
+        return panel;
+    }
+    _alignContentHorizontally() {
+        let totalPanelWidthInPixels = 240;
+        const padding = 15;
+        const contentContainer = new Rectangle();
+        contentContainer.widthInPixels = totalPanelWidthInPixels;
+        contentContainer.heightInPixels = totalPanelWidthInPixels;
+        contentContainer.color = "transparent";
+        contentContainer.setPaddingInPixels(padding, padding, padding, padding);
+        totalPanelWidthInPixels -= padding * 2;
+        const panel = new StackPanel();
+        panel.isVertical = false;
+        panel.scaleY = this._getAspectRatio();
+        if (IsDocumentAvailable() && !!document.createElement) {
+            if (this._imageUrl) {
+                const imageContainer = new Rectangle(`${this.name}_image`);
+                imageContainer.widthInPixels = this.imageSizeInPixels;
+                imageContainer.heightInPixels = this.imageSizeInPixels;
+                imageContainer.color = "transparent";
+                totalPanelWidthInPixels -= this.imageSizeInPixels;
+                const image = new Image();
+                image.source = this._imageUrl;
+                imageContainer.addControl(image);
+                panel.addControl(imageContainer);
+            }
+        }
+        if (this._text) {
+            const text = new TextBlock(`${this.name}_text`);
+            text.text = this._text;
+            text.color = "white";
+            text.fontSize = this.textSizeInPixels;
+            text.widthInPixels = totalPanelWidthInPixels;
+            if (this._imageUrl) {
+                text.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+                text.paddingLeftInPixels = padding;
+            }
+            if (this._subtext) {
+                const textContainer = new Grid();
+                textContainer.addColumnDefinition(1);
+                textContainer.addRowDefinition(0.5);
+                textContainer.addRowDefinition(0.5);
+                textContainer.widthInPixels = totalPanelWidthInPixels;
+                textContainer.heightInPixels = 45;
+                const subtext = new TextBlock(`${this.name}_subtext`);
+                subtext.text = this._subtext;
+                subtext.color = "#EEEEEEAB";
+                subtext.fontSize = this.textSizeInPixels * 0.75;
+                subtext.fontWeight = "600";
+                if (this._imageUrl) {
+                    subtext.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+                    subtext.paddingLeftInPixels = padding;
+                }
+                textContainer.addControl(text, 0);
+                textContainer.addControl(subtext, 1);
+                panel.addControl(textContainer);
+            }
+            else {
+                panel.addControl(text);
+            }
+        }
+        contentContainer.addControl(panel);
+        return contentContainer;
+    }
+    // Mesh association
+    _createNode(scene) {
+        this.name = this.name ?? "TouchHolographicButton";
+        const backPlateMesh = this._createBackPlate(scene);
+        const collisionMesh = this._createFrontPlate(scene);
+        const innerQuadMesh = this._createInnerQuad(scene);
+        const backGlowMesh = this._createBackGlow(scene);
+        this._frontPlateCollisionMesh = collisionMesh;
+        this._textPlate = super._createNode(scene);
+        this._textPlate.name = `${this.name}_textPlate`;
+        this._textPlate.isPickable = false;
+        this._textPlate.scaling.x = this.width;
+        this._textPlate.parent = collisionMesh;
+        this._backPlate = backPlateMesh;
+        this._backPlate.position = Vector3.Forward(scene.useRightHandedSystem).scale(this.backPlateDepth / 2);
+        this._backPlate.isPickable = false;
+        this._backPlate.addChild(collisionMesh);
+        this._backPlate.addChild(innerQuadMesh);
+        if (backGlowMesh) {
+            this._backPlate.addChild(backGlowMesh);
+        }
+        const tn = new TransformNode(`${this.name}_root`, scene);
+        this._backPlate.setParent(tn);
+        this.collisionMesh = collisionMesh;
+        this.collidableFrontDirection = this._backPlate.forward.negate(); // Mesh is facing the wrong way
+        return tn;
+    }
+    _createBackPlate(scene) {
+        const backPlateMesh = CreateBox(`${this.name}_backPlate`, {}, scene);
+        backPlateMesh.isPickable = false;
+        backPlateMesh.visibility = 0;
+        backPlateMesh.scaling.z = 0.2;
+        const baseUrl = Tools.GetAssetUrl(TouchHolographicButton.MRTK_ASSET_BASE_URL);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        SceneLoader.ImportMeshAsync(undefined, baseUrl, TouchHolographicButton.BACKPLATE_MODEL_FILENAME, scene).then((result) => {
+            const backPlateModel = result.meshes[1];
+            backPlateModel.visibility = 0;
+            if (this._isBackplateVisible) {
+                backPlateModel.visibility = 1;
+                backPlateModel.name = `${this.name}_backPlate`;
+                backPlateModel.isPickable = false;
+                backPlateModel.scaling.x = this.width;
+                backPlateModel.scaling.y = this.height;
+                backPlateModel.parent = backPlateMesh;
+            }
+            if (this._backMaterial) {
+                backPlateModel.material = this._backMaterial;
+            }
+            this._backPlate = backPlateModel;
+        });
+        return backPlateMesh;
+    }
+    _createFrontPlate(scene) {
+        const collisionMesh = CreateBox(`${this.name}_frontPlate`, {
+            width: this.width,
+            height: this.height,
+            depth: this.frontPlateDepth,
+        }, scene);
+        collisionMesh.isPickable = true;
+        collisionMesh.isNearPickable = true;
+        collisionMesh.visibility = 0;
+        collisionMesh.position = Vector3.Forward(scene.useRightHandedSystem).scale((this.backPlateDepth - this.frontPlateDepth) / 2);
+        const baseUrl = Tools.GetAssetUrl(TouchHolographicButton.MRTK_ASSET_BASE_URL);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        SceneLoader.ImportMeshAsync(undefined, baseUrl, TouchHolographicButton.FRONTPLATE_MODEL_FILENAME, scene).then((result) => {
+            const collisionPlate = CreateBox(`${this.name}_collisionPlate`, {
+                width: this.width,
+                height: this.height,
+            }, scene);
+            collisionPlate.isPickable = false;
+            collisionPlate.scaling.z = this.frontPlateDepth;
+            collisionPlate.visibility = 0;
+            collisionPlate.parent = collisionMesh;
+            this._collisionPlate = collisionPlate;
+            const frontPlateModel = result.meshes[1];
+            frontPlateModel.name = `${this.name}_frontPlate`;
+            frontPlateModel.isPickable = false;
+            frontPlateModel.scaling.x = this.width - this.backGlowOffset;
+            frontPlateModel.scaling.y = this.height - this.backGlowOffset;
+            frontPlateModel.position = Vector3.Forward(scene.useRightHandedSystem).scale(-0.5);
+            frontPlateModel.parent = collisionPlate;
+            if (this.isToggleButton) {
+                frontPlateModel.visibility = 0;
+            }
+            if (this._frontMaterial) {
+                frontPlateModel.material = this._frontMaterial;
+            }
+            this._textPlate.scaling.x = 1;
+            this._textPlate.parent = frontPlateModel;
+            this._frontPlate = frontPlateModel;
+        });
+        return collisionMesh;
+    }
+    _createInnerQuad(scene) {
+        const innerQuadMesh = CreateBox(`${this.name}_innerQuad`, {}, scene);
+        innerQuadMesh.isPickable = false;
+        innerQuadMesh.visibility = 0;
+        innerQuadMesh.scaling.z = this.flatPlaneDepth;
+        innerQuadMesh.position.z += this.backPlateDepth / 2 - this.flatPlaneDepth;
+        const baseUrl = Tools.GetAssetUrl(TouchHolographicButton.MRTK_ASSET_BASE_URL);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        SceneLoader.ImportMeshAsync(undefined, baseUrl, TouchHolographicButton.INNERQUAD_MODEL_FILENAME, scene).then((result) => {
+            const innerQuadModel = result.meshes[1];
+            innerQuadModel.name = `${this.name}_innerQuad`;
+            innerQuadModel.isPickable = false;
+            innerQuadModel.scaling.x = this.width - this.backGlowOffset;
+            innerQuadModel.scaling.y = this.height - this.backGlowOffset;
+            innerQuadModel.parent = innerQuadMesh;
+            if (this._innerQuadMaterial) {
+                innerQuadModel.material = this._innerQuadMaterial;
+            }
+            this._innerQuad = innerQuadModel;
+        });
+        return innerQuadMesh;
+    }
+    _createBackGlow(scene) {
+        if (this.isToggleButton) {
+            return;
+        }
+        const backGlowMesh = CreateBox(`${this.name}_backGlow`, {}, scene);
+        backGlowMesh.isPickable = false;
+        backGlowMesh.visibility = 0;
+        backGlowMesh.scaling.z = this.flatPlaneDepth;
+        backGlowMesh.position.z += this.backPlateDepth / 2 - this.flatPlaneDepth * 2;
+        const baseUrl = Tools.GetAssetUrl(TouchHolographicButton.MRTK_ASSET_BASE_URL);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises, github/no-then
+        SceneLoader.ImportMeshAsync(undefined, baseUrl, TouchHolographicButton.BACKGLOW_MODEL_FILENAME, scene).then((result) => {
+            const backGlowModel = result.meshes[1];
+            backGlowModel.name = `${this.name}_backGlow`;
+            backGlowModel.isPickable = false;
+            backGlowModel.scaling.x = this.width - this.backGlowOffset;
+            backGlowModel.scaling.y = this.height - this.backGlowOffset;
+            backGlowModel.parent = backGlowMesh;
+            if (this._backGlowMaterial) {
+                backGlowModel.material = this._backGlowMaterial;
+            }
+            this._backGlow = backGlowModel;
+        });
+        return backGlowMesh;
+    }
+    _applyFacade(facadeTexture) {
+        this._plateMaterial.emissiveTexture = facadeTexture;
+        this._plateMaterial.opacityTexture = facadeTexture;
+        this._plateMaterial.diffuseColor = this.plateMaterialColor;
+    }
+    _performClickAnimation() {
+        const frameRate = 60;
+        const animationGroup = new AnimationGroup("Click Animation Group");
+        const animations = [
+            {
+                name: "backGlowMotion",
+                mesh: this._backGlow,
+                property: "material.motion",
+                keys: [
+                    {
+                        frame: 0,
+                        values: [0, 0, 0],
+                    },
+                    {
+                        frame: 20,
+                        values: [1, 0.0144, 0.0144],
+                    },
+                    {
+                        frame: 40,
+                        values: [0.0027713229489760476, 0, 0],
+                    },
+                    {
+                        frame: 45,
+                        values: [0.0027713229489760476],
+                    },
+                ],
+            },
+            {
+                name: "_collisionPlateZSlide",
+                mesh: this._collisionPlate,
+                property: "position.z",
+                keys: [
+                    {
+                        frame: 0,
+                        values: [0.0, 0.0, 0.0],
+                    },
+                    {
+                        frame: 20,
+                        values: [Vector3.Forward(this._collisionPlate._scene.useRightHandedSystem).scale(this.frontPlateDepth / 2).z, 0.0, 0.0],
+                    },
+                    {
+                        frame: 40,
+                        values: [0.0, 0.005403332496794331],
+                    },
+                    {
+                        frame: 45,
+                        values: [0.0],
+                    },
+                ],
+            },
+            {
+                name: "_collisionPlateZScale",
+                mesh: this._collisionPlate,
+                property: "scaling.z",
+                keys: [
+                    {
+                        frame: 0,
+                        values: [this.frontPlateDepth, 0.0, 0.0],
+                    },
+                    {
+                        frame: 20,
+                        values: [this.backPlateDepth, 0.0, 0.0],
+                    },
+                    {
+                        frame: 40,
+                        values: [this.frontPlateDepth, 0.0054],
+                    },
+                    {
+                        frame: 45,
+                        values: [this.frontPlateDepth],
+                    },
+                ],
+            },
+        ];
+        for (const animation of animations) {
+            const anim = new Animation(animation.name, animation.property, frameRate, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
+            const animkeyFrames = [];
+            for (const key of animation.keys) {
+                animkeyFrames.push({
+                    frame: key.frame,
+                    value: key.values[0],
+                    inTangent: key.values[1],
+                    outTangent: key.values[2],
+                    interpolation: key.values[3],
+                });
+            }
+            anim.setKeys(animkeyFrames);
+            if (!animation.mesh) {
+                continue;
+            }
+            animationGroup.addTargetedAnimation(anim, animation.mesh);
+        }
+        animationGroup.normalize(0, 45);
+        animationGroup.speedRatio = 1;
+        animationGroup.play();
+    }
+    _performEnterExitAnimation(speedRatio) {
+        const frameRate = 60;
+        const animationGroup = new AnimationGroup("Enter Exit Animation Group");
+        const animations = [
+            {
+                name: "frontPlateFadeOut",
+                mesh: this._frontPlate,
+                property: "material.fadeOut",
+                keys: [
+                    {
+                        frame: 0,
+                        values: [0, 0, 0.025045314830017686, 0],
+                    },
+                    {
+                        frame: 40,
+                        values: [1.00205599570012, 0.025045314830017686, 0, 0],
+                    },
+                ],
+            },
+            {
+                name: "textPlateZSlide",
+                mesh: this._textPlate,
+                property: "position.z",
+                keys: [
+                    {
+                        frame: 0,
+                        values: [0, 0.0, 0.0],
+                    },
+                    {
+                        frame: 40,
+                        values: [Vector3.Forward(this._textPlate._scene.useRightHandedSystem).scale(-0.15).z, 0.0, 0.0],
+                    },
+                ],
+            },
+        ];
+        for (const animation of animations) {
+            const anim = new Animation(animation.name, animation.property, frameRate, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
+            const animkeyFrames = [];
+            for (const key of animation.keys) {
+                animkeyFrames.push({
+                    frame: key.frame,
+                    value: key.values[0],
+                    inTangent: key.values[1],
+                    outTangent: key.values[2],
+                    interpolation: key.values[3],
+                });
+            }
+            anim.setKeys(animkeyFrames);
+            if (!animation.mesh) {
+                continue;
+            }
+            animationGroup.addTargetedAnimation(anim, animation.mesh);
+        }
+        animationGroup.normalize(0, 45);
+        animationGroup.speedRatio = speedRatio;
+        animationGroup.play();
+    }
+    _createBackMaterial(mesh) {
+        this._backMaterial = this._backMaterial ?? new MRDLBackplateMaterial(this.name + "backPlateMaterial", mesh.getScene());
+        this._backMaterial.absoluteSizes = true;
+        this._backMaterial.radius = this.radius;
+        this._backMaterial.lineWidth = 0.02;
+    }
+    _createFrontMaterial(mesh) {
+        this._frontMaterial = this._frontMaterial ?? new MRDLFrontplateMaterial(this.name + "Front Material", mesh.getScene());
+        this.frontMaterial.radius = this.innerQuadRadius;
+        this.frontMaterial.fadeOut = 0.0;
+    }
+    _createBackGlowMaterial(mesh) {
+        const glowRadius = this.radius + 0.04;
+        this._backGlowMaterial = this._backGlowMaterial ?? new MRDLBackglowMaterial(this.name + "Back Glow Material", mesh.getScene());
+        this._backGlowMaterial.bevelRadius = glowRadius;
+        this._backGlowMaterial.lineWidth = glowRadius;
+        this._backGlowMaterial.motion = 0.0;
+    }
+    _createInnerQuadMaterial(mesh) {
+        this._innerQuadMaterial = this._innerQuadMaterial ?? new MRDLInnerquadMaterial("inner_quad", mesh.getScene());
+        this._innerQuadMaterial.radius = this.innerQuadRadius;
+        if (this.isToggleButton) {
+            this._innerQuadMaterial.color = this.innerQuadColor;
+        }
+    }
+    _createPlateMaterial(mesh) {
+        this._plateMaterial = this._plateMaterial ?? new StandardMaterial(this.name + "Plate Material", mesh.getScene());
+        this._plateMaterial.specularColor = Color3.Black();
+    }
+    _onToggle(newState) {
+        super._onToggle(newState);
+    }
+    _affectMaterial(mesh) {
+        if (this._shareMaterials) {
+            // Back
+            if (!this._host._touchSharedMaterials["mrdlBackplateMaterial"]) {
+                this._createBackMaterial(mesh);
+                this._host._touchSharedMaterials["mrdlBackplateMaterial"] = this._backMaterial;
+            }
+            else {
+                this._backMaterial = this._host._touchSharedMaterials["mrdlBackplateMaterial"];
+            }
+            // Front
+            if (!this._host._touchSharedMaterials["mrdlFrontplateMaterial"]) {
+                this._createFrontMaterial(mesh);
+                this._host._touchSharedMaterials["mrdlFrontplateMaterial"] = this._frontMaterial;
+            }
+            else {
+                this._frontMaterial = this._host._touchSharedMaterials["mrdlFrontplateMaterial"];
+            }
+            // Back glow
+            if (!this._host._touchSharedMaterials["mrdlBackglowMaterial"]) {
+                this._createBackGlowMaterial(mesh);
+                this._host._touchSharedMaterials["mrdlBackglowMaterial"] = this._backGlowMaterial;
+            }
+            else {
+                this._backGlowMaterial = this._host._touchSharedMaterials["mrdlBackglowMaterial"];
+            }
+            // Inner quad
+            if (!this._host._touchSharedMaterials["mrdlInnerQuadMaterial"]) {
+                this._createInnerQuadMaterial(mesh);
+                this._host._touchSharedMaterials["mrdlInnerQuadMaterial"] = this._innerQuadMaterial;
+            }
+            else {
+                this._innerQuadMaterial = this._host._touchSharedMaterials["mrdlInnerQuadMaterial"];
+            }
+        }
+        else {
+            this._createBackMaterial(mesh);
+            this._createFrontMaterial(mesh);
+            this._createBackGlowMaterial(mesh);
+            this._createInnerQuadMaterial(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;
+        }
+        if (this._backGlow) {
+            this._backGlow.material = this._backGlowMaterial;
+        }
+        if (this._innerQuad) {
+            this._innerQuad.material = this._innerQuadMaterial;
+        }
+        this._rebuildContent();
+    }
+    /**
+     * Releases all associated resources
+     */
+    dispose() {
+        super.dispose(); // will dispose main mesh ie. back plate
+        this._disposeTooltip();
+        this.onPointerClickObservable.remove(this._pointerClickObserver);
+        this.onPointerEnterObservable.remove(this._pointerEnterObserver);
+        this.onPointerOutObservable.remove(this._pointerOutObserver);
+        this.onToggleObservable.remove(this._toggleObserver);
+        if (!this.shareMaterials) {
+            this._backMaterial.dispose();
+            this._frontMaterial.dispose();
+            this._plateMaterial.dispose();
+            this._backGlowMaterial.dispose();
+            this._innerQuadMaterial.dispose();
+            if (this._pickedPointObserver) {
+                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+                this._pickedPointObserver = null;
+            }
+        }
+    }
+}
+/**
+ * Base Url for the frontplate model.
+ */
+TouchHolographicButton.MRTK_ASSET_BASE_URL = "https://assets.babylonjs.com/core/MRTK/";
+/**
+ * File name for the frontplate model.
+ */
+TouchHolographicButton.FRONTPLATE_MODEL_FILENAME = "mrtk-fluent-frontplate.glb";
+/**
+ * File name for the backplate model.
+ */
+TouchHolographicButton.BACKPLATE_MODEL_FILENAME = "mrtk-fluent-backplate.glb";
+/**
+ * File name for the backglow model.
+ */
+TouchHolographicButton.BACKGLOW_MODEL_FILENAME = "mrtk-fluent-button.glb";
+/**
+ * File name for the innerquad model.
+ */
+TouchHolographicButton.INNERQUAD_MODEL_FILENAME = "SlateProximity.glb";
+//# sourceMappingURL=touchHolographicButton.js.map