@onerjs/gui 8.23.1

package/3D/materials/fluent/fluentMaterial.js

@@ -0,0 +1,286 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { serializeAsColor4, serializeAsVector3, serializeAsTexture, serialize, expandToProperty, serializeAsColor3 } from "@babylonjs/core/Misc/decorators.js";
+import { SerializationHelper } from "@babylonjs/core/Misc/decorators.serialization.js";
+import { Vector3, TmpVectors } from "@babylonjs/core/Maths/math.vector.js";
+import { MaterialDefines } from "@babylonjs/core/Materials/materialDefines.js";
+import { PushMaterial } from "@babylonjs/core/Materials/pushMaterial.js";
+import { VertexBuffer } from "@babylonjs/core/Buffers/buffer.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
+import "./shaders/fluent.vertex.js";
+import "./shaders/fluent.fragment.js";
+import { PrepareUniformsAndSamplersList } from "@babylonjs/core/Materials/materialHelper.functions.js";
+/** @internal */
+export class FluentMaterialDefines extends MaterialDefines {
+    constructor() {
+        super();
+        this.INNERGLOW = false;
+        this.BORDER = false;
+        this.HOVERLIGHT = false;
+        this.TEXTURE = false;
+        this.rebuild();
+    }
+}
+/**
+ * Class used to render controls with fluent design
+ */
+export class FluentMaterial extends PushMaterial {
+    /**
+     * Creates a new Fluent material
+     * @param name defines the name of the material
+     * @param scene defines the hosting scene
+     */
+    constructor(name, scene) {
+        super(name, scene);
+        /**
+         * Gets or sets inner glow intensity. A value of 0 means no glow (default is 0.5)
+         */
+        this.innerGlowColorIntensity = 0.5;
+        /**
+         * Gets or sets the inner glow color (white by default)
+         */
+        this.innerGlowColor = new Color3(1.0, 1.0, 1.0);
+        /**
+         * Gets or sets the albedo color (Default is Color3(0.3, 0.35, 0.4))
+         */
+        this.albedoColor = new Color3(0.3, 0.35, 0.4);
+        /**
+         * Gets or sets a boolean indicating if borders must be rendered (default is false)
+         */
+        this.renderBorders = false;
+        /**
+         * Gets or sets border width (default is 0.5)
+         */
+        this.borderWidth = 0.5;
+        /**
+         * Gets or sets a value indicating the smoothing value applied to border edges (0.02 by default)
+         */
+        this.edgeSmoothingValue = 0.02;
+        /**
+         * Gets or sets the minimum value that can be applied to border width (default is 0.1)
+         */
+        this.borderMinValue = 0.1;
+        /**
+         * Gets or sets a boolean indicating if hover light must be rendered (default is false)
+         */
+        this.renderHoverLight = false;
+        /**
+         * Gets or sets the radius used to render the hover light (default is 0.01)
+         */
+        this.hoverRadius = 0.01;
+        /**
+         * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))
+         */
+        this.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())
+         */
+        this.hoverPosition = Vector3.Zero();
+    }
+    needAlphaBlending() {
+        return this.alpha !== 1.0;
+    }
+    needAlphaTesting() {
+        return false;
+    }
+    getAlphaTestTexture() {
+        return null;
+    }
+    isReadyForSubMesh(mesh, subMesh) {
+        const drawWrapper = subMesh._drawWrapper;
+        if (this.isFrozen) {
+            if (drawWrapper.effect && drawWrapper._wasPreviouslyReady) {
+                return true;
+            }
+        }
+        if (!subMesh.materialDefines) {
+            subMesh.materialDefines = new FluentMaterialDefines();
+        }
+        const scene = this.getScene();
+        const defines = subMesh.materialDefines;
+        if (!this.checkReadyOnEveryCall && subMesh.effect) {
+            if (defines._renderId === scene.getRenderId()) {
+                return true;
+            }
+        }
+        if (defines._areTexturesDirty) {
+            defines.INNERGLOW = this.innerGlowColorIntensity > 0;
+            defines.BORDER = this.renderBorders;
+            defines.HOVERLIGHT = this.renderHoverLight;
+            if (this._albedoTexture) {
+                if (!this._albedoTexture.isReadyOrNotBlocking()) {
+                    return false;
+                }
+                else {
+                    defines.TEXTURE = true;
+                }
+            }
+            else {
+                defines.TEXTURE = false;
+            }
+        }
+        const engine = scene.getEngine();
+        // Get correct effect
+        if (defines.isDirty) {
+            defines.markAsProcessed();
+            scene.resetCachedMaterial();
+            //Attributes
+            const attribs = [VertexBuffer.PositionKind];
+            attribs.push(VertexBuffer.NormalKind);
+            attribs.push(VertexBuffer.UVKind);
+            const shaderName = "fluent";
+            const uniforms = [
+                "world",
+                "viewProjection",
+                "innerGlowColor",
+                "albedoColor",
+                "borderWidth",
+                "edgeSmoothingValue",
+                "scaleFactor",
+                "borderMinValue",
+                "hoverColor",
+                "hoverPosition",
+                "hoverRadius",
+                "textureMatrix",
+            ];
+            const samplers = ["albedoSampler"];
+            const uniformBuffers = [];
+            PrepareUniformsAndSamplersList({
+                uniformsNames: uniforms,
+                uniformBuffersNames: uniformBuffers,
+                samplers: samplers,
+                defines: defines,
+                maxSimultaneousLights: 4,
+            });
+            const join = defines.toString();
+            subMesh.setEffect(scene.getEngine().createEffect(shaderName, {
+                attributes: attribs,
+                uniformsNames: uniforms,
+                uniformBuffersNames: uniformBuffers,
+                samplers: samplers,
+                defines: join,
+                fallbacks: null,
+                onCompiled: this.onCompiled,
+                onError: this.onError,
+                indexParameters: { maxSimultaneousLights: 4 },
+            }, engine), defines, this._materialContext);
+        }
+        if (!subMesh.effect || !subMesh.effect.isReady()) {
+            return false;
+        }
+        defines._renderId = scene.getRenderId();
+        drawWrapper._wasPreviouslyReady = true;
+        return true;
+    }
+    bindForSubMesh(world, mesh, subMesh) {
+        const scene = this.getScene();
+        const defines = subMesh.materialDefines;
+        if (!defines) {
+            return;
+        }
+        const effect = subMesh.effect;
+        if (!effect) {
+            return;
+        }
+        this._activeEffect = effect;
+        // Matrices
+        this.bindOnlyWorldMatrix(world);
+        this._activeEffect.setMatrix("viewProjection", scene.getTransformMatrix());
+        if (this._mustRebind(scene, effect, subMesh)) {
+            this._activeEffect.setColor4("albedoColor", this.albedoColor, this.alpha);
+            if (defines.INNERGLOW) {
+                this._activeEffect.setColor4("innerGlowColor", this.innerGlowColor, this.innerGlowColorIntensity);
+            }
+            if (defines.BORDER) {
+                this._activeEffect.setFloat("borderWidth", this.borderWidth);
+                this._activeEffect.setFloat("edgeSmoothingValue", this.edgeSmoothingValue);
+                this._activeEffect.setFloat("borderMinValue", this.borderMinValue);
+                mesh.getBoundingInfo().boundingBox.extendSize.multiplyToRef(mesh.scaling, TmpVectors.Vector3[0]);
+                this._activeEffect.setVector3("scaleFactor", TmpVectors.Vector3[0]);
+            }
+            if (defines.HOVERLIGHT) {
+                this._activeEffect.setDirectColor4("hoverColor", this.hoverColor);
+                this._activeEffect.setFloat("hoverRadius", this.hoverRadius);
+                this._activeEffect.setVector3("hoverPosition", this.hoverPosition);
+            }
+            if (defines.TEXTURE && this._albedoTexture) {
+                this._activeEffect.setTexture("albedoSampler", this._albedoTexture);
+                const matrix = this._albedoTexture.getTextureMatrix();
+                this._activeEffect.setMatrix("textureMatrix", matrix);
+            }
+        }
+        this._afterBind(mesh, this._activeEffect, subMesh);
+    }
+    getActiveTextures() {
+        const activeTextures = super.getActiveTextures();
+        return activeTextures;
+    }
+    hasTexture(texture) {
+        if (super.hasTexture(texture)) {
+            return true;
+        }
+        return false;
+    }
+    dispose(forceDisposeEffect) {
+        super.dispose(forceDisposeEffect);
+    }
+    clone(name) {
+        return SerializationHelper.Clone(() => new FluentMaterial(name, this.getScene()), this);
+    }
+    serialize() {
+        const serializationObject = super.serialize();
+        serializationObject.customType = "BABYLON.GUI.FluentMaterial";
+        return serializationObject;
+    }
+    getClassName() {
+        return "FluentMaterial";
+    }
+    // Statics
+    static Parse(source, scene, rootUrl) {
+        return SerializationHelper.Parse(() => new FluentMaterial(source.name, scene), source, scene, rootUrl);
+    }
+}
+__decorate([
+    serialize(),
+    expandToProperty("_markAllSubMeshesAsTexturesDirty")
+], FluentMaterial.prototype, "innerGlowColorIntensity", void 0);
+__decorate([
+    serializeAsColor3()
+], FluentMaterial.prototype, "innerGlowColor", void 0);
+__decorate([
+    serializeAsColor3()
+], FluentMaterial.prototype, "albedoColor", void 0);
+__decorate([
+    serialize(),
+    expandToProperty("_markAllSubMeshesAsTexturesDirty")
+], FluentMaterial.prototype, "renderBorders", void 0);
+__decorate([
+    serialize()
+], FluentMaterial.prototype, "borderWidth", void 0);
+__decorate([
+    serialize()
+], FluentMaterial.prototype, "edgeSmoothingValue", void 0);
+__decorate([
+    serialize()
+], FluentMaterial.prototype, "borderMinValue", void 0);
+__decorate([
+    serialize(),
+    expandToProperty("_markAllSubMeshesAsTexturesDirty")
+], FluentMaterial.prototype, "renderHoverLight", void 0);
+__decorate([
+    serialize()
+], FluentMaterial.prototype, "hoverRadius", void 0);
+__decorate([
+    serializeAsColor4()
+], FluentMaterial.prototype, "hoverColor", void 0);
+__decorate([
+    serializeAsVector3()
+], FluentMaterial.prototype, "hoverPosition", void 0);
+__decorate([
+    serializeAsTexture("albedoTexture")
+], FluentMaterial.prototype, "_albedoTexture", void 0);
+__decorate([
+    expandToProperty("_markAllSubMeshesAsTexturesAndMiscDirty")
+], FluentMaterial.prototype, "albedoTexture", void 0);
+RegisterClass("BABYLON.GUI.FluentMaterial", FluentMaterial);
+//# sourceMappingURL=fluentMaterial.js.map

package/3D/materials/fluent/fluentMaterial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluentMaterial.js","sourceRoot":"","sources":["../../../../../../dev/gui/src/3D/materials/fluent/fluentMaterial.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nimport type { Nullable } from \"core/types\";\r\nimport { serializeAsColor4, serializeAsVector3, serializeAsTexture, serialize, expandToProperty, serializeAsColor3 } from \"core/Misc/decorators\";\r\nimport { SerializationHelper } from \"core/Misc/decorators.serialization\";\r\nimport type { Matrix } from \"core/Maths/math.vector\";\r\nimport { Vector3, TmpVectors } from \"core/Maths/math.vector\";\r\nimport type { BaseTexture } from \"core/Materials/Textures/baseTexture\";\r\nimport { MaterialDefines } from \"core/Materials/materialDefines\";\r\nimport type { IEffectCreationOptions } from \"core/Materials/effect\";\r\nimport { PushMaterial } from \"core/Materials/pushMaterial\";\r\nimport { VertexBuffer } from \"core/Buffers/buffer\";\r\nimport type { AbstractMesh } from \"core/Meshes/abstractMesh\";\r\nimport type { SubMesh } from \"core/Meshes/subMesh\";\r\nimport type { Mesh } from \"core/Meshes/mesh\";\r\nimport type { Scene } from \"core/scene\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\n\r\nimport \"./shaders/fluent.vertex\";\r\nimport \"./shaders/fluent.fragment\";\r\nimport { PrepareUniformsAndSamplersList } from \"core/Materials/materialHelper.functions\";\r\n\r\n/** @internal */\r\nexport class FluentMaterialDefines extends MaterialDefines {\r\n    public INNERGLOW = false;\r\n    public BORDER = false;\r\n    public HOVERLIGHT = false;\r\n    public TEXTURE = false;\r\n\r\n    constructor() {\r\n        super();\r\n        this.rebuild();\r\n    }\r\n}\r\n\r\n/**\r\n * Class used to render controls with fluent design\r\n */\r\nexport class FluentMaterial extends PushMaterial {\r\n    /**\r\n     * Gets or sets inner glow intensity. A value of 0 means no glow (default is 0.5)\r\n     */\r\n    @serialize()\r\n    @expandToProperty(\"_markAllSubMeshesAsTexturesDirty\")\r\n    public innerGlowColorIntensity = 0.5;\r\n\r\n    /**\r\n     * Gets or sets the inner glow color (white by default)\r\n     */\r\n    @serializeAsColor3()\r\n    public innerGlowColor = new Color3(1.0, 1.0, 1.0);\r\n\r\n    /**\r\n     * Gets or sets the albedo color (Default is Color3(0.3, 0.35, 0.4))\r\n     */\r\n    @serializeAsColor3()\r\n    public albedoColor = new Color3(0.3, 0.35, 0.4);\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating if borders must be rendered (default is false)\r\n     */\r\n    @serialize()\r\n    @expandToProperty(\"_markAllSubMeshesAsTexturesDirty\")\r\n    public renderBorders = false;\r\n\r\n    /**\r\n     * Gets or sets border width (default is 0.5)\r\n     */\r\n    @serialize()\r\n    public borderWidth = 0.5;\r\n\r\n    /**\r\n     * Gets or sets a value indicating the smoothing value applied to border edges (0.02 by default)\r\n     */\r\n    @serialize()\r\n    public edgeSmoothingValue = 0.02;\r\n\r\n    /**\r\n     * Gets or sets the minimum value that can be applied to border width (default is 0.1)\r\n     */\r\n    @serialize()\r\n    public borderMinValue = 0.1;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating if hover light must be rendered (default is false)\r\n     */\r\n    @serialize()\r\n    @expandToProperty(\"_markAllSubMeshesAsTexturesDirty\")\r\n    public renderHoverLight = false;\r\n\r\n    /**\r\n     * Gets or sets the radius used to render the hover light (default is 0.01)\r\n     */\r\n    @serialize()\r\n    public hoverRadius = 0.01;\r\n\r\n    /**\r\n     * Gets or sets the color used to render the hover light (default is Color4(0.3, 0.3, 0.3, 1.0))\r\n     */\r\n    @serializeAsColor4()\r\n    public hoverColor = new Color4(0.3, 0.3, 0.3, 1.0);\r\n\r\n    /**\r\n     * Gets or sets the hover light position in world space (default is Vector3.Zero())\r\n     */\r\n    @serializeAsVector3()\r\n    public hoverPosition = Vector3.Zero();\r\n\r\n    @serializeAsTexture(\"albedoTexture\")\r\n    private _albedoTexture: Nullable<BaseTexture>;\r\n\r\n    /** Gets or sets the texture to use for albedo color */\r\n    @expandToProperty(\"_markAllSubMeshesAsTexturesAndMiscDirty\")\r\n    public albedoTexture: Nullable<BaseTexture>;\r\n\r\n    /**\r\n     * Creates a new Fluent material\r\n     * @param name defines the name of the material\r\n     * @param scene defines the hosting scene\r\n     */\r\n    constructor(name: string, scene?: Scene) {\r\n        super(name, scene);\r\n    }\r\n\r\n    public override needAlphaBlending(): boolean {\r\n        return this.alpha !== 1.0;\r\n    }\r\n\r\n    public override needAlphaTesting(): boolean {\r\n        return false;\r\n    }\r\n\r\n    public override getAlphaTestTexture(): Nullable<BaseTexture> {\r\n        return null;\r\n    }\r\n\r\n    public override isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh): boolean {\r\n        const drawWrapper = subMesh._drawWrapper;\r\n\r\n        if (this.isFrozen) {\r\n            if (drawWrapper.effect && drawWrapper._wasPreviouslyReady) {\r\n                return true;\r\n            }\r\n        }\r\n\r\n        if (!subMesh.materialDefines) {\r\n            subMesh.materialDefines = new FluentMaterialDefines();\r\n        }\r\n\r\n        const scene = this.getScene();\r\n        const defines = <FluentMaterialDefines>subMesh.materialDefines;\r\n        if (!this.checkReadyOnEveryCall && subMesh.effect) {\r\n            if (defines._renderId === scene.getRenderId()) {\r\n                return true;\r\n            }\r\n        }\r\n\r\n        if (defines._areTexturesDirty) {\r\n            defines.INNERGLOW = this.innerGlowColorIntensity > 0;\r\n            defines.BORDER = this.renderBorders;\r\n            defines.HOVERLIGHT = this.renderHoverLight;\r\n\r\n            if (this._albedoTexture) {\r\n                if (!this._albedoTexture.isReadyOrNotBlocking()) {\r\n                    return false;\r\n                } else {\r\n                    defines.TEXTURE = true;\r\n                }\r\n            } else {\r\n                defines.TEXTURE = false;\r\n            }\r\n        }\r\n\r\n        const engine = scene.getEngine();\r\n        // Get correct effect\r\n        if (defines.isDirty) {\r\n            defines.markAsProcessed();\r\n            scene.resetCachedMaterial();\r\n\r\n            //Attributes\r\n            const attribs = [VertexBuffer.PositionKind];\r\n            attribs.push(VertexBuffer.NormalKind);\r\n            attribs.push(VertexBuffer.UVKind);\r\n\r\n            const shaderName = \"fluent\";\r\n\r\n            const uniforms = [\r\n                \"world\",\r\n                \"viewProjection\",\r\n                \"innerGlowColor\",\r\n                \"albedoColor\",\r\n                \"borderWidth\",\r\n                \"edgeSmoothingValue\",\r\n                \"scaleFactor\",\r\n                \"borderMinValue\",\r\n                \"hoverColor\",\r\n                \"hoverPosition\",\r\n                \"hoverRadius\",\r\n                \"textureMatrix\",\r\n            ];\r\n\r\n            const samplers = [\"albedoSampler\"];\r\n            const uniformBuffers: string[] = [];\r\n\r\n            PrepareUniformsAndSamplersList(<IEffectCreationOptions>{\r\n                uniformsNames: uniforms,\r\n                uniformBuffersNames: uniformBuffers,\r\n                samplers: samplers,\r\n                defines: defines,\r\n                maxSimultaneousLights: 4,\r\n            });\r\n\r\n            const join = defines.toString();\r\n            subMesh.setEffect(\r\n                scene.getEngine().createEffect(\r\n                    shaderName,\r\n                    <IEffectCreationOptions>{\r\n                        attributes: attribs,\r\n                        uniformsNames: uniforms,\r\n                        uniformBuffersNames: uniformBuffers,\r\n                        samplers: samplers,\r\n                        defines: join,\r\n                        fallbacks: null,\r\n                        onCompiled: this.onCompiled,\r\n                        onError: this.onError,\r\n                        indexParameters: { maxSimultaneousLights: 4 },\r\n                    },\r\n                    engine\r\n                ),\r\n                defines,\r\n                this._materialContext\r\n            );\r\n        }\r\n\r\n        if (!subMesh.effect || !subMesh.effect.isReady()) {\r\n            return false;\r\n        }\r\n\r\n        defines._renderId = scene.getRenderId();\r\n        drawWrapper._wasPreviouslyReady = true;\r\n\r\n        return true;\r\n    }\r\n\r\n    public override bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void {\r\n        const scene = this.getScene();\r\n\r\n        const defines = <FluentMaterialDefines>subMesh.materialDefines;\r\n        if (!defines) {\r\n            return;\r\n        }\r\n\r\n        const effect = subMesh.effect;\r\n        if (!effect) {\r\n            return;\r\n        }\r\n        this._activeEffect = effect;\r\n\r\n        // Matrices\r\n        this.bindOnlyWorldMatrix(world);\r\n        this._activeEffect.setMatrix(\"viewProjection\", scene.getTransformMatrix());\r\n\r\n        if (this._mustRebind(scene, effect, subMesh)) {\r\n            this._activeEffect.setColor4(\"albedoColor\", this.albedoColor, this.alpha);\r\n\r\n            if (defines.INNERGLOW) {\r\n                this._activeEffect.setColor4(\"innerGlowColor\", this.innerGlowColor, this.innerGlowColorIntensity);\r\n            }\r\n\r\n            if (defines.BORDER) {\r\n                this._activeEffect.setFloat(\"borderWidth\", this.borderWidth);\r\n                this._activeEffect.setFloat(\"edgeSmoothingValue\", this.edgeSmoothingValue);\r\n                this._activeEffect.setFloat(\"borderMinValue\", this.borderMinValue);\r\n\r\n                mesh.getBoundingInfo().boundingBox.extendSize.multiplyToRef(mesh.scaling, TmpVectors.Vector3[0]);\r\n                this._activeEffect.setVector3(\"scaleFactor\", TmpVectors.Vector3[0]);\r\n            }\r\n\r\n            if (defines.HOVERLIGHT) {\r\n                this._activeEffect.setDirectColor4(\"hoverColor\", this.hoverColor);\r\n                this._activeEffect.setFloat(\"hoverRadius\", this.hoverRadius);\r\n                this._activeEffect.setVector3(\"hoverPosition\", this.hoverPosition);\r\n            }\r\n\r\n            if (defines.TEXTURE && this._albedoTexture) {\r\n                this._activeEffect.setTexture(\"albedoSampler\", this._albedoTexture);\r\n                const matrix = this._albedoTexture.getTextureMatrix();\r\n                this._activeEffect.setMatrix(\"textureMatrix\", matrix);\r\n            }\r\n        }\r\n\r\n        this._afterBind(mesh, this._activeEffect, subMesh);\r\n    }\r\n\r\n    public override getActiveTextures(): BaseTexture[] {\r\n        const activeTextures = super.getActiveTextures();\r\n\r\n        return activeTextures;\r\n    }\r\n\r\n    public override hasTexture(texture: BaseTexture): boolean {\r\n        if (super.hasTexture(texture)) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    public override dispose(forceDisposeEffect?: boolean): void {\r\n        super.dispose(forceDisposeEffect);\r\n    }\r\n\r\n    public override clone(name: string): FluentMaterial {\r\n        return SerializationHelper.Clone(() => new FluentMaterial(name, this.getScene()), this);\r\n    }\r\n\r\n    public override serialize(): any {\r\n        const serializationObject = super.serialize();\r\n        serializationObject.customType = \"BABYLON.GUI.FluentMaterial\";\r\n        return serializationObject;\r\n    }\r\n\r\n    public override getClassName(): string {\r\n        return \"FluentMaterial\";\r\n    }\r\n\r\n    // Statics\r\n    public static override Parse(source: any, scene: Scene, rootUrl: string): FluentMaterial {\r\n        return SerializationHelper.Parse(() => new FluentMaterial(source.name, scene), source, scene, rootUrl);\r\n    }\r\n}\r\n\r\nRegisterClass(\"BABYLON.GUI.FluentMaterial\", FluentMaterial);\r\n"]}

package/3D/materials/fluent/index.d.ts

@@ -0,0 +1 @@
+export * from "./fluentMaterial.js";

package/3D/materials/fluent/index.js

@@ -0,0 +1,2 @@
+export * from "./fluentMaterial.js";
+//# sourceMappingURL=index.js.map

package/3D/materials/fluent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../dev/gui/src/3D/materials/fluent/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from \"./fluentMaterial\";\r\n"]}

package/3D/materials/fluent/shaders/fluent.fragment.d.ts

@@ -0,0 +1,5 @@
+/** @internal */
+export declare const fluentPixelShader: {
+    name: string;
+    shader: string;
+};

package/3D/materials/fluent/shaders/fluent.fragment.js

@@ -0,0 +1,41 @@
+// Do not edit.
+import { ShaderStore } from "@babylonjs/core/Engines/shaderStore.js";
+const name = "fluentPixelShader";
+const shader = `precision highp float;varying vec2 vUV;uniform vec4 albedoColor;
+#ifdef INNERGLOW
+uniform vec4 innerGlowColor;
+#endif
+#ifdef BORDER
+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
+#ifdef TEXTURE
+uniform sampler2D albedoSampler;uniform mat4 textureMatrix;vec2 finalUV;
+#endif
+void main(void) {vec3 albedo=albedoColor.rgb;float alpha=albedoColor.a;
+#ifdef TEXTURE
+finalUV=vec2(textureMatrix*vec4(vUV,1.0,0.0));albedo=texture2D(albedoSampler,finalUV).rgb;
+#endif
+#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;vec3 borderColor=albedo*borderPower;vec2 distanceToEdge;distanceToEdge.x=abs(vUV.x-0.5)*2.0;distanceToEdge.y=abs(vUV.y-0.5)*2.0;float borderValue=max(smoothstep(scaleInfo.x-edgeSmoothingValue,scaleInfo.x+edgeSmoothingValue,distanceToEdge.x),
+smoothstep(scaleInfo.y-edgeSmoothingValue,scaleInfo.y+edgeSmoothingValue,distanceToEdge.y));borderColor=borderColor*borderValue*max(borderMinValue*inverseBorderPower,pointToHover); 
+albedo+=borderColor;alpha=max(alpha,borderValue);
+#endif
+#ifdef INNERGLOW
+vec2 uvGlow=(vUV-vec2(0.5,0.5))*(innerGlowColor.a*2.0);uvGlow=uvGlow*uvGlow;uvGlow=uvGlow*uvGlow;albedo+=mix(vec3(0.0,0.0,0.0),innerGlowColor.rgb,uvGlow.x+uvGlow.y); 
+#endif
+gl_FragColor=vec4(albedo,alpha);}`;
+// Sideeffect
+if (!ShaderStore.ShadersStore[name]) {
+    ShaderStore.ShadersStore[name] = shader;
+}
+/** @internal */
+export const fluentPixelShader = { name, shader };
+//# sourceMappingURL=fluent.fragment.js.map

package/3D/materials/fluent/shaders/fluent.fragment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluent.fragment.js","sourceRoot":"","sources":["../../../../../../../dev/gui/src/3D/materials/fluent/shaders/fluent.fragment.ts"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAE,WAAW,EAAE,+CAAiC;AAEvD,MAAM,IAAI,GAAG,mBAAmB,CAAC;AACjC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA8BmB,CAAC;AACnC,aAAa;AACb,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;IAClC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAC5C,CAAC;AACD,gBAAgB;AAChB,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC","sourcesContent":["// Do not edit.\nimport { ShaderStore } from \"core/Engines/shaderStore\";\n\nconst name = \"fluentPixelShader\";\nconst shader = `precision highp float;varying vec2 vUV;uniform vec4 albedoColor;\n#ifdef INNERGLOW\nuniform vec4 innerGlowColor;\n#endif\n#ifdef BORDER\nvarying vec2 scaleInfo;uniform float edgeSmoothingValue;uniform float borderMinValue;\n#endif\n#ifdef HOVERLIGHT\nvarying vec3 worldPosition;uniform vec3 hoverPosition;uniform vec4 hoverColor;uniform float hoverRadius;\n#endif\n#ifdef TEXTURE\nuniform sampler2D albedoSampler;uniform mat4 textureMatrix;vec2 finalUV;\n#endif\nvoid main(void) {vec3 albedo=albedoColor.rgb;float alpha=albedoColor.a;\n#ifdef TEXTURE\nfinalUV=vec2(textureMatrix*vec4(vUV,1.0,0.0));albedo=texture2D(albedoSampler,finalUV).rgb;\n#endif\n#ifdef HOVERLIGHT\nfloat pointToHover=(1.0-clamp(length(hoverPosition-worldPosition)/hoverRadius,0.,1.))*hoverColor.a;albedo=clamp(albedo+hoverColor.rgb*pointToHover,0.,1.);\n#else\nfloat pointToHover=1.0;\n#endif\n#ifdef BORDER \nfloat borderPower=10.0;float inverseBorderPower=1.0/borderPower;vec3 borderColor=albedo*borderPower;vec2 distanceToEdge;distanceToEdge.x=abs(vUV.x-0.5)*2.0;distanceToEdge.y=abs(vUV.y-0.5)*2.0;float borderValue=max(smoothstep(scaleInfo.x-edgeSmoothingValue,scaleInfo.x+edgeSmoothingValue,distanceToEdge.x),\nsmoothstep(scaleInfo.y-edgeSmoothingValue,scaleInfo.y+edgeSmoothingValue,distanceToEdge.y));borderColor=borderColor*borderValue*max(borderMinValue*inverseBorderPower,pointToHover); \nalbedo+=borderColor;alpha=max(alpha,borderValue);\n#endif\n#ifdef INNERGLOW\nvec2 uvGlow=(vUV-vec2(0.5,0.5))*(innerGlowColor.a*2.0);uvGlow=uvGlow*uvGlow;uvGlow=uvGlow*uvGlow;albedo+=mix(vec3(0.0,0.0,0.0),innerGlowColor.rgb,uvGlow.x+uvGlow.y); \n#endif\ngl_FragColor=vec4(albedo,alpha);}`;\n// Sideeffect\nif (!ShaderStore.ShadersStore[name]) {\n    ShaderStore.ShadersStore[name] = shader;\n}\n/** @internal */\nexport const fluentPixelShader = { name, shader };\n"]}

package/3D/materials/fluent/shaders/fluent.vertex.d.ts

@@ -0,0 +1,5 @@
+/** @internal */
+export declare const fluentVertexShader: {
+    name: string;
+    shader: string;
+};

package/3D/materials/fluent/shaders/fluent.vertex.js

@@ -0,0 +1,40 @@
+// Do not edit.
+import { ShaderStore } from "@babylonjs/core/Engines/shaderStore.js";
+const name = "fluentVertexShader";
+const shader = `precision highp float;attribute vec3 position;attribute vec3 normal;attribute vec2 uv;uniform mat4 world;uniform mat4 viewProjection;varying vec2 vUV;
+#ifdef BORDER
+varying vec2 scaleInfo;uniform float borderWidth;uniform vec3 scaleFactor;
+#endif
+#ifdef HOVERLIGHT
+varying vec3 worldPosition;
+#endif
+void main(void) {vUV=uv;
+#ifdef BORDER
+vec3 scale=scaleFactor;float minScale=min(min(scale.x,scale.y),scale.z);float maxScale=max(max(scale.x,scale.y),scale.z);float minOverMiddleScale=minScale/(scale.x+scale.y+scale.z-minScale-maxScale);float areaYZ=scale.y*scale.z;float areaXZ=scale.x*scale.z;float areaXY=scale.x*scale.y;float scaledBorderWidth=borderWidth; 
+if (abs(normal.x)==1.0) 
+{scale.x=scale.y;scale.y=scale.z;if (areaYZ>areaXZ && areaYZ>areaXY)
+{scaledBorderWidth*=minOverMiddleScale;}}
+else if (abs(normal.y)==1.0) 
+{scale.x=scale.z;if (areaXZ>areaXY && areaXZ>areaYZ)
+{scaledBorderWidth*=minOverMiddleScale;}}
+else 
+{if (areaXY>areaYZ && areaXY>areaXZ)
+{scaledBorderWidth*=minOverMiddleScale;}}
+float scaleRatio=min(scale.x,scale.y)/max(scale.x,scale.y);if (scale.x>scale.y)
+{scaleInfo.x=1.0-(scaledBorderWidth*scaleRatio);scaleInfo.y=1.0-scaledBorderWidth;}
+else
+{scaleInfo.x=1.0-scaledBorderWidth;scaleInfo.y=1.0-(scaledBorderWidth*scaleRatio);} 
+#endif 
+vec4 worldPos=world*vec4(position,1.0);
+#ifdef HOVERLIGHT
+worldPosition=worldPos.xyz;
+#endif
+gl_Position=viewProjection*worldPos;}
+`;
+// Sideeffect
+if (!ShaderStore.ShadersStore[name]) {
+    ShaderStore.ShadersStore[name] = shader;
+}
+/** @internal */
+export const fluentVertexShader = { name, shader };
+//# sourceMappingURL=fluent.vertex.js.map

package/3D/materials/fluent/shaders/fluent.vertex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluent.vertex.js","sourceRoot":"","sources":["../../../../../../../dev/gui/src/3D/materials/fluent/shaders/fluent.vertex.ts"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAE,WAAW,EAAE,+CAAiC;AAEvD,MAAM,IAAI,GAAG,oBAAoB,CAAC;AAClC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Bd,CAAC;AACF,aAAa;AACb,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;IAClC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC;AAC5C,CAAC;AACD,gBAAgB;AAChB,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC","sourcesContent":["// Do not edit.\nimport { ShaderStore } from \"core/Engines/shaderStore\";\n\nconst name = \"fluentVertexShader\";\nconst shader = `precision highp float;attribute vec3 position;attribute vec3 normal;attribute vec2 uv;uniform mat4 world;uniform mat4 viewProjection;varying vec2 vUV;\n#ifdef BORDER\nvarying vec2 scaleInfo;uniform float borderWidth;uniform vec3 scaleFactor;\n#endif\n#ifdef HOVERLIGHT\nvarying vec3 worldPosition;\n#endif\nvoid main(void) {vUV=uv;\n#ifdef BORDER\nvec3 scale=scaleFactor;float minScale=min(min(scale.x,scale.y),scale.z);float maxScale=max(max(scale.x,scale.y),scale.z);float minOverMiddleScale=minScale/(scale.x+scale.y+scale.z-minScale-maxScale);float areaYZ=scale.y*scale.z;float areaXZ=scale.x*scale.z;float areaXY=scale.x*scale.y;float scaledBorderWidth=borderWidth; \nif (abs(normal.x)==1.0) \n{scale.x=scale.y;scale.y=scale.z;if (areaYZ>areaXZ && areaYZ>areaXY)\n{scaledBorderWidth*=minOverMiddleScale;}}\nelse if (abs(normal.y)==1.0) \n{scale.x=scale.z;if (areaXZ>areaXY && areaXZ>areaYZ)\n{scaledBorderWidth*=minOverMiddleScale;}}\nelse \n{if (areaXY>areaYZ && areaXY>areaXZ)\n{scaledBorderWidth*=minOverMiddleScale;}}\nfloat scaleRatio=min(scale.x,scale.y)/max(scale.x,scale.y);if (scale.x>scale.y)\n{scaleInfo.x=1.0-(scaledBorderWidth*scaleRatio);scaleInfo.y=1.0-scaledBorderWidth;}\nelse\n{scaleInfo.x=1.0-scaledBorderWidth;scaleInfo.y=1.0-(scaledBorderWidth*scaleRatio);} \n#endif \nvec4 worldPos=world*vec4(position,1.0);\n#ifdef HOVERLIGHT\nworldPosition=worldPos.xyz;\n#endif\ngl_Position=viewProjection*worldPos;}\n`;\n// Sideeffect\nif (!ShaderStore.ShadersStore[name]) {\n    ShaderStore.ShadersStore[name] = shader;\n}\n/** @internal */\nexport const fluentVertexShader = { name, shader };\n"]}

package/3D/materials/fluentBackplate/fluentBackplateMaterial.d.ts

@@ -0,0 +1,155 @@
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { Matrix } from "@babylonjs/core/Maths/math.vector.js";
+import { Vector3, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import type { IAnimatable } from "@babylonjs/core/Animations/animatable.interface.js";
+import type { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
+import { PushMaterial } from "@babylonjs/core/Materials/pushMaterial.js";
+import type { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
+import type { SubMesh } from "@babylonjs/core/Meshes/subMesh.js";
+import type { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import type { Scene } from "@babylonjs/core/scene.js";
+import { Color4 } from "@babylonjs/core/Maths/math.color.js";
+import "./shaders/fluentBackplate.fragment.js";
+import "./shaders/fluentBackplate.vertex.js";
+/**
+ * Class used to render square buttons with fluent design
+ */
+export declare class FluentBackplateMaterial extends PushMaterial {
+    /**
+     * URL pointing to the texture used to define the coloring for the fluent blob effect.
+     */
+    static BLOB_TEXTURE_URL: string;
+    /**
+     * URL pointing to the texture used to define iridescent map.
+     */
+    static IM_TEXTURE_URL: string;
+    private _blobTexture;
+    private _iridescentMap;
+    /**
+     * Gets or sets the corner radius on the backplate. Best to keep this value between 0.01 and 0.5. Default is 0.03.
+     */
+    radius: number;
+    /**
+     * Gets or sets the line width of the backplate.
+     */
+    lineWidth: number;
+    /**
+     * Gets or sets whether to use absolute sizes when calculating effects on the backplate.
+     * Since desktop and VR/AR have different relative sizes, it's usually best to keep this false.
+     */
+    absoluteSizes: boolean;
+    /** @internal */
+    _filterWidth: number;
+    /**
+     * Gets or sets the base color of the backplate.
+     */
+    baseColor: Color4;
+    /**
+     * Gets or sets the line color of the backplate.
+     */
+    lineColor: Color4;
+    /**
+     * Gets or sets the intensity of the fluent hover glow effect.
+     */
+    blobIntensity: number;
+    /**
+     * Gets or sets the far size of the fluent hover glow effect.
+     */
+    blobFarSize: number;
+    /**
+     * Gets or sets the distance considered "near" to the backplate, which controls the size of the fluent hover glow effect (see blobNearSize).
+     */
+    blobNearDistance: number;
+    /**
+     * Gets or sets the distance considered "far" from the backplate, which controls the size of the fluent hover glow effect (see blobFarSize).
+     */
+    blobFarDistance: number;
+    /**
+     * Gets or sets the length of the fluent hover glow effect fade.
+     */
+    blobFadeLength: number;
+    /**
+     * Gets or sets the size of the fluent hover glow effect when the left pointer is considered "near" to the backplate (see blobNearDistance).
+     */
+    blobNearSize: number;
+    /**
+     * Gets or sets the progress of the fluent hover glow effect selection animation corresponding to the left pointer (0.0 - 1.0).
+     */
+    blobPulse: number;
+    /**
+     * Gets or sets the opacity of the fluent hover glow effect corresponding to the left pointer (0.0 - 1.0). Default is 0.
+     */
+    blobFade: number;
+    /**
+     * Gets or sets the size of the fluent hover glow effect when the right pointer is considered "near" to the backplate (see blobNearDistance).
+     */
+    blobNearSize2: number;
+    /**
+     * Gets or sets the progress of the fluent hover glow effect selection animation corresponding to the right pointer (0.0 - 1.0).
+     */
+    blobPulse2: number;
+    /**
+     * Gets or sets the opacity of the fluent hover glow effect corresponding to the right pointer (0.0 - 1.0). Default is 0.
+     */
+    blobFade2: number;
+    /** @internal */
+    _rate: number;
+    /**
+     * Gets or sets the color of the highlights on the backplate line.
+     */
+    highlightColor: Color4;
+    /**
+     * Gets or sets the width of the highlights on the backplate line.
+     */
+    highlightWidth: number;
+    /** @internal */
+    _highlightTransform: Vector4;
+    /** @internal */
+    _highlight: number;
+    /**
+     * Gets or sets the intensity of the iridescence effect.
+     */
+    iridescenceIntensity: number;
+    /**
+     * Gets or sets the intensity of the iridescence effect on the backplate edges.
+     */
+    iridescenceEdgeIntensity: number;
+    /** @internal */
+    _angle: number;
+    /**
+     * Gets or sets the opacity of the backplate (0.0 - 1.0).
+     */
+    fadeOut: number;
+    /** @internal */
+    _reflected: boolean;
+    /** @internal */
+    _frequency: number;
+    /** @internal */
+    _verticalOffset: number;
+    /**
+     * Gets or sets the world-space position of the tip of the left index finger.
+     */
+    globalLeftIndexTipPosition: Vector3;
+    private _globalLeftIndexTipPosition4;
+    /**
+     * Gets or sets the world-space position of the tip of the right index finger.
+     */
+    globalRightIndexTipPosition: Vector3;
+    private _globalRightIndexTipPosition4;
+    constructor(name: string, scene?: Scene);
+    needAlphaBlending(): boolean;
+    needAlphaTesting(): boolean;
+    getAlphaTestTexture(): Nullable<BaseTexture>;
+    isReadyForSubMesh(mesh: AbstractMesh, subMesh: SubMesh): boolean;
+    bindForSubMesh(world: Matrix, mesh: Mesh, subMesh: SubMesh): void;
+    /**
+     * Get the list of animatables in the material.
+     * @returns the list of animatables object used in the material
+     */
+    getAnimatables(): IAnimatable[];
+    dispose(forceDisposeEffect?: boolean): void;
+    clone(name: string): FluentBackplateMaterial;
+    serialize(): any;
+    getClassName(): string;
+    static Parse(source: any, scene: Scene, rootUrl: string): FluentBackplateMaterial;
+}