Variants without depencencies (#8500)

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import { Observable } from "babylonjs/Misc/observable";
+import { Nullable } from 'babylonjs/types';
 
 import { PropertyChangedEvent } from "../../../propertyChangedEvent";
 import { LineContainerComponent } from "../../lineContainerComponent";
@@ -9,7 +10,8 @@ import { GlobalState } from "../../../globalState";
 // import { OptionsLineComponent } from '../../lines/optionsLineComponent';
 import { ButtonLineComponent } from '../../lines/buttonLineComponent';
 import { CheckBoxLineComponent } from '../../lines/checkBoxLineComponent';
-import { KHR_materials_variants } from 'babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_variants';
+
+declare type KHR_materials_variants = import("babylonjs-loaders/glTF/2.0/Extensions/KHR_materials_variants").KHR_materials_variants;
 
 interface IVariantsPropertyGridComponentProps {
     globalState: GlobalState;
@@ -26,14 +28,22 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
         super(props);
     }
 
+    private _getVariantsExtension(): Nullable<KHR_materials_variants> {
+        return this.props.globalState?.glTFLoaderExtenstions["KHR_materials_variants"] as KHR_materials_variants;
+    }
+
     render() {
-        let variants: string[] = KHR_materials_variants.GetAvailableVariants(this.props.host);
+        const extension = this._getVariantsExtension();
+        if (!extension) {
+            return null;
+        }
+        let variants: string[] = extension.getAvailableVariants(this.props.host);
 
         if (!variants || variants.length === 0) {
             return null;
         }
 
-        let lastPickedVariants = KHR_materials_variants.GetLastSelectedVariant(this.props.host);
+        let lastPickedVariants = extension.getLastSelectedVariant(this.props.host);
 
         variants.sort((a, b) => {
             let aIsActive = lastPickedVariants && lastPickedVariants.indexOf ? lastPickedVariants.indexOf(a) > -1 : lastPickedVariants === a;
@@ -93,7 +103,7 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
                                         onSelect={(value) => {
                                             if (value) {
                                                 this._selectedTags.push(v);
-                                                KHR_materials_variants.SelectVariant(this.props.host, v);
+                                                extension.selectVariant(this.props.host, v);
                                             } else {
                                                 // Do something on extension?
                                                 let index = this._selectedTags.indexOf(v);
@@ -135,7 +145,7 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
                         }}
                     /> */}
                     <ButtonLineComponent label="Reset" onClick={() => {
-                        KHR_materials_variants.Reset(this.props.host);
+                        extension.reset(this.props.host);
                         this._selectedTags = [];
                         this.forceUpdate();
                     }} />

inspector/src/components/globalState.ts

@@ -29,6 +29,7 @@ export class GlobalState {
     public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
     public glTFLoaderExtensionDefaults: { [name: string]: { [key: string]: any } } = {};
     public glTFLoaderDefaults: { [key: string]: any } = { "validate": true };
+    public glTFLoaderExtenstions: { [key: string]: IGLTFLoaderExtension } = { };
 
     public blockMutationUpdates = false;
     public selectedLineContainerTitles:Array<string> = [];    
@@ -85,6 +86,7 @@ export class GlobalState {
     }
 
     public prepareGLTFPlugin(loader: GLTFFileLoader) {
+        this.glTFLoaderExtenstions = { };
         var loaderState = this.glTFLoaderDefaults;
         if (loaderState !== undefined) {
             for (const key in loaderState) {
@@ -99,6 +101,8 @@ export class GlobalState {
                     (extension as any)[key] = extensionState[key];
                 }
             }
+
+            this.glTFLoaderExtenstions[extension.name] = extension;
         });
 
         if (this.validationResults) {

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

@@ -63,6 +63,15 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
+     * Gets the list of available variant tag names for this asset.
+     * @param rootMesh The glTF root mesh
+     * @returns the list of all the variant names for this model
+     */
+    public getAvailableVariants(rootMesh: Mesh): string[] {
+        return KHR_materials_variants.GetAvailableVariants(rootMesh);
+    }
+
+    /**
      * Select a variant given a variant tag name or a list of variant tag names.
      * @param rootMesh The glTF root mesh
      * @param variantName The variant name(s) to select.
@@ -94,6 +103,15 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
+     * Select a variant given a variant tag name or a list of variant tag names.
+     * @param rootMesh The glTF root mesh
+     * @param variantName The variant name(s) to select.
+     */
+    public selectVariant(rootMesh: Mesh, variantName: string | string[]): void {
+        return KHR_materials_variants.SelectVariant(rootMesh, variantName);
+    }
+
+    /**
      * Reset back to the original before selecting a variant.
      * @param rootMesh The glTF root mesh
      */
@@ -111,6 +129,14 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
     }
 
     /**
+     * Reset back to the original before selecting a variant.
+     * @param rootMesh The glTF root mesh
+     */
+    public reset(rootMesh: Mesh): void {
+        return KHR_materials_variants.Reset(rootMesh);
+    }
+
+    /**
      * Gets the last selected variant tag name(s) or null if original.
      * @param rootMesh The glTF root mesh
      * @returns The selected variant tag name(s).
@@ -124,6 +150,15 @@ export class KHR_materials_variants implements IGLTFLoaderExtension {
         return extensionMetadata.lastSelected;
     }
 
+    /**
+     * Gets the last selected variant tag name(s) or null if original.
+     * @param rootMesh The glTF root mesh
+     * @returns The selected variant tag name(s).
+     */
+    public getLastSelectedVariant(rootMesh: Mesh): Nullable<string | string[]> {
+        return KHR_materials_variants.GetLastSelectedVariant(rootMesh);
+    }
+
     private static _GetExtensionMetadata(rootMesh: Mesh): Nullable<IExtensionMetadata> {
         return rootMesh?.metadata?.gltf?.[NAME] || null;
     }