Merge pull request #554 from KhronosGroup/feature/webp_support

Add support for EXT_texture_webp
KhronosGroup · Jul 10, 2024 · 6c8fbf4 · 6c8fbf4
2 parents ff16909 + 7222490
commit 6c8fbf4
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ Features
 - [x] [KHR_materials_dispersion](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion)
 - [x] [KHR_mesh_quantization](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_mesh_quantization)
 - [x] [KHR_texture_basisu](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_basisu)
+- [x] [EXT_texture_webp](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Vendor/EXT_texture_webp)
 - [x] [KHR_texture_transform](https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_texture_transform)
 - [x] [KHR_xmp_json_ld](https://github.com/KhronosGroup/glTF/pull/1893)
 

diff --git a/source/Renderer/webgl.js b/source/Renderer/webgl.js
@@ -84,6 +84,7 @@ class gltfWebGl
             // upload images that are not directly loaded as GPU resource
             if (image.mimeType === ImageMimeType.PNG ||
                 image.mimeType === ImageMimeType.JPEG ||
+                image.mimeType === ImageMimeType.WEBP ||
                 image.mimeType === ImageMimeType.HDR)
             {
                 // the check `GL.SRGB8_ALPHA8 === undefined` is needed as at the moment node-gles does not define the full format enum

diff --git a/source/gltf/gltf.js b/source/gltf/gltf.js
@@ -22,6 +22,7 @@ const allowedExtensions = [
     "KHR_draco_mesh_compression",
     "KHR_texture_basisu",
     "KHR_texture_transform",
+    "EXT_texture_webp",
     "KHR_lights_punctual",
     "KHR_lights_image_based",
     "KHR_materials_variants",

diff --git a/source/gltf/image.js b/source/gltf/image.js
@@ -85,6 +85,10 @@ class gltfImage extends GltfObject
         {
             this.mimeType = ImageMimeType.PNG;
         }
+        else if(extension == "webp" )
+        {
+            this.mimeType = ImageMimeType.WEBP;
+        }
         else
         {
             console.warn("MimeType not defined");
@@ -116,7 +120,7 @@ class gltfImage extends GltfObject
                 console.warn('Loading of ktx images failed: KtxDecoder not initalized');
             }
         }
-        else if (typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG))
+        else if (typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG || this.mimeType === ImageMimeType.WEBP))
         {
             this.image = await gltfImage.loadHTMLImage(this.uri).catch( (error) => {
                 console.error(error);
@@ -160,7 +164,7 @@ class gltfImage extends GltfObject
                 console.warn('Loading of ktx images failed: KtxDecoder not initalized');
             }
         }
-        else if(typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG))
+        else if(typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG || this.mimeType === ImageMimeType.WEBP))
         {
             const blob = new Blob([array], { "type": this.mimeType });
             const objectURL = URL.createObjectURL(blob);
@@ -221,7 +225,7 @@ class gltfImage extends GltfObject
                 console.warn('Loading of ktx images failed: KtxDecoder not initalized');
             }
         }
-        else if (typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG))
+        else if (typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG || this.mimeType === ImageMimeType.WEBP))
         {
             const imageData = await AsyncFileReader.readAsDataURL(foundFile[1]).catch( () => {
                 console.error("Could not load image with FileReader");

diff --git a/source/gltf/image_mime_type.js b/source/gltf/image_mime_type.js
@@ -1,3 +1,3 @@
-const ImageMimeType = {JPEG: "image/jpeg", PNG: "image/png", HDR: "image/vnd.radiance", KTX2: "image/ktx2", GLTEXTURE: "image/texture"};
+const ImageMimeType = {JPEG: "image/jpeg", PNG: "image/png", WEBP: "image/webp", HDR: "image/vnd.radiance", KTX2: "image/ktx2", GLTEXTURE: "image/texture"};
 
 export { ImageMimeType };
diff --git a/source/gltf/texture.js b/source/gltf/texture.js
@@ -32,6 +32,12 @@ class gltfTexture extends GltfObject
     fromJson(jsonTexture)
     {
         super.fromJson(jsonTexture);
+        if (jsonTexture.extensions !== undefined &&
+            jsonTexture.extensions.EXT_texture_webp !== undefined &&
+            jsonTexture.extensions.EXT_texture_webp.source !== undefined)
+        {
+            this.source = jsonTexture.extensions.EXT_texture_webp.source;
+        }
         if (jsonTexture.extensions !== undefined &&
             jsonTexture.extensions.KHR_texture_basisu !== undefined &&
             jsonTexture.extensions.KHR_texture_basisu.source !== undefined)