galacean · GuoLei1990 · May 28, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
diff --git a/packages/core/src/SystemInfo.ts b/packages/core/src/SystemInfo.ts
@@ -2,6 +2,7 @@ import { GLCapabilityType } from "./base/Constant";
 import { Engine } from "./Engine";
 import { Platform } from "./Platform";
 import { TextureFormat } from "./texture";
+import { AssetPromise } from "./asset/AssetPromise";
 
 /**
  * Access operating system, platform and hardware information.
@@ -18,6 +19,8 @@ export class SystemInfo {
   /** Whether the system support SIMD. */
   private static _simdSupported: boolean | null = null;
 
+  private static _webpSupported: AssetPromise<boolean> | null = null;
+
   /**
    * The pixel ratio of the device.
    */
@@ -84,6 +87,28 @@ export class SystemInfo {
     return this._simdSupported;
   }
 
+  static _checkWebpSupported(): AssetPromise<boolean> {
+    if (!this._webpSupported) {
+      this._webpSupported = new AssetPromise((resolve) => {
+        if (this._isBrowser) {
+          const img = new Image();
+          img. () {
+            const result = img.width > 0 && img.height > 0;
+            resolve(result);
+          };
+          img. () {
+            resolve(false);
+          };
+          img.src =
+            "data:image/webp;base64,UklGRhACAABXRUJQVlA4WAoAAAAwAAAAAAAAAAAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZBTFBIAgAAAAAAVlA4IBgAAAAwAQCdASoBAAEAAUAmJaQAA3AA/v02aAA=";
+        } else {
+          resolve(false);
+        }
+      });
+    }
+    return this._webpSupported;
+  }
+
   /**
    * Checks whether the system supports the given texture format.
    * @param format - The texture format

diff --git a/packages/loader/src/gltf/extensions/EXT_texture_webp.ts b/packages/loader/src/gltf/extensions/EXT_texture_webp.ts
@@ -11,21 +11,6 @@ interface EXTWebPSchema {
 
 @registerGLTFExtension("EXT_texture_webp", GLTFExtensionMode.CreateAndParse)
 class EXT_texture_webp extends GLTFExtensionParser {
-  private _supportWebP = false;
-
-  constructor() {
-    super();
-
-    // @ts-ignore
-    if (SystemInfo._isBrowser) {
-      const testCanvas = document.createElement("canvas");
-      testCanvas.width = testCanvas.height = 1;
-      this._supportWebP = testCanvas.toDataURL("image/webp").indexOf("data:image/webp") == 0;
-    } else {
-      this._supportWebP = false;
-    }
-  }
-
   override createAndParse(
     context: GLTFParserContext,
     schema: EXTWebPSchema,
@@ -35,15 +20,15 @@ class EXT_texture_webp extends GLTFExtensionParser {
   ): AssetPromise<Texture2D> {
     const webPIndex = schema.source;
     const { sampler, source: fallbackIndex = 0, name: textureName } = textureInfo;
-    const texture = GLTFTextureParser._parseTexture(
-      context,
-      this._supportWebP ? webPIndex : fallbackIndex,
-      textureIndex,
-      sampler,
-      textureName,
-      isSRGBColorSpace
-    );
-
-    return texture;
+    return SystemInfo._checkWebpSupported().then((supportWebP) => {
+      return GLTFTextureParser._parseTexture(
+        context,
+        supportWebP ? webPIndex : fallbackIndex,
+        textureIndex,
+        sampler,
+        textureName,
+        isSRGBColorSpace
+      );
+    });
   }
 }