Fix glTF inspector issues

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

@@ -25,7 +25,7 @@ export class VariantsPropertyGridComponent extends React.Component<IVariantsProp
     }
 
     private _getVariantsExtension(): Nullable<KHR_materials_variants> {
-        return this.props.globalState?.glTFLoaderExtenstions["KHR_materials_variants"] as KHR_materials_variants;
+        return this.props.globalState?.glTFLoaderExtensions["KHR_materials_variants"] as KHR_materials_variants;
     }
 
     render() {

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

@@ -21,48 +21,6 @@ interface IGLTFComponentProps {
 export class GLTFComponent extends React.Component<IGLTFComponentProps> {
     private _onValidationResultsUpdatedObserver: Nullable<Observer<Nullable<IGLTFValidationResults>>> = null;
 
-    constructor(props: IGLTFComponentProps) {
-        super(props);
-
-        const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
-
-        extensionStates["MSFT_lod"] = extensionStates["MSFT_lod"] || { enabled: true, maxLODsToLoad: 10 };
-        extensionStates["MSFT_minecraftMesh"] = extensionStates["MSFT_minecraftMesh"] || { enabled: true };
-        extensionStates["MSFT_sRGBFactors"] = extensionStates["MSFT_sRGBFactors"] || { enabled: true };
-        extensionStates["MSFT_audio_emitter"] = extensionStates["MSFT_audio_emitter"] || { enabled: true };
-        extensionStates["KHR_xmp"] = extensionStates["KHR_xmp"] || { enabled: true };
-        extensionStates["KHR_draco_mesh_compression"] = extensionStates["KHR_draco_mesh_compression"] || { enabled: true };
-        extensionStates["KHR_mesh_quantization"] = extensionStates["KHR_mesh_quantization"] || { enabled: true };
-        extensionStates["KHR_materials_pbrSpecularGlossiness"] = extensionStates["KHR_materials_pbrSpecularGlossiness"] || { enabled: true };
-        extensionStates["KHR_materials_clearcoat"] = extensionStates["KHR_materials_clearcoat"] || { enabled: true };
-        extensionStates["KHR_materials_ior"] = extensionStates["KHR_materials_ior"] || { enabled: true };
-        extensionStates["KHR_materials_sheen"] = extensionStates["KHR_materials_sheen"] || { enabled: true };
-        extensionStates["KHR_materials_specular"] = extensionStates["KHR_materials_specular"] || { enabled: true };
-        extensionStates["KHR_materials_unlit"] = extensionStates["KHR_materials_unlit"] || { enabled: true };        
-        extensionStates["KHR_materials_variants"] = extensionStates["KHR_materials_variants"] || { enabled: true };
-        extensionStates["KHR_materials_transmission"] = extensionStates["KHR_materials_transmission"] || { enabled: true };
-        extensionStates["KHR_lights_punctual"] = extensionStates["KHR_lights_punctual"] || { enabled: true };
-        extensionStates["KHR_texture_basisu"] = extensionStates["KHR_texture_basisu"] || { enabled: true };
-        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;
-
-        if (loaderState["animationStartMode"] === undefined) {
-            loaderState["animationStartMode"] = GLTFLoaderAnimationStartMode.FIRST;
-        }
-        loaderState["capturePerformanceCounters"] = loaderState["capturePerformanceCounters"] || false;
-        loaderState["compileMaterials"] = loaderState["compileMaterials"] || false;
-        loaderState["compileShadowGenerators"] = loaderState["compileShadowGenerators"] || false;
-        loaderState["coordinateSystemMode"] = loaderState["coordinateSystemMode"] || GLTFLoaderCoordinateSystemMode.AUTO;
-        loaderState["loggingEnabled"] = loaderState["loggingEnabled"] || false;
-        loaderState["transparencyAsCoverage"] = loaderState["transparencyAsCoverage"] || false;
-        loaderState["useClipPlane"] = loaderState["useClipPlane"] || false;
-        loaderState["validate"] = loaderState["validate"] || true;
-    }
-
     openValidationDetails() {
         const validationResults = this.props.globalState.validationResults;
         const win = window.open("", "_blank");

inspector/src/components/globalState.ts

@@ -1,4 +1,4 @@
-import { GLTFFileLoader, IGLTFLoaderExtension } from "babylonjs-loaders/glTF/index";
+import { GLTFFileLoader, IGLTFLoaderExtension, GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode } from "babylonjs-loaders/glTF/index";
 import { IGLTFValidationResults } from "babylonjs-gltf2interface";
 
 import { Nullable } from "babylonjs/types";
@@ -27,13 +27,48 @@ export class GlobalState {
     public onValidationResultsUpdatedObservable = new Observable<Nullable<IGLTFValidationResults>>();
 
     public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
-    public glTFLoaderExtensionDefaults: { [name: string]: { [key: string]: any } } = {};
-    public glTFLoaderDefaults: { [key: string]: any } = { "validate": true };
-    public glTFLoaderExtenstions: { [key: string]: IGLTFLoaderExtension } = { };
+
+    public glTFLoaderExtensionDefaults: { [name: string]: { [key: string]: any } } = {
+        "MSFT_lod": { enabled: true, maxLODsToLoad: 10 },
+        "MSFT_minecraftMesh": { enabled: true },
+        "MSFT_sRGBFactors": { enabled: true },
+        "MSFT_audio_emitter": { enabled: true },
+        "KHR_xmp": { enabled: true },
+        "KHR_draco_mesh_compression": { enabled: true },
+        "KHR_mesh_quantization": { enabled: true },
+        "KHR_materials_pbrSpecularGlossiness": { enabled: true },
+        "KHR_materials_clearcoat": { enabled: true },
+        "KHR_materials_ior": { enabled: true },
+        "KHR_materials_sheen": { enabled: true },
+        "KHR_materials_specular": { enabled: true },
+        "KHR_materials_unlit": { enabled: true },
+        "KHR_materials_variants": { enabled: true },
+        "KHR_materials_transmission": { enabled: true },
+        "KHR_lights_punctual": { enabled: true },
+        "KHR_texture_basisu": { enabled: true },
+        "KHR_texture_transform": { enabled: true },
+        "EXT_lights_image_based": { enabled: true },
+        "EXT_mesh_gpu_instancing": { enabled: true },
+        "EXT_texture_webp": { enabled: true },
+    };
+
+    public glTFLoaderDefaults: { [key: string]: any } = {
+        "animationStartMode": GLTFLoaderAnimationStartMode.FIRST,
+        "capturePerformanceCounters": false,
+        "compileMaterials": false,
+        "compileShadowGenerators": false,
+        "coordinateSystemMode": GLTFLoaderCoordinateSystemMode.AUTO,
+        "loggingEnabled": false,
+        "transparencyAsCoverage": false,
+        "useClipPlane": false,
+        "validate": true,
+    };
+
+    public glTFLoaderExtensions: { [key: string]: IGLTFLoaderExtension } = {};
 
     public blockMutationUpdates = false;
-    public selectedLineContainerTitles:Array<string> = [];    
-    public selectedLineContainerTitlesNoFocus:Array<string> = [];
+    public selectedLineContainerTitles: Array<string> = [];
+    public selectedLineContainerTitlesNoFocus: Array<string> = [];
 
     public recorder = new ReplayRecorder();
 
@@ -78,7 +113,7 @@ export class GlobalState {
     }
 
     public prepareGLTFPlugin(loader: GLTFFileLoader) {
-        this.glTFLoaderExtenstions = { };
+        this.glTFLoaderExtensions = {};
         var loaderState = this.glTFLoaderDefaults;
         if (loaderState !== undefined) {
             for (const key in loaderState) {
@@ -94,7 +129,7 @@ export class GlobalState {
                 }
             }
 
-            this.glTFLoaderExtenstions[extension.name] = extension;
+            this.glTFLoaderExtensions[extension.name] = extension;
         });
 
         if (this.validationResults) {
@@ -124,7 +159,7 @@ export class GlobalState {
                 light.reservedDataStore.lightGizmo = new LightGizmo();
                 this.lightGizmos.push(light.reservedDataStore.lightGizmo)
                 light.reservedDataStore.lightGizmo.light = light;
-                light.reservedDataStore.lightGizmo.material.reservedDataStore = {hidden: true};
+                light.reservedDataStore.lightGizmo.material.reservedDataStore = { hidden: true };
             }
         } else if (light.reservedDataStore && light.reservedDataStore.lightGizmo) {
             this.lightGizmos.splice(this.lightGizmos.indexOf(light.reservedDataStore.lightGizmo), 1);
@@ -143,7 +178,7 @@ export class GlobalState {
                 camera.reservedDataStore.cameraGizmo = new CameraGizmo();
                 this.cameraGizmos.push(camera.reservedDataStore.cameraGizmo)
                 camera.reservedDataStore.cameraGizmo.camera = camera;
-                camera.reservedDataStore.cameraGizmo.material.reservedDataStore = {hidden: true};
+                camera.reservedDataStore.cameraGizmo.material.reservedDataStore = { hidden: true };
             }
         } else if (camera.reservedDataStore && camera.reservedDataStore.cameraGizmo) {
             this.cameraGizmos.splice(this.cameraGizmos.indexOf(camera.reservedDataStore.cameraGizmo), 1);