@babylonjs/serializers 5.32.1 → 5.33.0

package/glTF/2.0/glTFMaterialExporter.js

@@ -6,6 +6,17 @@ import { TextureTools } from "@babylonjs/core/Misc/textureTools.js";
 import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
 import { RawTexture } from "@babylonjs/core/Materials/Textures/rawTexture.js";
 import { Constants } from "@babylonjs/core/Engines/constants.js";
+import { DumpTools } from "@babylonjs/core/Misc/dumpTools.js";
+function getFileExtensionFromMimeType(mimeType) {
+    switch (mimeType) {
+        case "image/jpeg" /* JPEG */:
+            return ".jpg";
+        case "image/png" /* PNG */:
+            return ".png";
+        case "image/webp" /* WEBP */:
+            return ".webp";
+    }
+}
 /**
  * Utility methods for working with glTF material conversion properties.  This class should only be used internally
  * @internal
@@ -16,6 +27,8 @@ export class _GLTFMaterialExporter {
          * Mapping to store textures
          */
         this._textureMap = {};
+        // Mapping of internal textures to images to avoid exporting duplicate images.
+        this._internalTextureToImage = {};
         this._textureMap = {};
         this._exporter = exporter;
     }
@@ -199,68 +212,68 @@ export class _GLTFMaterialExporter {
         const materialMap = this._exporter._materialMap;
         const materials = this._exporter._materials;
         const promises = [];
-        const glTFPbrMetallicRoughness = this._convertToGLTFPBRMetallicRoughness(babylonStandardMaterial);
-        const glTFMaterial = { name: babylonStandardMaterial.name };
+        const pbrMetallicRoughness = this._convertToGLTFPBRMetallicRoughness(babylonStandardMaterial);
+        const material = { name: babylonStandardMaterial.name };
         if (babylonStandardMaterial.backFaceCulling != null && !babylonStandardMaterial.backFaceCulling) {
             if (!babylonStandardMaterial.twoSidedLighting) {
                 Tools.Warn(babylonStandardMaterial.name + ": Back-face culling disabled and two-sided lighting disabled is not supported in glTF.");
             }
-            glTFMaterial.doubleSided = true;
+            material.doubleSided = true;
         }
         if (hasTextureCoords) {
             if (babylonStandardMaterial.diffuseTexture) {
-                promises.push(this._exportTextureAsync(babylonStandardMaterial.diffuseTexture, mimeType).then((glTFTexture) => {
-                    if (glTFTexture) {
-                        glTFPbrMetallicRoughness.baseColorTexture = glTFTexture;
+                promises.push(this._exportTextureAsync(babylonStandardMaterial.diffuseTexture, mimeType).then((textureInfo) => {
+                    if (textureInfo) {
+                        pbrMetallicRoughness.baseColorTexture = textureInfo;
                     }
                 }));
             }
-            if (babylonStandardMaterial.bumpTexture) {
-                promises.push(this._exportTextureAsync(babylonStandardMaterial.bumpTexture, mimeType).then((glTFTexture) => {
-                    if (glTFTexture) {
-                        glTFMaterial.normalTexture = glTFTexture;
-                        if (babylonStandardMaterial.bumpTexture != null && babylonStandardMaterial.bumpTexture.level !== 1) {
-                            glTFMaterial.normalTexture.scale = babylonStandardMaterial.bumpTexture.level;
+            const bumpTexture = babylonStandardMaterial.bumpTexture;
+            if (bumpTexture) {
+                promises.push(this._exportTextureAsync(bumpTexture, mimeType).then((textureInfo) => {
+                    if (textureInfo) {
+                        material.normalTexture = textureInfo;
+                        if (bumpTexture.level !== 1) {
+                            material.normalTexture.scale = bumpTexture.level;
                         }
                     }
                 }));
             }
             if (babylonStandardMaterial.emissiveTexture) {
-                glTFMaterial.emissiveFactor = [1.0, 1.0, 1.0];
-                promises.push(this._exportTextureAsync(babylonStandardMaterial.emissiveTexture, mimeType).then((glTFEmissiveTexture) => {
-                    if (glTFEmissiveTexture) {
-                        glTFMaterial.emissiveTexture = glTFEmissiveTexture;
+                material.emissiveFactor = [1.0, 1.0, 1.0];
+                promises.push(this._exportTextureAsync(babylonStandardMaterial.emissiveTexture, mimeType).then((textureInfo) => {
+                    if (textureInfo) {
+                        material.emissiveTexture = textureInfo;
                     }
                 }));
             }
             if (babylonStandardMaterial.ambientTexture) {
-                promises.push(this._exportTextureAsync(babylonStandardMaterial.ambientTexture, mimeType).then((glTFTexture) => {
-                    if (glTFTexture) {
+                promises.push(this._exportTextureAsync(babylonStandardMaterial.ambientTexture, mimeType).then((textureInfo) => {
+                    if (textureInfo) {
                         const occlusionTexture = {
-                            index: glTFTexture.index,
+                            index: textureInfo.index,
                         };
-                        glTFMaterial.occlusionTexture = occlusionTexture;
-                        occlusionTexture.strength = 1.0;
+                        material.occlusionTexture = occlusionTexture;
                     }
                 }));
             }
         }
         if (babylonStandardMaterial.alpha < 1.0 || babylonStandardMaterial.opacityTexture) {
             if (babylonStandardMaterial.alphaMode === Constants.ALPHA_COMBINE) {
-                glTFMaterial.alphaMode = "BLEND" /* BLEND */;
+                material.alphaMode = "BLEND" /* BLEND */;
             }
             else {
                 Tools.Warn(babylonStandardMaterial.name + ": glTF 2.0 does not support alpha mode: " + babylonStandardMaterial.alphaMode.toString());
             }
         }
         if (babylonStandardMaterial.emissiveColor && !_GLTFMaterialExporter._FuzzyEquals(babylonStandardMaterial.emissiveColor, Color3.Black(), _GLTFMaterialExporter._Epsilon)) {
-            glTFMaterial.emissiveFactor = babylonStandardMaterial.emissiveColor.asArray();
+            material.emissiveFactor = babylonStandardMaterial.emissiveColor.asArray();
         }
-        glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
-        _GLTFMaterialExporter._SetAlphaMode(glTFMaterial, babylonStandardMaterial);
-        materials.push(glTFMaterial);
+        material.pbrMetallicRoughness = pbrMetallicRoughness;
+        _GLTFMaterialExporter._SetAlphaMode(material, babylonStandardMaterial);
+        materials.push(material);
         materialMap[babylonStandardMaterial.uniqueId] = materials.length - 1;
-        return this._finishMaterial(promises, glTFMaterial, babylonStandardMaterial, mimeType);
+        return this._finishMaterial(promises, material, babylonStandardMaterial, mimeType);
     }
     _finishMaterial(promises, glTFMaterial, babylonMaterial, mimeType) {
         return Promise.all(promises).then(() => {
@@ -292,19 +305,15 @@ export class _GLTFMaterialExporter {
      * @param mimeType mimetype of the image
      * @returns base64 image string
      */
-    _createBase64FromCanvasAsync(buffer, width, height, mimeType) {
-        // eslint-disable-next-line no-async-promise-executor
-        return new Promise(async (resolve) => {
-            const textureType = Constants.TEXTURETYPE_UNSIGNED_INT;
-            const hostingScene = this._exporter._babylonScene;
-            const engine = hostingScene.getEngine();
-            // Create a temporary texture with the texture buffer data
-            const tempTexture = engine.createRawTexture(buffer, width, height, Constants.TEXTUREFORMAT_RGBA, false, true, Texture.NEAREST_SAMPLINGMODE, null, textureType);
-            await TextureTools.ApplyPostProcess("pass", tempTexture, hostingScene, textureType, Constants.TEXTURE_NEAREST_SAMPLINGMODE, Constants.TEXTUREFORMAT_RGBA);
-            const data = await engine._readTexturePixels(tempTexture, width, height);
-            const base64 = await Tools.DumpDataAsync(width, height, data, mimeType, undefined, true, false);
-            resolve(base64);
-        });
+    async _getImageDataAsync(buffer, width, height, mimeType) {
+        const textureType = Constants.TEXTURETYPE_UNSIGNED_INT;
+        const hostingScene = this._exporter._babylonScene;
+        const engine = hostingScene.getEngine();
+        // Create a temporary texture with the texture buffer data
+        const tempTexture = engine.createRawTexture(buffer, width, height, Constants.TEXTUREFORMAT_RGBA, false, true, Texture.NEAREST_SAMPLINGMODE, null, textureType);
+        await TextureTools.ApplyPostProcess("pass", tempTexture, hostingScene, textureType, Constants.TEXTURE_NEAREST_SAMPLINGMODE, Constants.TEXTUREFORMAT_RGBA);
+        const data = await engine._readTexturePixels(tempTexture, width, height);
+        return (await DumpTools.DumpDataAsync(width, height, data, mimeType, undefined, true, true));
     }
     /**
      * Generates a white texture based on the specified width and height
@@ -394,7 +403,7 @@ export class _GLTFMaterialExporter {
      */
     async _convertSpecularGlossinessTexturesToMetallicRoughnessAsync(diffuseTexture, specularGlossinessTexture, factors, mimeType) {
         var _a;
-        const promises = [];
+        const promises = new Array();
         if (!(diffuseTexture || specularGlossinessTexture)) {
             return Promise.reject("_ConvertSpecularGlosinessTexturesToMetallicRoughness: diffuse and specular glossiness textures are not defined!");
         }
@@ -488,16 +497,14 @@ export class _GLTFMaterialExporter {
                 }
             }
             if (writeOutMetallicRoughnessTexture) {
-                const promise = this._createBase64FromCanvasAsync(metallicRoughnessBuffer, width, height, mimeType).then((metallicRoughnessBase64) => {
-                    metallicRoughnessFactors.metallicRoughnessTextureBase64 = metallicRoughnessBase64;
-                });
-                promises.push(promise);
+                promises.push(this._getImageDataAsync(metallicRoughnessBuffer, width, height, mimeType).then((data) => {
+                    metallicRoughnessFactors.metallicRoughnessTextureData = data;
+                }));
             }
             if (writeOutBaseColorTexture) {
-                const promise = this._createBase64FromCanvasAsync(baseColorBuffer, width, height, mimeType).then((baseColorBase64) => {
-                    metallicRoughnessFactors.baseColorTextureBase64 = baseColorBase64;
-                });
-                promises.push(promise);
+                promises.push(this._getImageDataAsync(baseColorBuffer, width, height, mimeType).then((data) => {
+                    metallicRoughnessFactors.baseColorTextureData = data;
+                }));
             }
             return Promise.all(promises).then(() => {
                 return metallicRoughnessFactors;
@@ -592,71 +599,79 @@ export class _GLTFMaterialExporter {
             return metallicRoughness;
         });
     }
-    _getGLTFTextureSampler(texture) {
-        const sampler = this._getGLTFTextureWrapModesSampler(texture);
-        const samplingMode = texture instanceof Texture ? texture.samplingMode : null;
-        if (samplingMode != null) {
-            switch (samplingMode) {
-                case Texture.LINEAR_LINEAR: {
-                    sampler.magFilter = 9729 /* LINEAR */;
-                    sampler.minFilter = 9729 /* LINEAR */;
-                    break;
-                }
-                case Texture.LINEAR_NEAREST: {
-                    sampler.magFilter = 9729 /* LINEAR */;
-                    sampler.minFilter = 9728 /* NEAREST */;
-                    break;
-                }
-                case Texture.NEAREST_LINEAR: {
-                    sampler.magFilter = 9728 /* NEAREST */;
-                    sampler.minFilter = 9729 /* LINEAR */;
-                    break;
-                }
-                case Texture.NEAREST_LINEAR_MIPLINEAR: {
-                    sampler.magFilter = 9728 /* NEAREST */;
-                    sampler.minFilter = 9987 /* LINEAR_MIPMAP_LINEAR */;
-                    break;
-                }
-                case Texture.NEAREST_NEAREST: {
-                    sampler.magFilter = 9728 /* NEAREST */;
-                    sampler.minFilter = 9728 /* NEAREST */;
-                    break;
-                }
-                case Texture.NEAREST_LINEAR_MIPNEAREST: {
-                    sampler.magFilter = 9728 /* NEAREST */;
-                    sampler.minFilter = 9985 /* LINEAR_MIPMAP_NEAREST */;
-                    break;
-                }
-                case Texture.LINEAR_NEAREST_MIPNEAREST: {
-                    sampler.magFilter = 9729 /* LINEAR */;
-                    sampler.minFilter = 9984 /* NEAREST_MIPMAP_NEAREST */;
-                    break;
-                }
-                case Texture.LINEAR_NEAREST_MIPLINEAR: {
-                    sampler.magFilter = 9729 /* LINEAR */;
-                    sampler.minFilter = 9986 /* NEAREST_MIPMAP_LINEAR */;
-                    break;
-                }
-                case Texture.NEAREST_NEAREST_MIPLINEAR: {
-                    sampler.magFilter = 9728 /* NEAREST */;
-                    sampler.minFilter = 9986 /* NEAREST_MIPMAP_LINEAR */;
-                    break;
-                }
-                case Texture.LINEAR_LINEAR_MIPLINEAR: {
-                    sampler.magFilter = 9729 /* LINEAR */;
-                    sampler.minFilter = 9987 /* LINEAR_MIPMAP_LINEAR */;
-                    break;
-                }
-                case Texture.LINEAR_LINEAR_MIPNEAREST: {
-                    sampler.magFilter = 9729 /* LINEAR */;
-                    sampler.minFilter = 9985 /* LINEAR_MIPMAP_NEAREST */;
-                    break;
-                }
-                case Texture.NEAREST_NEAREST_MIPNEAREST: {
-                    sampler.magFilter = 9728 /* NEAREST */;
-                    sampler.minFilter = 9984 /* NEAREST_MIPMAP_NEAREST */;
-                    break;
-                }
+    _getTextureSampler(texture) {
+        const sampler = {};
+        if (!texture || !(texture instanceof Texture)) {
+            return sampler;
+        }
+        const wrapS = this._getGLTFTextureWrapMode(texture.wrapU);
+        if (wrapS !== 10497 /* REPEAT */) {
+            sampler.wrapS = wrapS;
+        }
+        const wrapT = this._getGLTFTextureWrapMode(texture.wrapV);
+        if (wrapT !== 10497 /* REPEAT */) {
+            sampler.wrapT = wrapT;
+        }
+        switch (texture.samplingMode) {
+            case Texture.LINEAR_LINEAR: {
+                sampler.magFilter = 9729 /* LINEAR */;
+                sampler.minFilter = 9729 /* LINEAR */;
+                break;
+            }
+            case Texture.LINEAR_NEAREST: {
+                sampler.magFilter = 9729 /* LINEAR */;
+                sampler.minFilter = 9728 /* NEAREST */;
+                break;
+            }
+            case Texture.NEAREST_LINEAR: {
+                sampler.magFilter = 9728 /* NEAREST */;
+                sampler.minFilter = 9729 /* LINEAR */;
+                break;
+            }
+            case Texture.NEAREST_LINEAR_MIPLINEAR: {
+                sampler.magFilter = 9728 /* NEAREST */;
+                sampler.minFilter = 9987 /* LINEAR_MIPMAP_LINEAR */;
+                break;
+            }
+            case Texture.NEAREST_NEAREST: {
+                sampler.magFilter = 9728 /* NEAREST */;
+                sampler.minFilter = 9728 /* NEAREST */;
+                break;
+            }
+            case Texture.NEAREST_LINEAR_MIPNEAREST: {
+                sampler.magFilter = 9728 /* NEAREST */;
+                sampler.minFilter = 9985 /* LINEAR_MIPMAP_NEAREST */;
+                break;
+            }
+            case Texture.LINEAR_NEAREST_MIPNEAREST: {
+                sampler.magFilter = 9729 /* LINEAR */;
+                sampler.minFilter = 9984 /* NEAREST_MIPMAP_NEAREST */;
+                break;
+            }
+            case Texture.LINEAR_NEAREST_MIPLINEAR: {
+                sampler.magFilter = 9729 /* LINEAR */;
+                sampler.minFilter = 9986 /* NEAREST_MIPMAP_LINEAR */;
+                break;
+            }
+            case Texture.NEAREST_NEAREST_MIPLINEAR: {
+                sampler.magFilter = 9728 /* NEAREST */;
+                sampler.minFilter = 9986 /* NEAREST_MIPMAP_LINEAR */;
+                break;
+            }
+            case Texture.LINEAR_LINEAR_MIPLINEAR: {
+                sampler.magFilter = 9729 /* LINEAR */;
+                sampler.minFilter = 9987 /* LINEAR_MIPMAP_LINEAR */;
+                break;
+            }
+            case Texture.LINEAR_LINEAR_MIPNEAREST: {
+                sampler.magFilter = 9729 /* LINEAR */;
+                sampler.minFilter = 9985 /* LINEAR_MIPMAP_NEAREST */;
+                break;
+            }
+            case Texture.NEAREST_NEAREST_MIPNEAREST: {
+                sampler.magFilter = 9728 /* NEAREST */;
+                sampler.minFilter = 9984 /* NEAREST_MIPMAP_NEAREST */;
+                break;
             }
         }
         return sampler;
@@ -678,15 +693,6 @@ export class _GLTFMaterialExporter {
             }
         }
     }
-    _getGLTFTextureWrapModesSampler(texture) {
-        const wrapS = this._getGLTFTextureWrapMode(texture instanceof Texture ? texture.wrapU : Texture.WRAP_ADDRESSMODE);
-        const wrapT = this._getGLTFTextureWrapMode(texture instanceof Texture ? texture.wrapV : Texture.WRAP_ADDRESSMODE);
-        if (wrapS === 10497 /* REPEAT */ && wrapT === 10497 /* REPEAT */) {
-            // default wrapping mode in glTF, so omitting
-            return {};
-        }
-        return { wrapS: wrapS, wrapT: wrapT };
-    }
     /**
      * Convert a PBRMaterial (Specular/Glossiness) to Metallic Roughness factors
      * @param babylonPBRMaterial BJS PBR Metallic Roughness Material
@@ -695,45 +701,30 @@ export class _GLTFMaterialExporter {
      * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
      * @returns glTF PBR Metallic Roughness factors
      */
-    _convertSpecGlossFactorsToMetallicRoughnessAsync(babylonPBRMaterial, mimeType, glTFPbrMetallicRoughness, hasTextureCoords) {
+    _convertSpecGlossFactorsToMetallicRoughnessAsync(babylonPBRMaterial, mimeType, pbrMetallicRoughness, hasTextureCoords) {
         return Promise.resolve().then(() => {
-            const samplers = this._exporter._samplers;
-            const textures = this._exporter._textures;
-            const diffuseColor = babylonPBRMaterial._albedoColor;
-            const specularColor = babylonPBRMaterial._reflectivityColor;
-            const glossiness = babylonPBRMaterial._microSurface;
             const specGloss = {
-                diffuseColor: diffuseColor,
-                specularColor: specularColor,
-                glossiness: glossiness,
+                diffuseColor: babylonPBRMaterial._albedoColor,
+                specularColor: babylonPBRMaterial._reflectivityColor,
+                glossiness: babylonPBRMaterial._microSurface,
             };
-            let samplerIndex = null;
             const albedoTexture = babylonPBRMaterial._albedoTexture;
             const reflectivityTexture = babylonPBRMaterial._reflectivityTexture;
-            if (albedoTexture) {
-                const sampler = this._getGLTFTextureSampler(albedoTexture);
-                if (sampler.magFilter != null && sampler.minFilter != null && sampler.wrapS != null && sampler.wrapT != null) {
-                    samplers.push(sampler);
-                    samplerIndex = samplers.length - 1;
-                }
-            }
             const useMicrosurfaceFromReflectivityMapAlpha = babylonPBRMaterial._useMicroSurfaceFromReflectivityMapAlpha;
             if (reflectivityTexture && !useMicrosurfaceFromReflectivityMapAlpha) {
                 return Promise.reject("_ConvertPBRMaterial: Glossiness values not included in the reflectivity texture are currently not supported");
             }
             if ((albedoTexture || reflectivityTexture) && hasTextureCoords) {
+                const samplerIndex = this._exportTextureSampler(albedoTexture || reflectivityTexture);
                 return this._convertSpecularGlossinessTexturesToMetallicRoughnessAsync(albedoTexture, reflectivityTexture, specGloss, mimeType).then((metallicRoughnessFactors) => {
-                    if (metallicRoughnessFactors.baseColorTextureBase64) {
-                        const glTFBaseColorTexture = this._getTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture_" + textures.length + ".png", mimeType, albedoTexture ? albedoTexture.coordinatesIndex : null, samplerIndex);
-                        if (glTFBaseColorTexture) {
-                            glTFPbrMetallicRoughness.baseColorTexture = glTFBaseColorTexture;
-                        }
+                    const textures = this._exporter._textures;
+                    if (metallicRoughnessFactors.baseColorTextureData) {
+                        const imageIndex = this._exportImage(`baseColor${textures.length}`, mimeType, metallicRoughnessFactors.baseColorTextureData);
+                        pbrMetallicRoughness.baseColorTexture = this._exportTextureInfo(imageIndex, samplerIndex, albedoTexture === null || albedoTexture === void 0 ? void 0 : albedoTexture.coordinatesIndex);
                     }
-                    if (metallicRoughnessFactors.metallicRoughnessTextureBase64) {
-                        const glTFMRColorTexture = this._getTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture_" + textures.length + ".png", mimeType, reflectivityTexture ? reflectivityTexture.coordinatesIndex : null, samplerIndex);
-                        if (glTFMRColorTexture) {
-                            glTFPbrMetallicRoughness.metallicRoughnessTexture = glTFMRColorTexture;
-                        }
+                    if (metallicRoughnessFactors.metallicRoughnessTextureData) {
+                        const imageIndex = this._exportImage(`metallicRoughness${textures.length}`, mimeType, metallicRoughnessFactors.metallicRoughnessTextureData);
+                        pbrMetallicRoughness.metallicRoughnessTexture = this._exportTextureInfo(imageIndex, samplerIndex, reflectivityTexture === null || reflectivityTexture === void 0 ? void 0 : reflectivityTexture.coordinatesIndex);
                     }
                     return metallicRoughnessFactors;
                 });
@@ -867,129 +858,92 @@ export class _GLTFMaterialExporter {
             return this._exportTextureInfoAsync(texture, mimeType);
         });
     }
-    _exportTextureInfoAsync(babylonTexture, mimeType) {
-        return Promise.resolve().then(async () => {
-            const textureUid = babylonTexture.uid;
-            if (textureUid in this._textureMap) {
-                return this._textureMap[textureUid];
-            }
-            else {
-                const pixels = await this._getPixelsFromTexture(babylonTexture);
-                if (!pixels) {
-                    return null;
-                }
-                const samplers = this._exporter._samplers;
-                const sampler = this._getGLTFTextureSampler(babylonTexture);
-                let samplerIndex = null;
-                //  if a pre-existing sampler with identical parameters exists, then reuse the previous sampler
-                let foundSamplerIndex = null;
-                for (let i = 0; i < samplers.length; ++i) {
-                    const s = samplers[i];
-                    if (s.minFilter === sampler.minFilter && s.magFilter === sampler.magFilter && s.wrapS === sampler.wrapS && s.wrapT === sampler.wrapT) {
-                        foundSamplerIndex = i;
+    async _exportTextureInfoAsync(babylonTexture, mimeType) {
+        const textureUid = babylonTexture.uid;
+        if (textureUid in this._textureMap) {
+            return this._textureMap[textureUid];
+        }
+        else {
+            const pixels = await this._getPixelsFromTexture(babylonTexture);
+            if (!pixels) {
+                return null;
+            }
+            const samplerIndex = this._exportTextureSampler(babylonTexture);
+            // Preserve texture mime type if defined
+            const textureMimeType = babylonTexture.mimeType;
+            if (textureMimeType) {
+                switch (textureMimeType) {
+                    case "image/jpeg":
+                    case "image/png":
+                    case "image/webp":
+                        mimeType = textureMimeType;
+                        break;
+                    default:
+                        Tools.Warn("Unsupported media type: ${textureMimeType}");
                         break;
-                    }
-                }
-                if (foundSamplerIndex == null) {
-                    samplers.push(sampler);
-                    samplerIndex = samplers.length - 1;
-                }
-                else {
-                    samplerIndex = foundSamplerIndex;
                 }
+            }
+            const internalTextureToImage = this._internalTextureToImage;
+            const internalTextureUniqueId = babylonTexture.getInternalTexture().uniqueId;
+            internalTextureToImage[internalTextureUniqueId] || (internalTextureToImage[internalTextureUniqueId] = {});
+            let imageIndex = internalTextureToImage[internalTextureUniqueId][mimeType];
+            if (imageIndex === undefined) {
                 const size = babylonTexture.getSize();
-                // Preserve texture mime type if defined
-                if (babylonTexture.mimeType) {
-                    switch (babylonTexture.mimeType) {
-                        case "image/jpeg":
-                            mimeType = "image/jpeg" /* JPEG */;
-                            break;
-                        case "image/png":
-                            mimeType = "image/png" /* PNG */;
-                            break;
-                        case "image/webp":
-                            mimeType = "image/webp" /* WEBP */;
-                            break;
-                    }
-                }
-                return this._createBase64FromCanvasAsync(pixels, size.width, size.height, mimeType).then((base64Data) => {
-                    const textureInfo = this._getTextureInfoFromBase64(base64Data, babylonTexture.name.replace(/\.\/|\/|\.\\|\\/g, "_"), mimeType, babylonTexture.coordinatesIndex, samplerIndex);
-                    if (textureInfo) {
-                        this._textureMap[textureUid] = textureInfo;
-                        this._exporter._extensionsPostExportTextures("linkTextureInfo", textureInfo, babylonTexture);
-                    }
-                    return textureInfo;
-                });
+                const data = await this._getImageDataAsync(pixels, size.width, size.height, mimeType);
+                imageIndex = this._exportImage(babylonTexture.name, mimeType, data);
+                internalTextureToImage[internalTextureUniqueId][mimeType] = imageIndex;
             }
-        });
+            const textureInfo = this._exportTextureInfo(imageIndex, samplerIndex, babylonTexture.coordinatesIndex);
+            this._textureMap[textureUid] = textureInfo;
+            return textureInfo;
+        }
     }
-    /**
-     * Builds a texture from base64 string
-     * @param base64Texture base64 texture string
-     * @param baseTextureName Name to use for the texture
-     * @param mimeType image mime type for the texture
-     * @param texCoordIndex
-     * @param samplerIndex
-     * @returns glTF texture info, or null if the texture format is not supported
-     */
-    _getTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, texCoordIndex, samplerIndex) {
-        const textures = this._exporter._textures;
-        const images = this._exporter._images;
+    _exportImage(name, mimeType, data) {
         const imageData = this._exporter._imageData;
-        let textureInfo = null;
-        const glTFTexture = {
-            source: images.length,
-            name: baseTextureName,
+        const baseName = name.replace(/\.\/|\/|\.\\|\\/g, "_");
+        const extension = getFileExtensionFromMimeType(mimeType);
+        let fileName = baseName + extension;
+        if (fileName in imageData) {
+            fileName = `${baseName}_${Tools.RandomId()}${extension}`;
+        }
+        imageData[fileName] = {
+            data: data,
+            mimeType: mimeType,
         };
-        if (samplerIndex != null) {
-            glTFTexture.sampler = samplerIndex;
-        }
-        const binStr = atob(base64Texture.split(",")[1]);
-        const arrBuff = new ArrayBuffer(binStr.length);
-        const arr = new Uint8Array(arrBuff);
-        for (let i = 0, length = binStr.length; i < length; ++i) {
-            arr[i] = binStr.charCodeAt(i);
-        }
-        const imageValues = { data: arr, mimeType: mimeType };
-        const extension = mimeType === "image/jpeg" /* JPEG */ ? ".jpeg" : ".png";
-        let textureName = baseTextureName + extension;
-        const originalTextureName = textureName;
-        if (textureName in imageData) {
-            textureName = `${baseTextureName}_${Tools.RandomId()}${extension}`;
-        }
-        imageData[textureName] = imageValues;
-        if (mimeType === "image/jpeg" /* JPEG */ || mimeType === "image/png" /* PNG */ || mimeType === "image/webp" /* WEBP */) {
-            const glTFImage = {
-                name: baseTextureName,
-                uri: textureName,
-            };
-            let foundIndex = null;
-            for (let i = 0; i < images.length; ++i) {
-                if (images[i].uri === originalTextureName) {
-                    foundIndex = i;
-                    break;
-                }
-            }
-            if (foundIndex == null) {
-                images.push(glTFImage);
-                glTFTexture.source = images.length - 1;
-            }
-            else {
-                glTFTexture.source = foundIndex;
-            }
-            textures.push(glTFTexture);
-            textureInfo = {
-                index: textures.length - 1,
-            };
-            if (texCoordIndex != null) {
-                textureInfo.texCoord = texCoordIndex;
-            }
+        const images = this._exporter._images;
+        images.push({
+            name: name,
+            uri: fileName,
+        });
+        return images.length - 1;
+    }
+    _exportTextureInfo(imageIndex, samplerIndex, coordinatesIndex) {
+        const textures = this._exporter._textures;
+        let textureIndex = textures.findIndex((t) => t.sampler == samplerIndex && t.source === imageIndex);
+        if (textureIndex === -1) {
+            textureIndex = textures.length;
+            textures.push({
+                source: imageIndex,
+                sampler: samplerIndex,
+            });
         }
-        else {
-            Tools.Error(`Unsupported texture mime type ${mimeType}`);
+        const textureInfo = { index: textureIndex };
+        if (coordinatesIndex) {
+            textureInfo.texCoord = coordinatesIndex;
         }
         return textureInfo;
     }
+    _exportTextureSampler(texture) {
+        const sampler = this._getTextureSampler(texture);
+        // if a pre-existing sampler with identical parameters exists, then reuse the previous sampler
+        const samplers = this._exporter._samplers;
+        const samplerIndex = samplers.findIndex((s) => s.minFilter === sampler.minFilter && s.magFilter === sampler.magFilter && s.wrapS === sampler.wrapS && s.wrapT === sampler.wrapT);
+        if (samplerIndex !== -1) {
+            return samplerIndex;
+        }
+        samplers.push(sampler);
+        return samplers.length - 1;
+    }
 }
 /**
  * Represents the dielectric specular values for R, G and B