@babylonjs/serializers 8.34.1 → 8.35.0

package/glTF/2.0/glTFMaterialExporter.js

@@ -8,7 +8,7 @@ import { GetTextureDataAsync, TextureTools } from "@babylonjs/core/Misc/textureT
 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";
+import { EncodeImageAsync } from "@babylonjs/core/Misc/dumpTools.js";
 import { PBRBaseMaterial } from "@babylonjs/core/Materials/PBR/pbrBaseMaterial.js";
 import { SpecularPowerToRoughness } from "@babylonjs/core/Helpers/materialConversionHelper.js";
 import { GetMimeType } from "@babylonjs/core/Misc/fileTools.js";
@@ -33,6 +33,22 @@ function GetFileExtensionFromMimeType(mimeType) {
             return ".ktx2";
     }
 }
+/**
+ * @param mimeType the MIME type requested by the user
+ * @returns true if the given mime type is compatible with glTF
+ */
+function IsSupportedMimeType(mimeType) {
+    switch (mimeType) {
+        case "image/jpeg" /* ImageMimeType.JPEG */:
+        case "image/png" /* ImageMimeType.PNG */:
+        case "image/webp" /* ImageMimeType.WEBP */:
+        case "image/avif" /* ImageMimeType.AVIF */:
+        case "image/ktx2" /* ImageMimeType.KTX2 */:
+            return true;
+        default:
+            return false;
+    }
+}
 /**
  * Gets cached image from a texture, if available.
  * @param babylonTexture texture to check for cached image
@@ -71,8 +87,8 @@ async function GetCachedImageAsync(babylonTexture) {
         data = await Tools.LoadFileAsync(buffer.src);
         mimeType = GetMimeType(buffer.src) || mimeType;
     }
-    if (data && mimeType) {
-        return { data, mimeType };
+    if (data && IsSupportedMimeType(mimeType)) {
+        return new Blob([data], { type: mimeType });
     }
     return null;
 }
@@ -245,9 +261,6 @@ export class GLTFMaterialExporter {
         await Promise.all(promises);
         await this._exporter._extensionsPostExportMaterialAsync("exportMaterial", glTFMaterial, babylonMaterial);
     }
-    async _getImageDataAsync(buffer, width, height, mimeType) {
-        return await DumpTools.DumpDataAsync(width, height, buffer, mimeType, undefined, false, true);
-    }
     /**
      * Resizes the two source textures to the same dimensions.  If a texture is null, a default white texture is generated.  If both textures are null, returns null
      * @param texture1 first texture to resize
@@ -294,10 +307,9 @@ export class GLTFMaterialExporter {
      * @param diffuseTexture texture used to store diffuse information
      * @param specularGlossinessTexture texture used to store specular and glossiness information
      * @param factors specular glossiness material factors
-     * @param mimeType the mime type to use for the texture
      * @returns pbr metallic roughness interface or null
      */
-    async _convertSpecularGlossinessTexturesToMetallicRoughnessAsync(diffuseTexture, specularGlossinessTexture, factors, mimeType) {
+    async _convertSpecularGlossinessTexturesToMetallicRoughnessAsync(diffuseTexture, specularGlossinessTexture, factors) {
         const promises = new Array();
         if (!(diffuseTexture || specularGlossinessTexture)) {
             return await Promise.reject("diffuse and specular glossiness textures are not defined!");
@@ -393,12 +405,12 @@ export class GLTFMaterialExporter {
                 }
             }
             if (writeOutMetallicRoughnessTexture) {
-                promises.push(this._getImageDataAsync(metallicRoughnessBuffer, width, height, mimeType).then((data) => {
+                promises.push(EncodeImageAsync(metallicRoughnessBuffer, width, height).then((data) => {
                     metallicRoughnessFactors.metallicRoughnessTextureData = data;
                 }));
             }
             if (writeOutBaseColorTexture) {
-                promises.push(this._getImageDataAsync(baseColorBuffer, width, height, mimeType).then((data) => {
+                promises.push(EncodeImageAsync(baseColorBuffer, width, height).then((data) => {
                     metallicRoughnessFactors.baseColorTextureData = data;
                 }));
             }
@@ -648,7 +660,6 @@ export class GLTFMaterialExporter {
      * @returns glTF PBR Metallic Roughness factors
      */
     async _convertSpecGlossFactorsToMetallicRoughnessAsync(babylonPBRMaterial, pbrMetallicRoughness, hasUVs) {
-        const mimeType = "image/png" /* ImageMimeType.PNG */;
         const specGloss = {
             diffuseColor: babylonPBRMaterial._albedoColor,
             specularColor: babylonPBRMaterial._reflectivityColor,
@@ -663,14 +674,14 @@ export class GLTFMaterialExporter {
         if ((albedoTexture || reflectivityTexture) && hasUVs) {
             this._exporter._materialNeedsUVsSet.add(babylonPBRMaterial);
             const samplerIndex = this._exportTextureSampler(albedoTexture || reflectivityTexture);
-            const metallicRoughnessFactors = await this._convertSpecularGlossinessTexturesToMetallicRoughnessAsync(albedoTexture, reflectivityTexture, specGloss, mimeType);
+            const metallicRoughnessFactors = await this._convertSpecularGlossinessTexturesToMetallicRoughnessAsync(albedoTexture, reflectivityTexture, specGloss);
             const textures = this._exporter._textures;
             if (metallicRoughnessFactors.baseColorTextureData) {
-                const imageIndex = this._exportImage(`baseColor${textures.length}`, mimeType, metallicRoughnessFactors.baseColorTextureData);
+                const imageIndex = await this._exportImageAsync(`baseColor${textures.length}`, metallicRoughnessFactors.baseColorTextureData);
                 pbrMetallicRoughness.baseColorTexture = this._exportTextureInfo(imageIndex, samplerIndex, albedoTexture?.coordinatesIndex);
             }
             if (metallicRoughnessFactors.metallicRoughnessTextureData) {
-                const imageIndex = this._exportImage(`metallicRoughness${textures.length}`, mimeType, metallicRoughnessFactors.metallicRoughnessTextureData);
+                const imageIndex = await this._exportImageAsync(`metallicRoughness${textures.length}`, metallicRoughnessFactors.metallicRoughnessTextureData);
                 pbrMetallicRoughness.metallicRoughnessTexture = this._exportTextureInfo(imageIndex, samplerIndex, reflectivityTexture?.coordinatesIndex);
             }
             return metallicRoughnessFactors;
@@ -824,48 +835,46 @@ export class GLTFMaterialExporter {
             imageIndexPromise = (async () => {
                 // Try to get the image from memory first, if applicable
                 const cache = await GetCachedImageAsync(babylonTexture);
-                if (cache && (requestedMimeType === "none" || cache.mimeType === requestedMimeType)) {
-                    return this._exportImage(babylonTexture.name, cache.mimeType, cache.data);
+                if (cache && (requestedMimeType === "none" || cache.type === requestedMimeType)) {
+                    return await this._exportImageAsync(babylonTexture.name, cache);
                 }
                 // Preserve texture mime type if defined
                 let mimeType = "image/png" /* ImageMimeType.PNG */;
                 if (requestedMimeType !== "none") {
-                    switch (requestedMimeType) {
-                        case "image/jpeg" /* ImageMimeType.JPEG */:
-                        case "image/png" /* ImageMimeType.PNG */:
-                        case "image/webp" /* ImageMimeType.WEBP */:
-                            mimeType = requestedMimeType;
-                            break;
-                        default:
-                            Tools.Warn(`Unsupported media type: ${requestedMimeType}. Exporting texture as PNG.`);
-                            break;
+                    if (IsSupportedMimeType(requestedMimeType)) {
+                        mimeType = requestedMimeType;
+                    }
+                    else {
+                        mimeType = "image/png" /* ImageMimeType.PNG */;
+                        Tools.Warn(`Unsupported media type: ${requestedMimeType}. Exporting texture as PNG.`);
                     }
                 }
                 const size = babylonTexture.getSize();
                 const pixels = await GetTextureDataAsync(babylonTexture);
-                const data = await this._getImageDataAsync(pixels, size.width, size.height, mimeType);
-                return this._exportImage(babylonTexture.name, mimeType, data);
+                const imageData = await EncodeImageAsync(pixels, size.width, size.height, mimeType);
+                return await this._exportImageAsync(babylonTexture.name, imageData);
             })();
             internalTextureToImage[internalTextureUniqueId][requestedMimeType] = imageIndexPromise;
         }
         return await imageIndexPromise;
     }
-    _exportImage(name, mimeType, data) {
+    async _exportImageAsync(name, imageData) {
         const images = this._exporter._images;
         let image;
         if (this._exporter._shouldUseGlb) {
             image = {
                 name: name,
-                mimeType: mimeType,
+                mimeType: imageData.type,
                 bufferView: undefined, // Will be updated later by BufferManager
             };
+            const data = await imageData.arrayBuffer();
             const bufferView = this._exporter._bufferManager.createBufferView(new Uint8Array(data));
             this._exporter._bufferManager.setBufferView(image, bufferView);
         }
         else {
             // Build a unique URI
             const baseName = name.replace(/\.\/|\/|\.\\|\\/g, "_");
-            const extension = GetFileExtensionFromMimeType(mimeType);
+            const extension = GetFileExtensionFromMimeType(imageData.type);
             let fileName = baseName + extension;
             if (images.some((image) => image.uri === fileName)) {
                 fileName = `${baseName}_${Tools.RandomId()}${extension}`;
@@ -874,7 +883,7 @@ export class GLTFMaterialExporter {
                 name: name,
                 uri: fileName,
             };
-            this._exporter._imageData[fileName] = { data: data, mimeType: mimeType }; // Save image data to be written to file later
+            this._exporter._imageData[fileName] = imageData; // Save image data to be written to file later
         }
         images.push(image);
         return images.length - 1;