Variants spec update (#8610)

* Variants spec update

* Fix dev code...

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

@@ -1062,7 +1062,7 @@ declare module BABYLON.GLTF2 {
 
     /** @hidden */
     interface IKHRMaterialVariants_Mapping {
-        tags: string[];
+        variants: string[];
         material: number;
     }
 

inspector/src/components/actionTabs/tabs/propertyGrids/variantsPropertyGridComponent.tsx

@@ -22,7 +22,7 @@ interface IVariantsPropertyGridComponentProps {
 
 export class VariantsPropertyGridComponent extends React.Component<IVariantsPropertyGridComponentProps> {
     // private _lastOne = 0;
-    private _selectedTags: string[] = [];
+    private _selectedVariants: string[] = [];
 
     constructor(props: IVariantsPropertyGridComponentProps) {
         super(props);
@@ -49,11 +49,11 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
             let aIsActive = lastPickedVariants && lastPickedVariants.indexOf ? lastPickedVariants.indexOf(a) > -1 : lastPickedVariants === a;
             let bIsActive = lastPickedVariants && lastPickedVariants.indexOf ? lastPickedVariants.indexOf(b) > -1 : lastPickedVariants === b;
 
-            if (!aIsActive && this._selectedTags.indexOf(a) > -1) {
+            if (!aIsActive && this._selectedVariants.indexOf(a) > -1) {
                 aIsActive = true;
             }
 
-            if (!bIsActive && this._selectedTags.indexOf(b) > -1) {
+            if (!bIsActive && this._selectedVariants.indexOf(b) > -1) {
                 bIsActive = true;
             }
 
@@ -65,7 +65,7 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
                 return -1;
             }
 
-            return 1
+            return 1;
         });
 
         // let options = variants.map((v: string, i: number) =>  {
@@ -80,45 +80,45 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
                     {
                         variants.map((v: string, i: number) => {
                             return (
-                                <CheckBoxLineComponent key={i} label={v} 
+                                <CheckBoxLineComponent key={i} label={v}
                                         isSelected={() => {
                                             if (lastPickedVariants) {
                                                 if (Object.prototype.toString.call(lastPickedVariants) === '[object String]') {
                                                     if (lastPickedVariants === v) {
-                                                        if (this._selectedTags.indexOf(v) === -1) {                                                            
-                                                            this._selectedTags.push(v);
+                                                        if (this._selectedVariants.indexOf(v) === -1) {
+                                                            this._selectedVariants.push(v);
                                                         }
                                                         return true;
                                                     }
                                                 } else {
                                                     let index = lastPickedVariants.indexOf(v);
                                                     if (index > -1) {
-                                                        return true
+                                                        return true;
                                                     }
                                                 }
                                             }
 
-                                            return this._selectedTags.indexOf(v) > -1;
+                                            return this._selectedVariants.indexOf(v) > -1;
                                         }}
                                         onSelect={(value) => {
                                             if (value) {
-                                                this._selectedTags.push(v);
+                                                this._selectedVariants.push(v);
                                                 extension.selectVariant(this.props.host, v);
                                             } else {
                                                 // Do something on extension?
-                                                let index = this._selectedTags.indexOf(v);
+                                                let index = this._selectedVariants.indexOf(v);
 
                                                 if (index > -1) {
-                                                    this._selectedTags.splice(index, 1);
+                                                    this._selectedVariants.splice(index, 1);
                                                 }
                                             }
                                         }}
                                     />
-                            )
+                            );
                         })
                     }
-                    {/* <OptionsLineComponent 
-                        label="Active variant" options={options} noDirectUpdate={true} 
+                    {/* <OptionsLineComponent
+                        label="Active variant" options={options} noDirectUpdate={true}
                         target={this.props.host}
                         propertyName=""
                         onSelect={(value: number) => {
@@ -146,7 +146,7 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
                     /> */}
                     <ButtonLineComponent label="Reset" onClick={() => {
                         extension.reset(this.props.host);
-                        this._selectedTags = [];
+                        this._selectedVariants = [];
                         this.forceUpdate();
                     }} />
                 </LineContainerComponent>

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

@@ -49,7 +49,7 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Gets the list of available variant tag names for this asset.
+     * Gets the list of available variant names for this asset.
      * @param rootMesh The glTF root mesh
      * @returns the list of all the variant names for this model
      */
@@ -63,7 +63,7 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Gets the list of available variant tag names for this asset.
+     * Gets the list of available variant names for this asset.
      * @param rootMesh The glTF root mesh
      * @returns the list of all the variant names for this model
      */
@@ -72,7 +72,7 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Select a variant given a variant tag name or a list of variant tag names.
+     * Select a variant given a variant name or a list of variant names.
      * @param rootMesh The glTF root mesh
      * @param variantName The variant name(s) to select.
      */
@@ -103,7 +103,7 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Select a variant given a variant tag name or a list of variant tag names.
+     * Select a variant given a variant name or a list of variant names.
      * @param rootMesh The glTF root mesh
      * @param variantName The variant name(s) to select.
      */
@@ -137,9 +137,9 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Gets the last selected variant tag name(s) or null if original.
+     * Gets the last selected variant name(s) or null if original.
      * @param rootMesh The glTF root mesh
-     * @returns The selected variant tag name(s).
+     * @returns The selected variant name(s).
      */
     public static GetLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]> {
         const extensionMetadata = this._GetExtensionMetadata(rootMesh);
@@ -151,9 +151,9 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
-     * Gets the last selected variant tag name(s) or null if original.
+     * Gets the last selected variant name(s) or null if original.
      * @param rootMesh The glTF root mesh
-     * @returns The selected variant tag name(s).
+     * @returns The selected variant name(s).
      */
     public getLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]> {
         return KHR_materials_variants.GetLastSelectedVariant(rootMesh);
@@ -181,14 +181,14 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
                     // Store the original material.
                     extensionMetadata.original.push({ mesh: babylonMesh, material: babylonMesh.material });
 
-                    // For each mapping, look at the tags and make a new entry for them.
+                    // 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 tag of mapping.tags) {
+                        for (const variant of mapping.variants) {
                             const material = ArrayItem.Get(`#/materials/`, this._loader.gltf.materials, mapping.material);
                             promises.push(this._loader._loadMaterialAsync(`#/materials/${mapping.material}`, material, babylonMesh, babylonDrawMode, (babylonMaterial) => {
-                                variants[tag] = variants[tag] || [];
-                                variants[tag].push({
+                                variants[variant] = variants[variant] || [];
+                                variants[variant].push({
                                     mesh: babylonMesh,
                                     material: babylonMaterial
                                 });