Fix #8614 (#8642)

* Fix #8614

* Add missing inspector states

* Fix interface

* typo

* Update EXT_texture_webp.ts

.vscode/launch.json

@@ -306,6 +306,19 @@
             ]
         },
         {
+            "name": "Launch Build Validation (Edge) - Direct",
+            "type": "edge",
+            "version": "dev",
+            "request": "launch",
+            "url": "http://localhost:1338/tests/validation/index.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis"
+            ]
+        },
+        {
             "name": "Launch memory checks (Chrome)",
             "type": "chrome",
             "request": "launch",

dist/preview release/glTF2Interface/babylon.glTF2Interface.d.ts

@@ -1082,6 +1082,15 @@ declare module BABYLON.GLTF2 {
     }
 
     /**
+     * Interfaces from the EXT_texture_webp extension
+     */
+
+    /** @hidden */
+    interface IEXTTextureWebP {
+        source: number;
+    }
+
+    /**
      * Interfaces from the KHR_texture_transform extension
      */
 

inspector/src/components/actionTabs/tabs/tools/gltfComponent.tsx

@@ -46,6 +46,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
         extensionStates["KHR_texture_transform"] = extensionStates["KHR_texture_transform"] || { enabled: true };
         extensionStates["EXT_lights_image_based"] = extensionStates["EXT_lights_image_based"] || { enabled: true };
         extensionStates["EXT_mesh_gpu_instancing"] = extensionStates["EXT_mesh_gpu_instancing"] || { enabled: true };
+        extensionStates["EXT_texture_webp"] = extensionStates["EXT_texture_webp"] || { enabled: true };
 
         const loaderState = this.props.globalState.glTFLoaderDefaults;
 
@@ -178,6 +179,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
                     <CheckBoxLineComponent label="KHR_texture_transform" isSelected={() => extensionStates["KHR_texture_transform"].enabled} onSelect={(value) => extensionStates["KHR_texture_transform"].enabled = value} />
                     <CheckBoxLineComponent label="EXT_lights_image_based" isSelected={() => extensionStates["EXT_lights_image_based"].enabled} onSelect={(value) => extensionStates["EXT_lights_image_based"].enabled = value} />
                     <CheckBoxLineComponent label="EXT_mesh_gpu_instancing" isSelected={() => extensionStates["EXT_mesh_gpu_instancing"].enabled} onSelect={(value) => extensionStates["EXT_mesh_gpu_instancing"].enabled = value} />
+                    <CheckBoxLineComponent label="EXT_texture_webp" isSelected={() => extensionStates["EXT_texture_webp"].enabled} onSelect={(value) => extensionStates["EXT_texture_webp"].enabled = value} />
                     <MessageLineComponent text="You need to reload your file to see these changes" />
                 </LineContainerComponent>
                 {

loaders/src/glTF/2.0/Extensions/EXT_texture_webp.ts

@@ -0,0 +1,45 @@
+import { IGLTFLoaderExtension } from "../glTFLoaderExtension";
+import { GLTFLoader, ArrayItem } from "../glTFLoader";
+import { ITexture } from "../glTFLoaderInterfaces";
+import { BaseTexture } from "babylonjs/Materials/Textures/baseTexture";
+import { Nullable } from "babylonjs/types";
+import { IEXTTextureWebP } from 'babylonjs-gltf2interface';
+
+const NAME = "EXT_texture_webp";
+
+/**
+ * [Specification](https://github.com/KhronosGroup/glTF/blob/master/extensions/2.0/Vendor/EXT_texture_webp/)
+ */
+export class EXT_texture_webp implements IGLTFLoaderExtension {
+    /** The name of this extension. */
+    public readonly name = NAME;
+
+    /** Defines whether this extension is enabled. */
+    public enabled: boolean;
+
+    private _loader: GLTFLoader;
+
+    /** @hidden */
+    constructor(loader: GLTFLoader) {
+        this._loader = loader;
+        this.enabled = loader.isExtensionUsed(NAME);
+    }
+
+    /** @hidden */
+    public dispose() {
+        delete this._loader;
+    }
+
+    /** @hidden */
+    public _loadTextureAsync(context: string, texture: ITexture, assign: (babylonTexture: BaseTexture) => void): Nullable<Promise<BaseTexture>> {
+        return GLTFLoader.LoadExtensionAsync<IEXTTextureWebP, BaseTexture>(context, texture, this.name, (extensionContext, extension) => {
+            const sampler = (texture.sampler == undefined ? GLTFLoader.DefaultSampler : ArrayItem.Get(`${context}/sampler`, this._loader.gltf.samplers, texture.sampler));
+            const image = ArrayItem.Get(`${extensionContext}/source`, this._loader.gltf.images, extension.source);
+            return this._loader._createTextureAsync(context, sampler, image, (babylonTexture) => {
+                assign(babylonTexture);
+            });
+        });
+    }
+}
+
+GLTFLoader.RegisterExtension(NAME, (loader) => new EXT_texture_webp(loader));

loaders/src/glTF/2.0/Extensions/index.ts

@@ -1,5 +1,6 @@
 export * from "./EXT_lights_image_based";
 export * from "./EXT_mesh_gpu_instancing";
+export * from "./EXT_texture_webp";
 export * from "./KHR_draco_mesh_compression";
 export * from "./KHR_lights_punctual";
 export * from "./KHR_materials_pbrSpecularGlossiness";

tests/validation/config.json

@@ -1,6 +1,11 @@
 {
     "root": "https://cdn.babylonjs.com",
-    "tests": [     
+    "tests": [    
+        {
+            "title": "EXT_texture_webp",
+            "playgroundId": "#LSAUH2#2",            
+            "referenceImage": "webp.png"
+        }, 
         {
             "title": "CSGVertColor",
             "playgroundId": "#R0H1IX#0",