@configura/babylon-view 1.4.0-alpha.4 → 1.5.0

package/dist/material/texture.js

@@ -1,306 +1,306 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
-import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
-import { GMaterial3DTexture, } from "@configura/web-core/dist/cm/core3D/GMaterial3D.js";
-import { Bump3D, GMaterialClassic } from "@configura/web-core/dist/cm/core3D/GMaterialClassic.js";
-import { GMaterialPBR } from "@configura/web-core/dist/cm/core3D/GMaterialPBR.js";
-import { CMMIPS_MIMETYPE, extractCmMips, getFileExtension, loadImage, LogObservable, } from "@configura/web-utilities";
-function getImageMimeType(fileExtension) {
-    switch (fileExtension.toLowerCase()) {
-        case "jpg":
-        case "jpeg":
-            return "image/jpeg";
-        case "png":
-            return "image/png";
-        case "bmp":
-            return "image/bmp";
-        case "cmmips":
-            return CMMIPS_MIMETYPE;
-        default:
-            throw Error("unrecognized file extension: " + fileExtension);
-    }
-}
-function symWrapToBabylonWrap(logger, wrap) {
-    switch (wrap) {
-        case 3 /* clampToEdge */:
-            return Texture.CLAMP_ADDRESSMODE;
-        case 0 /* repeat */:
-            return Texture.WRAP_ADDRESSMODE;
-        case 1 /* mirroredRepeat */:
-            logger.warn("Mirrored repeat wrapping not fully tested.");
-            return Texture.MIRROR_ADDRESSMODE;
-        case 2 /* clamp */:
-            // From the CmSym specification this sounds like a "clamp to border" with a black
-            // or transparent border color, not supported by WebGL or WebGPU.
-            throw Error("Clamp wrapping not supported");
-        case 4 /* clampToBorder */:
-            // Not supported by WebGL or WebGPU
-            throw Error("ClampToBorder wrapping not supported");
-        default:
-            throw Error("wrapping not implemented");
-    }
-}
-const TEXTURE_FILTER_LOOKUP = [
-    Texture.NEAREST_NEAREST,
-    Texture.LINEAR_NEAREST,
-    Texture.NEAREST_LINEAR,
-    Texture.LINEAR_LINEAR,
-    Texture.NEAREST_NEAREST_MIPNEAREST,
-    Texture.LINEAR_NEAREST_MIPNEAREST,
-    Texture.NEAREST_LINEAR_MIPNEAREST,
-    Texture.LINEAR_LINEAR_MIPNEAREST,
-    Texture.NEAREST_NEAREST_MIPLINEAR,
-    Texture.LINEAR_NEAREST_MIPLINEAR,
-    Texture.NEAREST_LINEAR_MIPLINEAR,
-    Texture.LINEAR_LINEAR_MIPLINEAR,
-];
-function symFilterToBabylonFilter(mag, min, mip) {
-    let lookup = mip === undefined ? 0 : mip === 1 /* nearest */ ? 4 : 8;
-    lookup += min === 1 /* nearest */ ? 0 : 2;
-    lookup += mag === 1 /* nearest */ ? 0 : 1;
-    return TEXTURE_FILTER_LOOKUP[lookup];
-}
-function loadCachedImage(logger, resourceUrl, renderEnvironment) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const textureImageWithMeta = yield renderEnvironment.textureImageCache.get(resourceUrl, () => __awaiter(this, void 0, void 0, function* () {
-            const result = {
-                image: undefined,
-                logger: new LogObservable(),
-            };
-            let mimeType = getImageMimeType(getFileExtension(resourceUrl));
-            const reader = renderEnvironment.dexManager.readers.get(resourceUrl);
-            if (reader === undefined) {
-                result.logger.warn("No reader for", resourceUrl);
-                return result;
-            }
-            let bytes = reader.bytes();
-            if (mimeType === CMMIPS_MIMETYPE) {
-                const mip = extractCmMips(bytes, result.logger); // Max quality
-                // const mip = extractCmMips(bytes, 2048); // High quality
-                // const mip = extractCmMips(bytes, 256); // Low quality
-                if ((mip === null || mip === void 0 ? void 0 : mip.data) === undefined) {
-                    result.logger.warn("Could not extract image from CmMips", resourceUrl);
-                    return result;
-                }
-                mimeType = getImageMimeType(mip.suffix);
-                bytes = mip.data;
-            }
-            const blob = new Blob([bytes], { type: mimeType });
-            const blobImageUrl = window.URL.createObjectURL(blob);
-            try {
-                result.image = yield loadImage(blobImageUrl);
-                return result;
-            }
-            catch (e) {
-                result.logger.warnFromCaught(e);
-                return result;
-            }
-        }));
-        textureImageWithMeta.logger.accumulated.forEach((p) => logger.addPrebaked(p));
-        return textureImageWithMeta.image;
-    });
-}
-export function loadTextureFromURL(url, renderEnvironment) {
-    const task = renderEnvironment.assetsManager.addTextureTask("(loadTextureFromURL)", url);
-    return new Promise((resolve, reject) => {
-        task.runTask(renderEnvironment.scene, () => {
-            resolve(task.texture);
-        }, reject);
-    });
-}
-/**
- * Derives a normal map from a supplied height map (aka bump-map). Classic materials in CET can use
- * both height maps and normal maps but Babylon.js only supports normal maps.
- *
- * The derived normal map and the effect from `scale` is carefully crafted to be as similar to how
- * the RedSDK 3D renderer in CET operates and match it's final output. Do not change this code to
- * make it visually "better", the goal is instead to be as similar as possible.
- */
-function deriveNormalMapFromHeightMap(image, amount, logger) {
-    const w = image.width;
-    const h = image.height;
-    const canvas = document.createElement("canvas");
-    canvas.width = w;
-    canvas.height = h;
-    const context = canvas.getContext("2d");
-    if (context !== null) {
-        const tick = performance.now();
-        context.drawImage(image, 0, 0);
-        const imgData = context.getImageData(0, 0, image.width, image.height);
-        const data = imgData.data;
-        // The scale conversion and default value comes from the CET source code.
-        const scale = amount ? 15 * amount : 0.1;
-        // Number of components, canvas returns RGBA
-        const c = 4;
-        // Go through the image and calculate a gray scale version, storing it in the A channel.
-        // Since this is legacy support code, we might as well support non-gray scale height maps,
-        // which we have seen in the wild. This is also how RedSDK in CET works according to docs.
-        for (let i = 0; i < w * h * c; i += c) {
-            data[i + 3] = (data[i] + data[i + 1] + data[i + 2]) / 3;
-        }
-        // Derive the height map to create a normal map, store the X and Y components in the R and
-        // G channels respectively.
-        //
-        // We are assuming that the map will be repeated when displayed since the Material Lab does
-        // not expose texture repeats in it's UI, and the default mode is wrapped. This means that
-        // edge sampling should wrap around as well.
-        for (let i = 0; i < w * h; i++) {
-            // The sample kernel:
-            // [x][r]
-            // [b]
-            //
-            // Produces results shifted half a pixel diagonally and is very local, but is about the // same as the kernel used in CET's render engine and also OpenGLs derivation extension.
-            const offset = i * c + 3; // A channel
-            const x = data[offset];
-            let r, b;
-            if (i % w === w - 1) {
-                // End of the row, sample from the beginning of the same row
-                r = data[offset - (w - 1) * c];
-            }
-            else {
-                r = data[offset + c];
-            }
-            if (i >= (h - 1) * w) {
-                // Last row, sample from the same column in the first row
-                b = data[offset - (h - 1) * w * c];
-            }
-            else {
-                b = data[offset + w * c];
-            }
-            // y-axis is inverted, OpenGL vs DirectX
-            const normal = new Vector3((x - r) * scale, (b - x) * scale, 255).normalize();
-            data[offset - 3] = Math.max(0, Math.min(255, normal.x * 128 + 127)); // R, x-axis
-            data[offset - 2] = Math.max(0, Math.min(255, normal.y * 128 + 127)); // G, y-axis
-            data[offset - 1] = Math.max(0, Math.min(255, normal.z * 128 + 127)); // B, z-axis
-        }
-        // Set the A channel to 255 to avoid any strange edge case and let it compress better.
-        for (let offset = 3; offset < w * h * c; offset += c) {
-            data[offset] = 255; // A
-        }
-        context.putImageData(imgData, 0, 0);
-        const convertedImage = new Image();
-        convertedImage.src = canvas.toDataURL("image/png");
-        logger.info(`Converting height based bump map`, `of size ${w}x${h} took ${Math.round(performance.now() - tick)}ms. For optimal performance, update all classic materials to use normal maps rather than height maps or switch to PBR materials.`);
-        return convertedImage;
-    }
-    return image;
-}
-function isGMaterial3DTexture(v) {
-    return v instanceof GMaterial3DTexture;
-}
-function getToImageLoadFunc(logger, renderEnvironment) {
-    return function (gm) {
-        let im;
-        if (gm === undefined || gm.textureUrl === undefined) {
-            im = Promise.resolve(undefined);
-        }
-        else {
-            im = loadCachedImage(logger, gm.textureUrl.value, renderEnvironment);
-        }
-        return { gm, im };
-    };
-}
-function getApplyImageConversionsFunc(logger, renderEnvironment) {
-    return function (gmv) {
-        const { gm } = gmv;
-        if (gm instanceof Bump3D && !gm.prepared) {
-            /* A non-"prepared" bump texture means that the bump map is actually an old school
-             * height map rather than a more modern (and faster) normal map. Babylon.js does not
-             * support height maps so we will need to convert it manually.
-             * https://forum.babylonjs.com/t/old-school-bump-map-height-map-not-supported/13447
-             *
-             * Normal map vs Height map:
-             * https://docs.unity3d.com/2019.3/Documentation/Manual/StandardShaderMaterialParameterNormalMap.html
-             */
-            const textureUrl = gm.textureUrl;
-            if (textureUrl !== undefined) {
-                const mimeType = getImageMimeType(getFileExtension(textureUrl.value));
-                if (mimeType === "image/png" || mimeType === "image/jpeg") {
-                    // Wrap the pure image load promise with an normal map derive promise
-                    gmv.im = renderEnvironment.derivedNormalMapCache.get(
-                    // The derivation depends on gm.amount, include it in the key. See WRD-664.
-                    textureUrl.value + "_scale_" + gm.amount, () => __awaiter(this, void 0, void 0, function* () {
-                        let image = yield gmv.im;
-                        if (image !== undefined) {
-                            image = deriveNormalMapFromHeightMap(image, gm.amount, logger);
-                        }
-                        return image;
-                    }));
-                }
-            }
-        }
-        return gmv;
-    };
-}
-function getToTextureLoadFunc(renderEnvironment) {
-    return function (gmv) {
-        const { gm, im } = gmv;
-        const tx = (() => __awaiter(this, void 0, void 0, function* () {
-            const image = yield im;
-            if (image === undefined) {
-                return undefined;
-            }
-            return loadTextureFromURL(image.src, renderEnvironment);
-        }))();
-        return { gm, tx };
-    };
-}
-function getApplyTexturePropertiesFromGMaterialFunc(logger) {
-    return function (gmv) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const gm = gmv.gm;
-            const tx = yield gmv.tx;
-            if (tx !== undefined) {
-                tx.wrapU = symWrapToBabylonWrap(logger, gm.wrapU);
-                tx.wrapV = symWrapToBabylonWrap(logger, gm.wrapV);
-                tx.uScale = gm.uScale;
-                tx.vScale = gm.vScale;
-                tx.uOffset = gm.uOffset;
-                tx.vOffset = gm.vOffset;
-                tx.uRotationCenter = 0;
-                tx.vRotationCenter = 0;
-                tx.wAng = gm.rot;
-                tx.updateSamplingMode(symFilterToBabylonFilter(gm.minFilter, gm.magFilter, gm.mipFilter));
-            }
-            return { gm, tx };
-        });
-    };
-}
-export function getTextures(logger, renderEnvironment, gm) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return __awaiter(this, void 0, void 0, function* () {
-        let textures = [];
-        if (gm instanceof GMaterialClassic) {
-            // Ambient is not used in CET.
-            // Emissive no longer exist in CET.
-            // Specular is rare (and we can currently only handle its general value,
-            // not its texture since the MeshStandardMaterial does not accept such a thing.)
-            textures = [gm.bump, gm.diffuse, gm.specular, gm.transparency];
-        }
-        if (gm instanceof GMaterialPBR) {
-            textures = [
-                (_a = gm.base) === null || _a === void 0 ? void 0 : _a.texture,
-                (_b = gm.emissive) === null || _b === void 0 ? void 0 : _b.texture,
-                (_c = gm.metallic) === null || _c === void 0 ? void 0 : _c.texture,
-                (_d = gm.normal) === null || _d === void 0 ? void 0 : _d.texture,
-                (_e = gm.occlusion) === null || _e === void 0 ? void 0 : _e.texture,
-                (_f = gm.opacity) === null || _f === void 0 ? void 0 : _f.texture,
-                (_g = gm.roughness) === null || _g === void 0 ? void 0 : _g.texture,
-            ];
-        }
-        return yield Promise.all(textures
-            .filter(isGMaterial3DTexture)
-            .map(getToImageLoadFunc(logger, renderEnvironment))
-            .map(getApplyImageConversionsFunc(logger, renderEnvironment))
-            .map(getToTextureLoadFunc(renderEnvironment))
-            .map(getApplyTexturePropertiesFromGMaterialFunc(logger)));
-    });
-}
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { GMaterial3DTexture, } from "@configura/web-core/dist/cm/core3D/GMaterial3D.js";
+import { Bump3D, GMaterialClassic } from "@configura/web-core/dist/cm/core3D/GMaterialClassic.js";
+import { GMaterialPBR } from "@configura/web-core/dist/cm/core3D/GMaterialPBR.js";
+import { CMMIPS_MIMETYPE, extractCmMips, getFileExtension, loadImage, LogObservable, } from "@configura/web-utilities";
+function getImageMimeType(fileExtension) {
+    switch (fileExtension.toLowerCase()) {
+        case "jpg":
+        case "jpeg":
+            return "image/jpeg";
+        case "png":
+            return "image/png";
+        case "bmp":
+            return "image/bmp";
+        case "cmmips":
+            return CMMIPS_MIMETYPE;
+        default:
+            throw Error("unrecognized file extension: " + fileExtension);
+    }
+}
+function symWrapToBabylonWrap(logger, wrap) {
+    switch (wrap) {
+        case 3 /* clampToEdge */:
+            return Texture.CLAMP_ADDRESSMODE;
+        case 0 /* repeat */:
+            return Texture.WRAP_ADDRESSMODE;
+        case 1 /* mirroredRepeat */:
+            logger.warn("Mirrored repeat wrapping not fully tested.");
+            return Texture.MIRROR_ADDRESSMODE;
+        case 2 /* clamp */:
+            // From the CmSym specification this sounds like a "clamp to border" with a black
+            // or transparent border color, not supported by WebGL or WebGPU.
+            throw Error("Clamp wrapping not supported");
+        case 4 /* clampToBorder */:
+            // Not supported by WebGL or WebGPU
+            throw Error("ClampToBorder wrapping not supported");
+        default:
+            throw Error("wrapping not implemented");
+    }
+}
+const TEXTURE_FILTER_LOOKUP = [
+    Texture.NEAREST_NEAREST,
+    Texture.LINEAR_NEAREST,
+    Texture.NEAREST_LINEAR,
+    Texture.LINEAR_LINEAR,
+    Texture.NEAREST_NEAREST_MIPNEAREST,
+    Texture.LINEAR_NEAREST_MIPNEAREST,
+    Texture.NEAREST_LINEAR_MIPNEAREST,
+    Texture.LINEAR_LINEAR_MIPNEAREST,
+    Texture.NEAREST_NEAREST_MIPLINEAR,
+    Texture.LINEAR_NEAREST_MIPLINEAR,
+    Texture.NEAREST_LINEAR_MIPLINEAR,
+    Texture.LINEAR_LINEAR_MIPLINEAR,
+];
+function symFilterToBabylonFilter(mag, min, mip) {
+    let lookup = mip === undefined ? 0 : mip === 1 /* nearest */ ? 4 : 8;
+    lookup += min === 1 /* nearest */ ? 0 : 2;
+    lookup += mag === 1 /* nearest */ ? 0 : 1;
+    return TEXTURE_FILTER_LOOKUP[lookup];
+}
+function loadCachedImage(logger, resourceUrl, renderEnvironment) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const textureImageWithMeta = yield renderEnvironment.textureImageCache.get(resourceUrl, () => __awaiter(this, void 0, void 0, function* () {
+            const result = {
+                image: undefined,
+                logger: new LogObservable(),
+            };
+            let mimeType = getImageMimeType(getFileExtension(resourceUrl));
+            const reader = renderEnvironment.dexManager.readers.get(resourceUrl);
+            if (reader === undefined) {
+                result.logger.warn("No reader for", resourceUrl);
+                return result;
+            }
+            let bytes = reader.bytes();
+            if (mimeType === CMMIPS_MIMETYPE) {
+                const mip = extractCmMips(bytes, result.logger); // Max quality
+                // const mip = extractCmMips(bytes, 2048); // High quality
+                // const mip = extractCmMips(bytes, 256); // Low quality
+                if ((mip === null || mip === void 0 ? void 0 : mip.data) === undefined) {
+                    result.logger.warn("Could not extract image from CmMips", resourceUrl);
+                    return result;
+                }
+                mimeType = getImageMimeType(mip.suffix);
+                bytes = mip.data;
+            }
+            const blob = new Blob([bytes], { type: mimeType });
+            const blobImageUrl = window.URL.createObjectURL(blob);
+            try {
+                result.image = yield loadImage(blobImageUrl);
+                return result;
+            }
+            catch (e) {
+                result.logger.warnFromCaught(e);
+                return result;
+            }
+        }));
+        textureImageWithMeta.logger.accumulated.forEach((p) => logger.addPrebaked(p));
+        return textureImageWithMeta.image;
+    });
+}
+export function loadTextureFromURL(url, renderEnvironment) {
+    const task = renderEnvironment.assetsManager.addTextureTask("(loadTextureFromURL)", url);
+    return new Promise((resolve, reject) => {
+        task.runTask(renderEnvironment.scene, () => {
+            resolve(task.texture);
+        }, reject);
+    });
+}
+/**
+ * Derives a normal map from a supplied height map (aka bump-map). Classic materials in CET can use
+ * both height maps and normal maps but Babylon.js only supports normal maps.
+ *
+ * The derived normal map and the effect from `scale` is carefully crafted to be as similar to how
+ * the RedSDK 3D renderer in CET operates and match it's final output. Do not change this code to
+ * make it visually "better", the goal is instead to be as similar as possible.
+ */
+function deriveNormalMapFromHeightMap(image, amount, logger) {
+    const w = image.width;
+    const h = image.height;
+    const canvas = document.createElement("canvas");
+    canvas.width = w;
+    canvas.height = h;
+    const context = canvas.getContext("2d");
+    if (context !== null) {
+        const tick = performance.now();
+        context.drawImage(image, 0, 0);
+        const imgData = context.getImageData(0, 0, image.width, image.height);
+        const data = imgData.data;
+        // The scale conversion and default value comes from the CET source code.
+        const scale = amount ? 15 * amount : 0.1;
+        // Number of components, canvas returns RGBA
+        const c = 4;
+        // Go through the image and calculate a gray scale version, storing it in the A channel.
+        // Since this is legacy support code, we might as well support non-gray scale height maps,
+        // which we have seen in the wild. This is also how RedSDK in CET works according to docs.
+        for (let i = 0; i < w * h * c; i += c) {
+            data[i + 3] = (data[i] + data[i + 1] + data[i + 2]) / 3;
+        }
+        // Derive the height map to create a normal map, store the X and Y components in the R and
+        // G channels respectively.
+        //
+        // We are assuming that the map will be repeated when displayed since the Material Lab does
+        // not expose texture repeats in it's UI, and the default mode is wrapped. This means that
+        // edge sampling should wrap around as well.
+        for (let i = 0; i < w * h; i++) {
+            // The sample kernel:
+            // [x][r]
+            // [b]
+            //
+            // Produces results shifted half a pixel diagonally and is very local, but is about the // same as the kernel used in CET's render engine and also OpenGLs derivation extension.
+            const offset = i * c + 3; // A channel
+            const x = data[offset];
+            let r, b;
+            if (i % w === w - 1) {
+                // End of the row, sample from the beginning of the same row
+                r = data[offset - (w - 1) * c];
+            }
+            else {
+                r = data[offset + c];
+            }
+            if (i >= (h - 1) * w) {
+                // Last row, sample from the same column in the first row
+                b = data[offset - (h - 1) * w * c];
+            }
+            else {
+                b = data[offset + w * c];
+            }
+            // y-axis is inverted, OpenGL vs DirectX
+            const normal = new Vector3((x - r) * scale, (b - x) * scale, 255).normalize();
+            data[offset - 3] = Math.max(0, Math.min(255, normal.x * 128 + 127)); // R, x-axis
+            data[offset - 2] = Math.max(0, Math.min(255, normal.y * 128 + 127)); // G, y-axis
+            data[offset - 1] = Math.max(0, Math.min(255, normal.z * 128 + 127)); // B, z-axis
+        }
+        // Set the A channel to 255 to avoid any strange edge case and let it compress better.
+        for (let offset = 3; offset < w * h * c; offset += c) {
+            data[offset] = 255; // A
+        }
+        context.putImageData(imgData, 0, 0);
+        const convertedImage = new Image();
+        convertedImage.src = canvas.toDataURL("image/png");
+        logger.info(`Converting height based bump map`, `of size ${w}x${h} took ${Math.round(performance.now() - tick)}ms. For optimal performance, update all classic materials to use normal maps rather than height maps or switch to PBR materials.`);
+        return convertedImage;
+    }
+    return image;
+}
+function isGMaterial3DTexture(v) {
+    return v instanceof GMaterial3DTexture;
+}
+function getToImageLoadFunc(logger, renderEnvironment) {
+    return function (gm) {
+        let im;
+        if (gm === undefined || gm.textureUrl === undefined) {
+            im = Promise.resolve(undefined);
+        }
+        else {
+            im = loadCachedImage(logger, gm.textureUrl.value, renderEnvironment);
+        }
+        return { gm, im };
+    };
+}
+function getApplyImageConversionsFunc(logger, renderEnvironment) {
+    return function (gmv) {
+        const { gm } = gmv;
+        if (gm instanceof Bump3D && !gm.prepared) {
+            /* A non-"prepared" bump texture means that the bump map is actually an old school
+             * height map rather than a more modern (and faster) normal map. Babylon.js does not
+             * support height maps so we will need to convert it manually.
+             * https://forum.babylonjs.com/t/old-school-bump-map-height-map-not-supported/13447
+             *
+             * Normal map vs Height map:
+             * https://docs.unity3d.com/2019.3/Documentation/Manual/StandardShaderMaterialParameterNormalMap.html
+             */
+            const textureUrl = gm.textureUrl;
+            if (textureUrl !== undefined) {
+                const mimeType = getImageMimeType(getFileExtension(textureUrl.value));
+                if (mimeType === "image/png" || mimeType === "image/jpeg") {
+                    // Wrap the pure image load promise with an normal map derive promise
+                    gmv.im = renderEnvironment.derivedNormalMapCache.get(
+                    // The derivation depends on gm.amount, include it in the key. See WRD-664.
+                    textureUrl.value + "_scale_" + gm.amount, () => __awaiter(this, void 0, void 0, function* () {
+                        let image = yield gmv.im;
+                        if (image !== undefined) {
+                            image = deriveNormalMapFromHeightMap(image, gm.amount, logger);
+                        }
+                        return image;
+                    }));
+                }
+            }
+        }
+        return gmv;
+    };
+}
+function getToTextureLoadFunc(renderEnvironment) {
+    return function (gmv) {
+        const { gm, im } = gmv;
+        const tx = (() => __awaiter(this, void 0, void 0, function* () {
+            const image = yield im;
+            if (image === undefined) {
+                return undefined;
+            }
+            return loadTextureFromURL(image.src, renderEnvironment);
+        }))();
+        return { gm, tx };
+    };
+}
+function getApplyTexturePropertiesFromGMaterialFunc(logger) {
+    return function (gmv) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const gm = gmv.gm;
+            const tx = yield gmv.tx;
+            if (tx !== undefined) {
+                tx.wrapU = symWrapToBabylonWrap(logger, gm.wrapU);
+                tx.wrapV = symWrapToBabylonWrap(logger, gm.wrapV);
+                tx.uScale = gm.uScale;
+                tx.vScale = gm.vScale;
+                tx.uOffset = gm.uOffset;
+                tx.vOffset = gm.vOffset;
+                tx.uRotationCenter = 0;
+                tx.vRotationCenter = 0;
+                tx.wAng = gm.rot;
+                tx.updateSamplingMode(symFilterToBabylonFilter(gm.minFilter, gm.magFilter, gm.mipFilter));
+            }
+            return { gm, tx };
+        });
+    };
+}
+export function getTextures(logger, renderEnvironment, gm) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return __awaiter(this, void 0, void 0, function* () {
+        let textures = [];
+        if (gm instanceof GMaterialClassic) {
+            // Ambient is not used in CET.
+            // Emissive no longer exist in CET.
+            // Specular is rare (and we can currently only handle its general value,
+            // not its texture since the MeshStandardMaterial does not accept such a thing.)
+            textures = [gm.bump, gm.diffuse, gm.specular, gm.transparency];
+        }
+        if (gm instanceof GMaterialPBR) {
+            textures = [
+                (_a = gm.base) === null || _a === void 0 ? void 0 : _a.texture,
+                (_b = gm.emissive) === null || _b === void 0 ? void 0 : _b.texture,
+                (_c = gm.metallic) === null || _c === void 0 ? void 0 : _c.texture,
+                (_d = gm.normal) === null || _d === void 0 ? void 0 : _d.texture,
+                (_e = gm.occlusion) === null || _e === void 0 ? void 0 : _e.texture,
+                (_f = gm.opacity) === null || _f === void 0 ? void 0 : _f.texture,
+                (_g = gm.roughness) === null || _g === void 0 ? void 0 : _g.texture,
+            ];
+        }
+        return yield Promise.all(textures
+            .filter(isGMaterial3DTexture)
+            .map(getToImageLoadFunc(logger, renderEnvironment))
+            .map(getApplyImageConversionsFunc(logger, renderEnvironment))
+            .map(getToTextureLoadFunc(renderEnvironment))
+            .map(getApplyTexturePropertiesFromGMaterialFunc(logger)));
+    });
+}