@configura/babylon-view 2.1.0-alpha.0 → 2.1.0-alpha.2

package/dist/material/CfgMaterial.js

@@ -1,482 +1,482 @@
-import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial.js";
-import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { Color } from "@configura/web-core/dist/cm/basic/Color.js";
-import { GMaterialPBR } from "@configura/web-core/dist/cm/core3D/GMaterialPBR.js";
-import { LogObservable } from "@configura/web-utilities";
-import { hsl2rgb, rgb2hsl, toColor3 } from "../utilities/utilitiesColor.js";
-function findTexture(textures, texture) {
-    var _a;
-    if (texture === undefined) {
-        return undefined;
-    }
-    return (_a = textures.find((gmv) => gmv.gm.type === texture.type)) === null || _a === void 0 ? void 0 : _a.tx;
-}
-// Constants (power of two) used to create the index for the variant
-const DBL = 1;
-const BTF = 2;
-const FLP = 4;
-/**
- * A wrapper around Babylon.js PBRMaterial class.
- *
- * Also contains logic to create light weight "variants" of the main PBRMaterial to take into
- * account that CmSym allows the meshes to have properties that affects the material currently
- * applied to the mesh, such as double doubled sided or flipping the textures along the y-axis.
- *
- * The variants are created on demand if the request to getPBRMaterial specifies properties that
- * does not match the main PBRMaterial. The variants are then cached.
- */
-export class CfgMaterial {
-    constructor(material, maxSimultaneousLights) {
-        this.isTransparent = false;
-        this.logger = new LogObservable();
-        // Side orientation needs to be set, or the materials will be inside-out
-        material.sideOrientation = PBRMaterial.CounterClockWiseSideOrientation;
-        material.maxSimultaneousLights = maxSimultaneousLights;
-        material.allowShaderHotSwapping = true;
-        // Depending on which environment map is used, you might want to disable the radiance over
-        // alpha setting since a very strong light can cause too much of the effect in for example
-        // glass surfaces causing glitch-like effects. You can read more about it here:
-        // https://doc.babylonjs.com/how_to/physically_based_rendering_master
-        material.useRadianceOverAlpha = false;
-        this._material = material;
-        this._variants = new Array(8);
-        this._variants[this.indexFromMaterial(material)] = material;
-    }
-    /** This material is supposed to be rendered as double sided by default. */
-    isDoubleSided() {
-        return !this._material.backFaceCulling;
-    }
-    static makeFromTexture(renderEnvironment, texture, sourcePath) {
-        var _a, _b;
-        sourcePath.push("makeFromTexture");
-        let name = "(Img)";
-        const fileName = (_b = (_a = texture.name) === null || _a === void 0 ? void 0 : _a.split("\\").pop()) === null || _b === void 0 ? void 0 : _b.split("/").pop();
-        if (fileName) {
-            name += " " + fileName;
-        }
-        const material = new PBRMaterial(name, renderEnvironment.scene);
-        material.albedoTexture = texture;
-        material.roughness = 1;
-        material.metallic = 0;
-        // TODO Babylon: What happens if the texture has an alpha map? Compare to Three.js and CET
-        return new this(material, renderEnvironment.lightRig.lightCount);
-    }
-    static makeFromGm(renderEnvironment, meta, gMaterial, textures) {
-        var _a, _b;
-        // Use the materials given name or fallback to the materialKey, if any.
-        const miscName = (_a = gMaterial.misc) === null || _a === void 0 ? void 0 : _a.get("name");
-        const name = typeof miscName == "string" && miscName.length > 0
-            ? miscName
-            : (_b = gMaterial.materialKey) !== null && _b !== void 0 ? _b : "";
-        const { material, transparent, doubleSided } = gMaterial instanceof GMaterialPBR
-            ? this.makeFromGmPBR(renderEnvironment, meta, gMaterial, textures, name)
-            : this.makeFromGmClassic(renderEnvironment, meta, gMaterial, textures, name);
-        makeMaterialDoubleSided(material, doubleSided);
-        const cfgMaterial = new this(material, renderEnvironment.lightRig.lightCount);
-        cfgMaterial.isTransparent = transparent;
-        return cfgMaterial;
-    }
-    static makeFromGmPBR(renderEnvironment, meta, gMaterial, textures, name) {
-        var _a;
-        meta.sourcePath.push("makeFromGmPBR");
-        name = "(PBR) " + name;
-        const { doubleSided, base, emissive, metallic, normal, occlusion, opacity, refraction, roughness, } = gMaterial;
-        const material = new PBRMaterial(name, renderEnvironment.scene);
-        // Specular AA can help a lot with for example edges of very shiny materials, like the
-        // base of our demo chair when the base overlaps / is overlapped by other geometry.
-        material.enableSpecularAntiAliasing = true;
-        material.albedoColor = Color3.White();
-        if (base !== undefined) {
-            // TODO: Double check if the color space used in CmSym is linear or gamma
-            material.albedoColor = toColor3(base.factor).toLinearSpace();
-            const texture = findTexture(textures, base.texture);
-            if (texture !== undefined) {
-                material.albedoTexture = texture;
-            }
-        }
-        if (emissive !== undefined) {
-            material.emissiveColor = toColor3((base === null || base === void 0 ? void 0 : base.factor) || Color.BLACK).toLinearSpace();
-            const texture = findTexture(textures, emissive.texture);
-            if (texture !== undefined) {
-                material.emissiveTexture = texture;
-            }
-        }
-        // Classic defaults to 0.1, but materials should either be 1 (metallic) or 0 (dielectric).
-        // PBR has been defined to use 0.0 by default.
-        material.metallic = 0;
-        if (metallic !== undefined) {
-            material.metallic = metallic.factor;
-            const channel = metallic.channel;
-            if (channel !== undefined) {
-                const texture = findTexture(textures, metallic.texture);
-                if (texture !== undefined) {
-                    material.metallicTexture = texture;
-                    material.useMetallnessFromMetallicTextureBlue = channel === "b"; // false is "r"
-                }
-            }
-        }
-        if (normal !== undefined) {
-            const texture = findTexture(textures, normal.texture);
-            if (texture !== undefined) {
-                texture.level = normal.scale;
-                material.bumpTexture = texture;
-            }
-        }
-        /**
-         * This flag indicates that a material might contain semi or fully transparent pixels and
-         * that alpha blending / testing has been enabled.
-         *
-         * For a PBR material to be considered transparent it must fulfill the following:
-         * 1) An opacity section is defined.
-         * 2) The opacity section must specify a non-opaque blending mode.
-         * 3A) The "factor" must be < 1,
-         * 3B) OR an opacity texture is supplied,
-         * 3C) OR "useAlphaFromBase" is set and an albedo (base) texture exists.
-         */
-        let transparent = false;
-        if ((opacity === null || opacity === void 0 ? void 0 : opacity.mode) === "translucent" ||
-            (opacity === null || opacity === void 0 ? void 0 : opacity.mode) === "mask" ||
-            (opacity === null || opacity === void 0 ? void 0 : opacity.mode) === "translucentAndMask") {
-            material.alpha = opacity.factor;
-            transparent = material.alpha < 1;
-            if (opacity.useAlphaFromBase === true) {
-                if (material.albedoTexture !== null) {
-                    material.albedoTexture.hasAlpha = true; // Or alpha blending won't be enabled
-                    material.useAlphaFromAlbedoTexture = true;
-                    transparent = true;
-                }
-            }
-            else {
-                const texture = findTexture(textures, opacity.texture);
-                if (texture !== undefined) {
-                    material.opacityTexture = texture;
-                    material.opacityTexture.getAlphaFromRGB = opacity.channels === "r";
-                    transparent = true;
-                }
-            }
-            if (transparent) {
-                // Enabling separateCullingPass will first render any back facing triangles, then
-                // any front facing. This type of "back then front" rendering helps with some common
-                // rendering issues for meshes with transparent materials.
-                material.separateCullingPass = true;
-                if (opacity.mode === "mask") {
-                    // Pure mask mode, only do alpha testing and no blending
-                    material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHATEST;
-                    // Masked pixels are either visible or not visible and should be rendered with
-                    // the depth buffer enabled. This solves some alpha blending issues.
-                    material.forceDepthWrite = true;
-                }
-                else {
-                    // "translucent" and "translucentAndMask" are both rendered as "alpha test and
-                    // blend". The proper transparency mode for "translucent" is really "alpha
-                    // blend" but it's not much use to render very, very transparent pixels to the
-                    // frame buffer. Rejecting them early can speed up performance by reducing
-                    // overdraw and can also help with some alpha blending issues.
-                    material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND;
-                }
-                // Since we use alpha testing in all three modes above, make sure it is turned on.
-                // WARNING: Babylon.js (at least 4.1.0) will not do pure alpha testing without this.
-                material.forceAlphaTest = true;
-                material.alphaCutOff =
-                    opacity.mode === "translucent" ? 0.01 : opacity.maskThreshold;
-            }
-        }
-        if (occlusion !== undefined) {
-            material.ambientTextureStrength = occlusion.strength;
-            const channel = occlusion.channel;
-            const texture = occlusion.texture;
-            if (channel !== undefined && texture !== undefined) {
-                // Use useAmbientOcclusionFromMetallicTextureRed if using a linked ORM texture
-                material.useAmbientInGrayScale = channel === "r"; // false means alpha ("a")
-                const texture = findTexture(textures, occlusion.texture);
-                if (texture !== undefined) {
-                    material.ambientTexture = texture;
-                }
-            }
-        }
-        if (refraction !== undefined) {
-            // TODO: Double check that this is defined the same as CET and not the inverse.
-            // For example, use a sphere with ior >= 1.5 and check to see if it turns the
-            // background up-side-down.
-            material.subSurface.refractionIntensity = 1.0;
-            if (refraction.ior !== undefined) {
-                material.subSurface.indexOfRefraction = refraction.ior;
-            }
-            // Hack, see KNOWN ISSUE below.
-            material.subSurface.isRefractionEnabled = transparent;
-            // By default the refraction intensity is 1.0 which means that the refraction fully
-            // fully takes over the color of the material, which is not what we want. Setting it to
-            // 0.5 for now which looks like a good compromise to bring base color back and at the
-            // same time show the refraction.
-            material.subSurface.refractionIntensity = 0.5;
-            /* KNOWN ISSUE
-             *
-             * Enabling refraction on the white test materials will make them very dark. You can
-             * adjust that by enabling subSurface.linkRefractionWithTransparency, but then the
-             * material gets quite dark when it is very transparent. Using a lower
-             * refractionIntensity above works around that somewhat.
-             *
-             * It is not yet known what the "correct" way is to do this, and unfortunately glTF 2.0
-             * does not support refraction (without an extension) so we don't have a good reference
-             * to lean on.
-             *
-             * More work is needed here comparing Babylon, RedSDK (CET) and perhaps Blender.
-             * Reading up more on the maths behind refraction and PBR could also be good.
-             *
-             * Note: Predicating subSurface.isRefractionEnabled on say transparent (which we do
-             * above) is NOT correct since the IOR setting affects non-transparent materials in
-             * RedSDK. And in any case, transparency is really per-pixel, not per material.
-             */
-        }
-        // Classic uses a default roughness value of 0.9. PBR is defined to use 0.5
-        // NOTE: The roughness code below needs to run AFTER metallic due to dependencies.
-        material.roughness = 0.5;
-        if (roughness !== undefined) {
-            material.roughness = roughness.factor;
-            const channel = roughness.channel;
-            const texture = findTexture(textures, roughness.texture);
-            if (channel !== undefined && texture !== undefined) {
-                material.useRoughnessFromMetallicTextureGreen = channel === "g";
-                material.useRoughnessFromMetallicTextureAlpha = channel === "a";
-                // KNOWN ISSUE
-                // Babylon.js (as well as glTF) only supports a single texture for both metallness
-                // and roughness. See comments in GMaterialPBR.ts Give priority to metallic texture.
-                material.metallicTexture = (_a = material.metallicTexture) !== null && _a !== void 0 ? _a : texture;
-            }
-        }
-        return { material, transparent, doubleSided };
-    }
-    static makeFromGmClassic(renderEnvironment, meta, gMaterial, textures, name) {
-        meta.sourcePath.push("makeFromGmClassic");
-        name = "(GM) " + name;
-        const { doubleSided, redCustomProperties: redEngineCustomProperties, reflection, bump, diffuse, specular, transparency, } = gMaterial;
-        const bumpTexture = findTexture(textures, bump);
-        const diffuseTexture = findTexture(textures, diffuse);
-        const transparencyTexture = findTexture(textures, transparency);
-        const material = new PBRMaterial(name, renderEnvironment.scene);
-        // Specular AA can help a lot with for example edges of very shiny materials, like the
-        // base of our demo chair when the base overlaps / is overlapped by other geometry.
-        material.enableSpecularAntiAliasing = true;
-        if (bump !== undefined && bumpTexture !== undefined) {
-            material.bumpTexture = bumpTexture;
-            // Bump the bump strength slightly to visually better match the render results in CET.
-            bumpTexture.level = 1.2;
-        }
-        if (diffuse !== undefined) {
-            if (diffuseTexture !== undefined) {
-                diffuseTexture.hasAlpha = false;
-                material.albedoTexture = diffuseTexture;
-            }
-            else {
-                // From CmSym spec: "If an image url is specified it overrides the color."
-                material.albedoColor = toColor3(diffuse.c || Color.BLACK).toLinearSpace();
-            }
-        }
-        let transparent = false;
-        if (transparency !== undefined) {
-            if (transparency.opacity) {
-                if (transparency.opacity < 1) {
-                    material.alpha = transparency.opacity;
-                    transparent = true;
-                }
-            }
-            if (transparencyTexture) {
-                material.opacityTexture = transparencyTexture;
-                transparent = true;
-            }
-        }
-        if (transparent) {
-            // This is a tradeoff. Most 3D engines will by default render with depth write off for
-            // alpha blended materials, but keep it on for alpha tested materials. We don't have
-            // such a distinction, yet.
-            //
-            // For products like the forklift, it is much better with no depth write.
-            // On the flip side, without it, the plants and other similar meshes look like crap.
-            material.forceDepthWrite = true;
-            // Default to alpha blend + alpha test
-            material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND;
-            // Do not draw very, very transparent pixels since forceDepthWrite is enabled
-            material.alphaCutOff = 0.05;
-            // Transparent materials usually needs "back then front" rendering.
-            material.separateCullingPass = true;
-        }
-        /*
-         * In Babylon.js (and previous Three.js) we use PBR (physically based rendering) and
-         * use the metalness-roughness way to describe the reflective properties of the materials.
-         * Here is good overview: https://threejs.org/examples/?q=var#webgl_materials_variations_standard
-         *
-         * Specular amount => reduced specular => reduce metalness
-         * Specular area / exponent => reduced exponent => reduce roughness
-         * Specular exponent => 0.01 = 10000 and 1 = 0 see gmEditor.cm for more details.
-         *
-         * Reflection amount => reduced amount => reduced metalness
-         * Reflection sharpness => reduced sharpness => increase roughness
-         * In cmsym sharpness is saved as a customProperty with the name reflectionGlossiness
-         *
-         * In our conversion we weigh specular and reflection from cmsym together
-         * if they are both defined, otherwise we convert them by them self.
-         */
-        let specularContribution;
-        if (specular !== undefined && specular.exponent !== undefined) {
-            const spec = toColor3(specular.c);
-            const [, , specularColorLightness] = rgb2hsl(spec.r, spec.g, spec.b);
-            specularContribution =
-                Math.sqrt(1 / (specular.exponent + 1)) +
-                    1 -
-                    specular.amount * specularColorLightness;
-        }
-        let reflectionSharpness;
-        if (redEngineCustomProperties !== undefined) {
-            const reflectionGlossiness = redEngineCustomProperties.get("reflectionGlossiness");
-            if (reflectionGlossiness && typeof reflectionGlossiness === "number") {
-                reflectionSharpness = 1 - reflectionGlossiness;
-            }
-        }
-        if (specularContribution !== undefined) {
-            if (reflectionSharpness !== undefined) {
-                material.roughness = (reflectionSharpness + specularContribution) / 2;
-            }
-            else {
-                material.roughness = specularContribution;
-            }
-        }
-        else {
-            material.roughness = 0.9; // We default to non-reflective material to better match CET
-        }
-        material.metallic = 0.1; // We default to non-reflective material to better match CET
-        if (reflection !== undefined && reflection.amount !== undefined) {
-            const reflectionAmount = reflection.amount;
-            material.metallic = reflectionAmount;
-            // Since the Red Engine in CET needs the sum of reflectiveness and color to be max 1
-            // very reflective materials will have a color close to black. Babylon.js needs very
-            // reflective materials to have a very light color. See WRD-119 in Jira.
-            if (diffuseTexture === undefined && material.roughness < reflectionAmount - 0.3) {
-                // PBR material albedo color is in linear color space. The conversion to gamma
-                // (normal, sRGB) color space is done to work exactly the same as the previous
-                // Three.js version of the code. That said, if "reflectionAmount" is in a
-                // linear space, then perhaps it is more correct without it...
-                const color = material.albedoColor.toGammaSpace();
-                const [h, s, l] = rgb2hsl(color.r, color.g, color.b);
-                if (l < reflectionAmount) {
-                    material.albedoColor = Color3.FromArray(hsl2rgb(h, s, reflectionAmount)).toLinearSpace();
-                }
-            }
-        }
-        return { material, transparent, doubleSided };
-    }
-    indexFromOptions(doubleSided, backThenFront, flipTextures) {
-        return (doubleSided ? DBL : 0) + (backThenFront ? BTF : 0) + (flipTextures ? FLP : 0);
-    }
-    indexFromMaterial(material) {
-        // Materials are never flipped by default, so the flipTextures (FLP) flag is always zero
-        return (material.backFaceCulling ? 0 : DBL) + (material.separateCullingPass ? BTF : 0);
-    }
-    cloneSuffix(doubleSided, backThenFront, flipTextures) {
-        return ` (clone${doubleSided ? ",dbl" : ""}${backThenFront ? ",btf" : ""}${flipTextures ? ",flp" : ""});`;
-    }
-    /**
-     * Returns the PBRMaterial associated with this CfgMaterial, optionally modified.
-     *
-     * If none of the optional parameters are set, the returned material is the one initially
-     * supplied when the CfgMaterial was created.
-     *
-     * If any of the optional parameters are supplied, you will get back a material that has those
-     * options set to the given values. The returned material will be a clone if needed, the
-     * initial material is NOT affected by this.
-     *
-     * It is safe to call this method multiple times, this class keeps an internal material cache.
-     *
-     * @warning: Do not modify the returned material in any way since it might be shared with
-     * other parts of the model!
-     *
-     * @param doubleSided Makes sure that backFaceCulling is OFF in the returned material.
-     * @param backThenFront Makes sure that separateCullingPass is ON in the returned material.
-     * @param flipTextures Flips the textures in the material along the Y-axis.
-     */
-    getPBRMaterial(doubleSided, backThenFront, flipTextures) {
-        if (doubleSided === undefined) {
-            doubleSided = !this._material.backFaceCulling;
-        }
-        if (backThenFront === undefined) {
-            backThenFront = this._material.separateCullingPass;
-        }
-        if (flipTextures === undefined) {
-            // Materials are never flipped by default.
-            flipTextures = false;
-        }
-        const index = this.indexFromOptions(doubleSided, backThenFront, flipTextures);
-        if (this._variants[index] !== undefined) {
-            return this._variants[index];
-        }
-        const clone = this._material.clone(this._material.name + this.cloneSuffix(doubleSided, backThenFront, flipTextures));
-        clone.separateCullingPass = backThenFront;
-        makeMaterialDoubleSided(clone, doubleSided);
-        if (flipTextures) {
-            flipMaterialTextures(clone);
-        }
-        this._variants[index] = clone;
-        return clone;
-    }
-}
-/**
- * The exact changes this method makes depends on the material's separateCullingPass setting, so
- * make sure make any changes to that property before calling this method.
- */
-export function makeMaterialDoubleSided(material, doubleSided) {
-    if (doubleSided) {
-        // SeparateCullingPass breaks twoSidedLightning by not flipping the normals when
-        // rendering the back faces of the triangles. forceNormalForward works around that
-        // but is a bit slower due to more complex shader calculations so only use when needed.
-        material.backFaceCulling = false;
-        material.twoSidedLighting = !material.separateCullingPass;
-        material.forceNormalForward = material.separateCullingPass;
-    }
-    else {
-        material.backFaceCulling = true; // Don't render backside of triangles
-        material.twoSidedLighting = false; // Don't flip normals on back face of triangles
-        material.forceNormalForward = false; // Don't change the normals to front facing
-    }
-}
-/**
- * Clones all the textures used in the material and flips them along the y-axis by inverting the
- * texture's vScale, vOffset and wRotation.
- *
- * @note: The flipped state is not stored in the material it self, so calling this method twice on
- * the same material will undo the flip.
- */
-function flipMaterialTextures(material) {
-    material.albedoTexture = cloneAndFlipTexture(material.albedoTexture);
-    material.bumpTexture = cloneAndFlipTexture(material.bumpTexture);
-    material.ambientTexture = cloneAndFlipTexture(material.ambientTexture);
-    material.opacityTexture = cloneAndFlipTexture(material.opacityTexture);
-    material.emissiveTexture = cloneAndFlipTexture(material.emissiveTexture);
-    material.metallicTexture = cloneAndFlipTexture(material.metallicTexture);
-    material.lightmapTexture = cloneAndFlipTexture(material.lightmapTexture);
-    if (material.refractionTexture !== null) {
-        // The refraction texture is a bit special since it is a getter/setter with side effects.
-        // As of this writing (Babylon 4.1.0), the only side effect is to change the value of
-        // isRefractionEnabled so we save and reapply the value after the flip.
-        const enabled = material.subSurface.isRefractionEnabled;
-        material.refractionTexture = cloneAndFlipTexture(material.refractionTexture);
-        material.subSurface.isRefractionEnabled = enabled;
-    }
-    material.reflectivityTexture = cloneAndFlipTexture(material.reflectivityTexture);
-    material.microSurfaceTexture = cloneAndFlipTexture(material.microSurfaceTexture);
-}
-/**
- * Returns undefined if texture is undefined.
- * Returns original texture if it isn't of type "Texture".
- * Otherwise, Clones and flips the texture along the y-axis by inverting vScale, vOffset and wAng.
- */
-function cloneAndFlipTexture(texture) {
-    if (texture instanceof Texture) {
-        texture = texture.clone();
-        if (texture instanceof Texture) {
-            texture.vScale *= -1; // Flips along y-axis
-            texture.vOffset *= -1; // Adjust texture offset due to flip
-            texture.wAng *= -1; // Adjust rotation direction due to the flip
-        }
-    }
-    return texture;
-}
+import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial.js";
+import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { Color } from "@configura/web-core/dist/cm/basic/Color.js";
+import { GMaterialPBR } from "@configura/web-core/dist/cm/core3D/GMaterialPBR.js";
+import { LogObservable } from "@configura/web-utilities";
+import { hsl2rgb, rgb2hsl, toColor3 } from "../utilities/utilitiesColor.js";
+function findTexture(textures, texture) {
+    var _a;
+    if (texture === undefined) {
+        return undefined;
+    }
+    return (_a = textures.find((gmv) => gmv.gm.type === texture.type)) === null || _a === void 0 ? void 0 : _a.tx;
+}
+// Constants (power of two) used to create the index for the variant
+const DBL = 1;
+const BTF = 2;
+const FLP = 4;
+/**
+ * A wrapper around Babylon.js PBRMaterial class.
+ *
+ * Also contains logic to create light weight "variants" of the main PBRMaterial to take into
+ * account that CmSym allows the meshes to have properties that affects the material currently
+ * applied to the mesh, such as double doubled sided or flipping the textures along the y-axis.
+ *
+ * The variants are created on demand if the request to getPBRMaterial specifies properties that
+ * does not match the main PBRMaterial. The variants are then cached.
+ */
+export class CfgMaterial {
+    constructor(material, maxSimultaneousLights) {
+        this.isTransparent = false;
+        this.logger = new LogObservable();
+        // Side orientation needs to be set, or the materials will be inside-out
+        material.sideOrientation = PBRMaterial.CounterClockWiseSideOrientation;
+        material.maxSimultaneousLights = maxSimultaneousLights;
+        material.allowShaderHotSwapping = true;
+        // Depending on which environment map is used, you might want to disable the radiance over
+        // alpha setting since a very strong light can cause too much of the effect in for example
+        // glass surfaces causing glitch-like effects. You can read more about it here:
+        // https://doc.babylonjs.com/how_to/physically_based_rendering_master
+        material.useRadianceOverAlpha = false;
+        this._material = material;
+        this._variants = new Array(8);
+        this._variants[this.indexFromMaterial(material)] = material;
+    }
+    /** This material is supposed to be rendered as double sided by default. */
+    isDoubleSided() {
+        return !this._material.backFaceCulling;
+    }
+    static makeFromTexture(renderEnvironment, texture, sourcePath) {
+        var _a, _b;
+        sourcePath.push("makeFromTexture");
+        let name = "(Img)";
+        const fileName = (_b = (_a = texture.name) === null || _a === void 0 ? void 0 : _a.split("\\").pop()) === null || _b === void 0 ? void 0 : _b.split("/").pop();
+        if (fileName) {
+            name += " " + fileName;
+        }
+        const material = new PBRMaterial(name, renderEnvironment.scene);
+        material.albedoTexture = texture;
+        material.roughness = 1;
+        material.metallic = 0;
+        // TODO Babylon: What happens if the texture has an alpha map? Compare to Three.js and CET
+        return new this(material, renderEnvironment.lightRig.lightCount);
+    }
+    static makeFromGm(renderEnvironment, meta, gMaterial, textures) {
+        var _a, _b;
+        // Use the materials given name or fallback to the materialKey, if any.
+        const miscName = (_a = gMaterial.misc) === null || _a === void 0 ? void 0 : _a.get("name");
+        const name = typeof miscName == "string" && miscName.length > 0
+            ? miscName
+            : (_b = gMaterial.materialKey) !== null && _b !== void 0 ? _b : "";
+        const { material, transparent, doubleSided } = gMaterial instanceof GMaterialPBR
+            ? this.makeFromGmPBR(renderEnvironment, meta, gMaterial, textures, name)
+            : this.makeFromGmClassic(renderEnvironment, meta, gMaterial, textures, name);
+        makeMaterialDoubleSided(material, doubleSided);
+        const cfgMaterial = new this(material, renderEnvironment.lightRig.lightCount);
+        cfgMaterial.isTransparent = transparent;
+        return cfgMaterial;
+    }
+    static makeFromGmPBR(renderEnvironment, meta, gMaterial, textures, name) {
+        var _a;
+        meta.sourcePath.push("makeFromGmPBR");
+        name = "(PBR) " + name;
+        const { doubleSided, base, emissive, metallic, normal, occlusion, opacity, refraction, roughness, } = gMaterial;
+        const material = new PBRMaterial(name, renderEnvironment.scene);
+        // Specular AA can help a lot with for example edges of very shiny materials, like the
+        // base of our demo chair when the base overlaps / is overlapped by other geometry.
+        material.enableSpecularAntiAliasing = true;
+        material.albedoColor = Color3.White();
+        if (base !== undefined) {
+            // TODO: Double check if the color space used in CmSym is linear or gamma
+            material.albedoColor = toColor3(base.factor).toLinearSpace();
+            const texture = findTexture(textures, base.texture);
+            if (texture !== undefined) {
+                material.albedoTexture = texture;
+            }
+        }
+        if (emissive !== undefined) {
+            material.emissiveColor = toColor3((base === null || base === void 0 ? void 0 : base.factor) || Color.BLACK).toLinearSpace();
+            const texture = findTexture(textures, emissive.texture);
+            if (texture !== undefined) {
+                material.emissiveTexture = texture;
+            }
+        }
+        // Classic defaults to 0.1, but materials should either be 1 (metallic) or 0 (dielectric).
+        // PBR has been defined to use 0.0 by default.
+        material.metallic = 0;
+        if (metallic !== undefined) {
+            material.metallic = metallic.factor;
+            const channel = metallic.channel;
+            if (channel !== undefined) {
+                const texture = findTexture(textures, metallic.texture);
+                if (texture !== undefined) {
+                    material.metallicTexture = texture;
+                    material.useMetallnessFromMetallicTextureBlue = channel === "b"; // false is "r"
+                }
+            }
+        }
+        if (normal !== undefined) {
+            const texture = findTexture(textures, normal.texture);
+            if (texture !== undefined) {
+                texture.level = normal.scale;
+                material.bumpTexture = texture;
+            }
+        }
+        /**
+         * This flag indicates that a material might contain semi or fully transparent pixels and
+         * that alpha blending / testing has been enabled.
+         *
+         * For a PBR material to be considered transparent it must fulfill the following:
+         * 1) An opacity section is defined.
+         * 2) The opacity section must specify a non-opaque blending mode.
+         * 3A) The "factor" must be < 1,
+         * 3B) OR an opacity texture is supplied,
+         * 3C) OR "useAlphaFromBase" is set and an albedo (base) texture exists.
+         */
+        let transparent = false;
+        if ((opacity === null || opacity === void 0 ? void 0 : opacity.mode) === "translucent" ||
+            (opacity === null || opacity === void 0 ? void 0 : opacity.mode) === "mask" ||
+            (opacity === null || opacity === void 0 ? void 0 : opacity.mode) === "translucentAndMask") {
+            material.alpha = opacity.factor;
+            transparent = material.alpha < 1;
+            if (opacity.useAlphaFromBase === true) {
+                if (material.albedoTexture !== null) {
+                    material.albedoTexture.hasAlpha = true; // Or alpha blending won't be enabled
+                    material.useAlphaFromAlbedoTexture = true;
+                    transparent = true;
+                }
+            }
+            else {
+                const texture = findTexture(textures, opacity.texture);
+                if (texture !== undefined) {
+                    material.opacityTexture = texture;
+                    material.opacityTexture.getAlphaFromRGB = opacity.channels === "r";
+                    transparent = true;
+                }
+            }
+            if (transparent) {
+                // Enabling separateCullingPass will first render any back facing triangles, then
+                // any front facing. This type of "back then front" rendering helps with some common
+                // rendering issues for meshes with transparent materials.
+                material.separateCullingPass = true;
+                if (opacity.mode === "mask") {
+                    // Pure mask mode, only do alpha testing and no blending
+                    material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHATEST;
+                    // Masked pixels are either visible or not visible and should be rendered with
+                    // the depth buffer enabled. This solves some alpha blending issues.
+                    material.forceDepthWrite = true;
+                }
+                else {
+                    // "translucent" and "translucentAndMask" are both rendered as "alpha test and
+                    // blend". The proper transparency mode for "translucent" is really "alpha
+                    // blend" but it's not much use to render very, very transparent pixels to the
+                    // frame buffer. Rejecting them early can speed up performance by reducing
+                    // overdraw and can also help with some alpha blending issues.
+                    material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND;
+                }
+                // Since we use alpha testing in all three modes above, make sure it is turned on.
+                // WARNING: Babylon.js (at least 4.1.0) will not do pure alpha testing without this.
+                material.forceAlphaTest = true;
+                material.alphaCutOff =
+                    opacity.mode === "translucent" ? 0.01 : opacity.maskThreshold;
+            }
+        }
+        if (occlusion !== undefined) {
+            material.ambientTextureStrength = occlusion.strength;
+            const channel = occlusion.channel;
+            const texture = occlusion.texture;
+            if (channel !== undefined && texture !== undefined) {
+                // Use useAmbientOcclusionFromMetallicTextureRed if using a linked ORM texture
+                material.useAmbientInGrayScale = channel === "r"; // false means alpha ("a")
+                const texture = findTexture(textures, occlusion.texture);
+                if (texture !== undefined) {
+                    material.ambientTexture = texture;
+                }
+            }
+        }
+        if (refraction !== undefined) {
+            // TODO: Double check that this is defined the same as CET and not the inverse.
+            // For example, use a sphere with ior >= 1.5 and check to see if it turns the
+            // background up-side-down.
+            material.subSurface.refractionIntensity = 1.0;
+            if (refraction.ior !== undefined) {
+                material.subSurface.indexOfRefraction = refraction.ior;
+            }
+            // Hack, see KNOWN ISSUE below.
+            material.subSurface.isRefractionEnabled = transparent;
+            // By default the refraction intensity is 1.0 which means that the refraction fully
+            // fully takes over the color of the material, which is not what we want. Setting it to
+            // 0.5 for now which looks like a good compromise to bring base color back and at the
+            // same time show the refraction.
+            material.subSurface.refractionIntensity = 0.5;
+            /* KNOWN ISSUE
+             *
+             * Enabling refraction on the white test materials will make them very dark. You can
+             * adjust that by enabling subSurface.linkRefractionWithTransparency, but then the
+             * material gets quite dark when it is very transparent. Using a lower
+             * refractionIntensity above works around that somewhat.
+             *
+             * It is not yet known what the "correct" way is to do this, and unfortunately glTF 2.0
+             * does not support refraction (without an extension) so we don't have a good reference
+             * to lean on.
+             *
+             * More work is needed here comparing Babylon, RedSDK (CET) and perhaps Blender.
+             * Reading up more on the maths behind refraction and PBR could also be good.
+             *
+             * Note: Predicating subSurface.isRefractionEnabled on say transparent (which we do
+             * above) is NOT correct since the IOR setting affects non-transparent materials in
+             * RedSDK. And in any case, transparency is really per-pixel, not per material.
+             */
+        }
+        // Classic uses a default roughness value of 0.9. PBR is defined to use 0.5
+        // NOTE: The roughness code below needs to run AFTER metallic due to dependencies.
+        material.roughness = 0.5;
+        if (roughness !== undefined) {
+            material.roughness = roughness.factor;
+            const channel = roughness.channel;
+            const texture = findTexture(textures, roughness.texture);
+            if (channel !== undefined && texture !== undefined) {
+                material.useRoughnessFromMetallicTextureGreen = channel === "g";
+                material.useRoughnessFromMetallicTextureAlpha = channel === "a";
+                // KNOWN ISSUE
+                // Babylon.js (as well as glTF) only supports a single texture for both metallness
+                // and roughness. See comments in GMaterialPBR.ts Give priority to metallic texture.
+                material.metallicTexture = (_a = material.metallicTexture) !== null && _a !== void 0 ? _a : texture;
+            }
+        }
+        return { material, transparent, doubleSided };
+    }
+    static makeFromGmClassic(renderEnvironment, meta, gMaterial, textures, name) {
+        meta.sourcePath.push("makeFromGmClassic");
+        name = "(GM) " + name;
+        const { doubleSided, redCustomProperties: redEngineCustomProperties, reflection, bump, diffuse, specular, transparency, } = gMaterial;
+        const bumpTexture = findTexture(textures, bump);
+        const diffuseTexture = findTexture(textures, diffuse);
+        const transparencyTexture = findTexture(textures, transparency);
+        const material = new PBRMaterial(name, renderEnvironment.scene);
+        // Specular AA can help a lot with for example edges of very shiny materials, like the
+        // base of our demo chair when the base overlaps / is overlapped by other geometry.
+        material.enableSpecularAntiAliasing = true;
+        if (bump !== undefined && bumpTexture !== undefined) {
+            material.bumpTexture = bumpTexture;
+            // Bump the bump strength slightly to visually better match the render results in CET.
+            bumpTexture.level = 1.2;
+        }
+        if (diffuse !== undefined) {
+            if (diffuseTexture !== undefined) {
+                diffuseTexture.hasAlpha = false;
+                material.albedoTexture = diffuseTexture;
+            }
+            else {
+                // From CmSym spec: "If an image url is specified it overrides the color."
+                material.albedoColor = toColor3(diffuse.c || Color.BLACK).toLinearSpace();
+            }
+        }
+        let transparent = false;
+        if (transparency !== undefined) {
+            if (transparency.opacity) {
+                if (transparency.opacity < 1) {
+                    material.alpha = transparency.opacity;
+                    transparent = true;
+                }
+            }
+            if (transparencyTexture) {
+                material.opacityTexture = transparencyTexture;
+                transparent = true;
+            }
+        }
+        if (transparent) {
+            // This is a tradeoff. Most 3D engines will by default render with depth write off for
+            // alpha blended materials, but keep it on for alpha tested materials. We don't have
+            // such a distinction, yet.
+            //
+            // For products like the forklift, it is much better with no depth write.
+            // On the flip side, without it, the plants and other similar meshes look like crap.
+            material.forceDepthWrite = true;
+            // Default to alpha blend + alpha test
+            material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND;
+            // Do not draw very, very transparent pixels since forceDepthWrite is enabled
+            material.alphaCutOff = 0.05;
+            // Transparent materials usually needs "back then front" rendering.
+            material.separateCullingPass = true;
+        }
+        /*
+         * In Babylon.js (and previous Three.js) we use PBR (physically based rendering) and
+         * use the metalness-roughness way to describe the reflective properties of the materials.
+         * Here is good overview: https://threejs.org/examples/?q=var#webgl_materials_variations_standard
+         *
+         * Specular amount => reduced specular => reduce metalness
+         * Specular area / exponent => reduced exponent => reduce roughness
+         * Specular exponent => 0.01 = 10000 and 1 = 0 see gmEditor.cm for more details.
+         *
+         * Reflection amount => reduced amount => reduced metalness
+         * Reflection sharpness => reduced sharpness => increase roughness
+         * In cmsym sharpness is saved as a customProperty with the name reflectionGlossiness
+         *
+         * In our conversion we weigh specular and reflection from cmsym together
+         * if they are both defined, otherwise we convert them by them self.
+         */
+        let specularContribution;
+        if (specular !== undefined && specular.exponent !== undefined) {
+            const spec = toColor3(specular.c);
+            const [, , specularColorLightness] = rgb2hsl(spec.r, spec.g, spec.b);
+            specularContribution =
+                Math.sqrt(1 / (specular.exponent + 1)) +
+                    1 -
+                    specular.amount * specularColorLightness;
+        }
+        let reflectionSharpness;
+        if (redEngineCustomProperties !== undefined) {
+            const reflectionGlossiness = redEngineCustomProperties.get("reflectionGlossiness");
+            if (reflectionGlossiness && typeof reflectionGlossiness === "number") {
+                reflectionSharpness = 1 - reflectionGlossiness;
+            }
+        }
+        if (specularContribution !== undefined) {
+            if (reflectionSharpness !== undefined) {
+                material.roughness = (reflectionSharpness + specularContribution) / 2;
+            }
+            else {
+                material.roughness = specularContribution;
+            }
+        }
+        else {
+            material.roughness = 0.9; // We default to non-reflective material to better match CET
+        }
+        material.metallic = 0.1; // We default to non-reflective material to better match CET
+        if (reflection !== undefined && reflection.amount !== undefined) {
+            const reflectionAmount = reflection.amount;
+            material.metallic = reflectionAmount;
+            // Since the Red Engine in CET needs the sum of reflectiveness and color to be max 1
+            // very reflective materials will have a color close to black. Babylon.js needs very
+            // reflective materials to have a very light color. See WRD-119 in Jira.
+            if (diffuseTexture === undefined && material.roughness < reflectionAmount - 0.3) {
+                // PBR material albedo color is in linear color space. The conversion to gamma
+                // (normal, sRGB) color space is done to work exactly the same as the previous
+                // Three.js version of the code. That said, if "reflectionAmount" is in a
+                // linear space, then perhaps it is more correct without it...
+                const color = material.albedoColor.toGammaSpace();
+                const [h, s, l] = rgb2hsl(color.r, color.g, color.b);
+                if (l < reflectionAmount) {
+                    material.albedoColor = Color3.FromArray(hsl2rgb(h, s, reflectionAmount)).toLinearSpace();
+                }
+            }
+        }
+        return { material, transparent, doubleSided };
+    }
+    indexFromOptions(doubleSided, backThenFront, flipTextures) {
+        return (doubleSided ? DBL : 0) + (backThenFront ? BTF : 0) + (flipTextures ? FLP : 0);
+    }
+    indexFromMaterial(material) {
+        // Materials are never flipped by default, so the flipTextures (FLP) flag is always zero
+        return (material.backFaceCulling ? 0 : DBL) + (material.separateCullingPass ? BTF : 0);
+    }
+    cloneSuffix(doubleSided, backThenFront, flipTextures) {
+        return ` (clone${doubleSided ? ",dbl" : ""}${backThenFront ? ",btf" : ""}${flipTextures ? ",flp" : ""});`;
+    }
+    /**
+     * Returns the PBRMaterial associated with this CfgMaterial, optionally modified.
+     *
+     * If none of the optional parameters are set, the returned material is the one initially
+     * supplied when the CfgMaterial was created.
+     *
+     * If any of the optional parameters are supplied, you will get back a material that has those
+     * options set to the given values. The returned material will be a clone if needed, the
+     * initial material is NOT affected by this.
+     *
+     * It is safe to call this method multiple times, this class keeps an internal material cache.
+     *
+     * @warning: Do not modify the returned material in any way since it might be shared with
+     * other parts of the model!
+     *
+     * @param doubleSided Makes sure that backFaceCulling is OFF in the returned material.
+     * @param backThenFront Makes sure that separateCullingPass is ON in the returned material.
+     * @param flipTextures Flips the textures in the material along the Y-axis.
+     */
+    getPBRMaterial(doubleSided, backThenFront, flipTextures) {
+        if (doubleSided === undefined) {
+            doubleSided = !this._material.backFaceCulling;
+        }
+        if (backThenFront === undefined) {
+            backThenFront = this._material.separateCullingPass;
+        }
+        if (flipTextures === undefined) {
+            // Materials are never flipped by default.
+            flipTextures = false;
+        }
+        const index = this.indexFromOptions(doubleSided, backThenFront, flipTextures);
+        if (this._variants[index] !== undefined) {
+            return this._variants[index];
+        }
+        const clone = this._material.clone(this._material.name + this.cloneSuffix(doubleSided, backThenFront, flipTextures));
+        clone.separateCullingPass = backThenFront;
+        makeMaterialDoubleSided(clone, doubleSided);
+        if (flipTextures) {
+            flipMaterialTextures(clone);
+        }
+        this._variants[index] = clone;
+        return clone;
+    }
+}
+/**
+ * The exact changes this method makes depends on the material's separateCullingPass setting, so
+ * make sure make any changes to that property before calling this method.
+ */
+export function makeMaterialDoubleSided(material, doubleSided) {
+    if (doubleSided) {
+        // SeparateCullingPass breaks twoSidedLightning by not flipping the normals when
+        // rendering the back faces of the triangles. forceNormalForward works around that
+        // but is a bit slower due to more complex shader calculations so only use when needed.
+        material.backFaceCulling = false;
+        material.twoSidedLighting = !material.separateCullingPass;
+        material.forceNormalForward = material.separateCullingPass;
+    }
+    else {
+        material.backFaceCulling = true; // Don't render backside of triangles
+        material.twoSidedLighting = false; // Don't flip normals on back face of triangles
+        material.forceNormalForward = false; // Don't change the normals to front facing
+    }
+}
+/**
+ * Clones all the textures used in the material and flips them along the y-axis by inverting the
+ * texture's vScale, vOffset and wRotation.
+ *
+ * @note: The flipped state is not stored in the material it self, so calling this method twice on
+ * the same material will undo the flip.
+ */
+function flipMaterialTextures(material) {
+    material.albedoTexture = cloneAndFlipTexture(material.albedoTexture);
+    material.bumpTexture = cloneAndFlipTexture(material.bumpTexture);
+    material.ambientTexture = cloneAndFlipTexture(material.ambientTexture);
+    material.opacityTexture = cloneAndFlipTexture(material.opacityTexture);
+    material.emissiveTexture = cloneAndFlipTexture(material.emissiveTexture);
+    material.metallicTexture = cloneAndFlipTexture(material.metallicTexture);
+    material.lightmapTexture = cloneAndFlipTexture(material.lightmapTexture);
+    if (material.refractionTexture !== null) {
+        // The refraction texture is a bit special since it is a getter/setter with side effects.
+        // As of this writing (Babylon 4.1.0), the only side effect is to change the value of
+        // isRefractionEnabled so we save and reapply the value after the flip.
+        const enabled = material.subSurface.isRefractionEnabled;
+        material.refractionTexture = cloneAndFlipTexture(material.refractionTexture);
+        material.subSurface.isRefractionEnabled = enabled;
+    }
+    material.reflectivityTexture = cloneAndFlipTexture(material.reflectivityTexture);
+    material.microSurfaceTexture = cloneAndFlipTexture(material.microSurfaceTexture);
+}
+/**
+ * Returns undefined if texture is undefined.
+ * Returns original texture if it isn't of type "Texture".
+ * Otherwise, Clones and flips the texture along the y-axis by inverting vScale, vOffset and wAng.
+ */
+function cloneAndFlipTexture(texture) {
+    if (texture instanceof Texture) {
+        texture = texture.clone();
+        if (texture instanceof Texture) {
+            texture.vScale *= -1; // Flips along y-axis
+            texture.vOffset *= -1; // Adjust texture offset due to flip
+            texture.wAng *= -1; // Adjust rotation direction due to the flip
+        }
+    }
+    return texture;
+}