Update KHR_materials_variants to latest spec (#8739)

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

@@ -1061,14 +1061,21 @@ declare module BABYLON.GLTF2 {
      */
 
     /** @hidden */
-    interface IKHRMaterialVariants_Mapping {
-        variants: string[];
-        material: number;
+    interface IKHRMaterialVariants_Mapping extends IProperty {
+        mapping: Array<{
+            variants: number[];
+            material: number;
+        }>;
     }
 
     /** @hidden */
-    interface IKHRMaterialVariants {
-        mapping: IKHRMaterialVariants_Mapping[];
+    interface IKHRMaterialVariants_Variant extends IProperty {
+        name: string;
+    }
+
+    /** @hidden */
+    interface IKHRMaterialVariants_Variants extends IChildRootProperty {
+        variants: Array<IKHRMaterialVariants_Variant>;
     }
 
     /**

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

@@ -6,7 +6,7 @@ import { Material } from 'babylonjs/Materials/material';
 import { Mesh } from 'babylonjs/Meshes/mesh';
 import { AbstractMesh } from 'babylonjs/Meshes/abstractMesh';
 import { INode, IMeshPrimitive, IMesh } from '../glTFLoaderInterfaces';
-import { IKHRMaterialVariants } from 'babylonjs-gltf2interface';
+import { IKHRMaterialVariants_Mapping, IKHRMaterialVariants_Variant, IKHRMaterialVariants_Variants } from 'babylonjs-gltf2interface';
 
 const NAME = "KHR_materials_variants";
 
@@ -37,6 +37,8 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
 
     private _loader: GLTFLoader;
 
+    private _variants?: Array<IKHRMaterialVariants_Variant>;
+
     /** @hidden */
     constructor(loader: GLTFLoader) {
         this._loader = loader;
@@ -164,8 +166,17 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /** @hidden */
+    public onLoading(): void {
+        const extensions = this._loader.gltf.extensions;
+        if (extensions && extensions[this.name]) {
+            const extension = extensions[this.name] as IKHRMaterialVariants_Variants;
+            this._variants = extension.variants;
+        }
+    }
+
+    /** @hidden */
     public _loadMeshPrimitiveAsync(context: string, name: string, node: INode, mesh: IMesh, primitive: IMeshPrimitive, assign: (babylonMesh: AbstractMesh) => void): Nullable<Promise<AbstractMesh>> {
-        return GLTFLoader.LoadExtensionAsync<IKHRMaterialVariants, AbstractMesh>(context, primitive, this.name, (extensionContext, extension) => {
+        return GLTFLoader.LoadExtensionAsync<IKHRMaterialVariants_Mapping, AbstractMesh>(context, primitive, this.name, (extensionContext, extension) => {
             const promises = new Array<Promise<any>>();
             promises.push(this._loader._loadMeshPrimitiveAsync(context, name, node, mesh, primitive, (babylonMesh) => {
                 assign(babylonMesh);
@@ -184,11 +195,12 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
                     // For each mapping, look at the variants and make a new entry for them.
                     const variants = extensionMetadata.variants;
                     for (const mapping of extension.mapping) {
-                        for (const variant of mapping.variants) {
+                        for (const variantIndex of mapping.variants) {
+                            const variant = ArrayItem.Get(`${extensionContext}/mapping/${variantIndex}`, this._variants, variantIndex);
                             const material = ArrayItem.Get(`#/materials/`, this._loader.gltf.materials, mapping.material);
                             promises.push(this._loader._loadMaterialAsync(`#/materials/${mapping.material}`, material, babylonMesh, babylonDrawMode, (babylonMaterial) => {
-                                variants[variant] = variants[variant] || [];
-                                variants[variant].push({
+                                variants[variant.name] = variants[variant.name] || [];
+                                variants[variant.name].push({
                                     mesh: babylonMesh,
                                     material: babylonMaterial
                                 });