Make sure the inspector loads even without the loaders package

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

@@ -9,8 +9,8 @@ import { MessageLineComponent } from "../../lines/messageLineComponent";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { TextLineComponent } from "../../lines/textLineComponent";
 import { GLTFLoaderCoordinateSystemMode, GLTFLoaderAnimationStartMode } from "babylonjs-loaders/glTF/index";
-import { Nullable } from 'babylonjs/types';
-import { Observer } from 'babylonjs/Misc/observable';
+import { Nullable } from "babylonjs/types";
+import { Observer } from "babylonjs/Misc/observable";
 import { IGLTFValidationResults } from "babylonjs-gltf2interface";
 
 interface IGLTFComponentProps {
@@ -69,14 +69,8 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
 
         return (
             <LineContainerComponent globalState={this.props.globalState} title="GLTF VALIDATION" closed={!issues.numErrors && !issues.numWarnings}>
-                {
-                    issues.numErrors !== 0 &&
-                    <MessageLineComponent text="Your file has some validation issues" icon={faTimesCircle} color="Red" />
-                }
-                {
-                    issues.numErrors === 0 &&
-                    <MessageLineComponent text="Your file is a valid glTF file" icon={faCheck} color="Green" />
-                }
+                {issues.numErrors !== 0 && <MessageLineComponent text="Your file has some validation issues" icon={faTimesCircle} color="Red" />}
+                {issues.numErrors === 0 && <MessageLineComponent text="Your file is a valid glTF file" icon={faCheck} color="Green" />}
                 <TextLineComponent label="Errors" value={issues.numErrors.toString()} />
                 <TextLineComponent label="Warnings" value={issues.numWarnings.toString()} />
                 <TextLineComponent label="Infos" value={issues.numInfos.toString()} />
@@ -90,16 +84,29 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
         const extensionStates = this.props.globalState.glTFLoaderExtensionDefaults;
         const loaderState = this.props.globalState.glTFLoaderDefaults;
 
-        var animationStartMode = [
-            { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
-            { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
-            { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL }
-        ];
+        var animationStartMode =
+            (typeof GLTFLoaderAnimationStartMode !== "undefined"
+                ? [
+                      { label: "None", value: GLTFLoaderAnimationStartMode.NONE },
+                      { label: "First", value: GLTFLoaderAnimationStartMode.FIRST },
+                      { label: "ALL", value: GLTFLoaderAnimationStartMode.ALL },
+                  ]
+                : [
+                    { label: "None", value: 0 },
+                    { label: "First", value: 1 },
+                    { label: "ALL", value: 2 },
+                ]);
 
-        var coordinateSystemMode = [
-            { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
-            { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED }
-        ];
+        var coordinateSystemMode =
+            typeof GLTFLoaderCoordinateSystemMode !== "undefined"
+                ? [
+                      { label: "Auto", value: GLTFLoaderCoordinateSystemMode.AUTO },
+                      { label: "Right handed", value: GLTFLoaderCoordinateSystemMode.FORCE_RIGHT_HANDED },
+                  ]
+                : [
+                    { label: "Auto", value: 0 },
+                    { label: "Right handed", value: 1 },
+                ];
 
         return (
             <div>
@@ -116,35 +123,32 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
                     <MessageLineComponent text="You need to reload your file to see these changes" />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="GLTF EXTENSIONS" closed={true}>
-                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={(value) => extensionStates["MSFT_lod"].enabled = value} />
+                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].enabled} onSelect={(value) => (extensionStates["MSFT_lod"].enabled = value)} />
                     <FloatLineComponent label="Maximum LODs" target={extensionStates["MSFT_lod"]} propertyName="maxLODsToLoad" additionalClass="gltf-extension-property" isInteger={true} />
-                    <CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={(value) => extensionStates["MSFT_minecraftMesh"].enabled = value} />
-                    <CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={(value) => extensionStates["MSFT_sRGBFactors"].enabled = value} />
-                    <CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={(value) => extensionStates["MSFT_audio_emitter"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_xmp" isSelected={() => extensionStates["KHR_xmp"].enabled} onSelect={(value) => extensionStates["KHR_xmp"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={(value) => extensionStates["KHR_draco_mesh_compression"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_mesh_quantization" isSelected={() => extensionStates["KHR_mesh_quantization"].enabled} onSelect={(value) => extensionStates["KHR_mesh_quantization"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_pbrSpecularGloss..." isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={(value) => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={(value) => extensionStates["KHR_materials_clearcoat"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_ior" isSelected={() => extensionStates["KHR_materials_ior"].enabled} onSelect={(value) => extensionStates["KHR_materials_ior"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={(value) => extensionStates["KHR_materials_sheen"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={(value) => extensionStates["KHR_materials_specular"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={(value) => extensionStates["KHR_materials_unlit"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_variants" isSelected={() => extensionStates["KHR_materials_variants"].enabled} onSelect={(value) => extensionStates["KHR_materials_variants"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_materials_transmission" isSelected={() => extensionStates["KHR_materials_transmission"].enabled} onSelect={(value) => extensionStates["KHR_materials_transmission"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={(value) => extensionStates["KHR_lights_punctual"].enabled = value} />
-                    <CheckBoxLineComponent label="KHR_texture_basisu" isSelected={() => extensionStates["KHR_texture_basisu"].enabled} onSelect={(value) => extensionStates["KHR_texture_basisu"].enabled = value} />
-                    <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} />
+                    <CheckBoxLineComponent label="MSFT_minecraftMesh" isSelected={() => extensionStates["MSFT_minecraftMesh"].enabled} onSelect={(value) => (extensionStates["MSFT_minecraftMesh"].enabled = value)} />
+                    <CheckBoxLineComponent label="MSFT_sRGBFactors" isSelected={() => extensionStates["MSFT_sRGBFactors"].enabled} onSelect={(value) => (extensionStates["MSFT_sRGBFactors"].enabled = value)} />
+                    <CheckBoxLineComponent label="MSFT_audio_emitter" isSelected={() => extensionStates["MSFT_audio_emitter"].enabled} onSelect={(value) => (extensionStates["MSFT_audio_emitter"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_xmp" isSelected={() => extensionStates["KHR_xmp"].enabled} onSelect={(value) => (extensionStates["KHR_xmp"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_draco_mesh_compression" isSelected={() => extensionStates["KHR_draco_mesh_compression"].enabled} onSelect={(value) => (extensionStates["KHR_draco_mesh_compression"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_mesh_quantization" isSelected={() => extensionStates["KHR_mesh_quantization"].enabled} onSelect={(value) => (extensionStates["KHR_mesh_quantization"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_pbrSpecularGloss..." isSelected={() => extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled} onSelect={(value) => (extensionStates["KHR_materials_pbrSpecularGlossiness"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_clearcoat" isSelected={() => extensionStates["KHR_materials_clearcoat"].enabled} onSelect={(value) => (extensionStates["KHR_materials_clearcoat"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_ior" isSelected={() => extensionStates["KHR_materials_ior"].enabled} onSelect={(value) => (extensionStates["KHR_materials_ior"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_sheen" isSelected={() => extensionStates["KHR_materials_sheen"].enabled} onSelect={(value) => (extensionStates["KHR_materials_sheen"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_specular" isSelected={() => extensionStates["KHR_materials_specular"].enabled} onSelect={(value) => (extensionStates["KHR_materials_specular"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_unlit" isSelected={() => extensionStates["KHR_materials_unlit"].enabled} onSelect={(value) => (extensionStates["KHR_materials_unlit"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_variants" isSelected={() => extensionStates["KHR_materials_variants"].enabled} onSelect={(value) => (extensionStates["KHR_materials_variants"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_materials_transmission" isSelected={() => extensionStates["KHR_materials_transmission"].enabled} onSelect={(value) => (extensionStates["KHR_materials_transmission"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_lights_punctual" isSelected={() => extensionStates["KHR_lights_punctual"].enabled} onSelect={(value) => (extensionStates["KHR_lights_punctual"].enabled = value)} />
+                    <CheckBoxLineComponent label="KHR_texture_basisu" isSelected={() => extensionStates["KHR_texture_basisu"].enabled} onSelect={(value) => (extensionStates["KHR_texture_basisu"].enabled = value)} />
+                    <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>
-                {
-                    loaderState["validate"] && this.props.globalState.validationResults &&
-                    this.renderValidation()
-                }
+                {loaderState["validate"] && this.props.globalState.validationResults && this.renderValidation()}
             </div>
         );
     }
-}
+}

inspector/src/components/globalState.ts

@@ -1,4 +1,4 @@
-import { GLTFFileLoader, IGLTFLoaderExtension, GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode } from "babylonjs-loaders/glTF/index";
+import { GLTFLoaderAnimationStartMode, GLTFLoaderCoordinateSystemMode } from "babylonjs-loaders/glTF/index";
 import { IGLTFValidationResults } from "babylonjs-gltf2interface";
 
 import { Nullable } from "babylonjs/types";
@@ -10,8 +10,8 @@ import { Camera } from "babylonjs/Cameras/camera";
 import { LightGizmo } from "babylonjs/Gizmos/lightGizmo";
 import { CameraGizmo } from "babylonjs/Gizmos/cameraGizmo";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
-import { ReplayRecorder } from './replayRecorder';
-import { DataStorage } from 'babylonjs/Misc/dataStorage';
+import { ReplayRecorder } from "./replayRecorder";
+import { DataStorage } from "babylonjs/Misc/dataStorage";
 
 export class GlobalState {
     public onSelectionChangedObservable: Observable<any>;
@@ -26,45 +26,45 @@ export class GlobalState {
     public validationResults: Nullable<IGLTFValidationResults> = null;
     public onValidationResultsUpdatedObservable = new Observable<Nullable<IGLTFValidationResults>>();
 
-    public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
+    public onExtensionLoadedObservable: Observable<import("babylonjs-loaders/glTF/index").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 },
+        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,
+        animationStartMode: typeof GLTFLoaderAnimationStartMode !== 'undefined' ? GLTFLoaderAnimationStartMode.FIRST : 1 ,
+        capturePerformanceCounters: false,
+        compileMaterials: false,
+        compileShadowGenerators: false,
+        coordinateSystemMode: typeof GLTFLoaderCoordinateSystemMode !== 'undefined' ? GLTFLoaderCoordinateSystemMode.AUTO : 0,
+        loggingEnabled: false,
+        transparencyAsCoverage: false,
+        useClipPlane: false,
+        validate: true,
     };
 
-    public glTFLoaderExtensions: { [key: string]: IGLTFLoaderExtension } = {};
+    public glTFLoaderExtensions: { [key: string]: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension } = {};
 
     public blockMutationUpdates = false;
     public selectedLineContainerTitles: Array<string> = [];
@@ -107,12 +107,12 @@ export class GlobalState {
     public init(propertyChangedObservable: Observable<PropertyChangedEvent>) {
         this.onPropertyChangedObservable = propertyChangedObservable;
 
-        this.onNewSceneObservable.add(scene => {
+        this.onNewSceneObservable.add((scene) => {
             this.recorder.cancel();
         });
     }
 
-    public prepareGLTFPlugin(loader: GLTFFileLoader) {
+    public prepareGLTFPlugin(loader: import("babylonjs-loaders/glTF/index").GLTFFileLoader) {
         this.glTFLoaderExtensions = {};
         var loaderState = this.glTFLoaderDefaults;
         if (loaderState !== undefined) {
@@ -121,7 +121,7 @@ export class GlobalState {
             }
         }
 
-        loader.onExtensionLoadedObservable.add((extension: IGLTFLoaderExtension) => {
+        loader.onExtensionLoadedObservable.add((extension: import("babylonjs-loaders/glTF/index").IGLTFLoaderExtension) => {
             var extensionState = this.glTFLoaderExtensionDefaults[extension.name];
             if (extensionState !== undefined) {
                 for (const key in extensionState) {
@@ -153,11 +153,11 @@ export class GlobalState {
     public enableLightGizmo(light: Light, enable = true) {
         if (enable) {
             if (!light.reservedDataStore) {
-                light.reservedDataStore = {}
+                light.reservedDataStore = {};
             }
             if (!light.reservedDataStore.lightGizmo) {
                 light.reservedDataStore.lightGizmo = new LightGizmo();
-                this.lightGizmos.push(light.reservedDataStore.lightGizmo)
+                this.lightGizmos.push(light.reservedDataStore.lightGizmo);
                 light.reservedDataStore.lightGizmo.light = light;
                 light.reservedDataStore.lightGizmo.material.reservedDataStore = { hidden: true };
             }
@@ -172,11 +172,11 @@ export class GlobalState {
     public enableCameraGizmo(camera: Camera, enable = true) {
         if (enable) {
             if (!camera.reservedDataStore) {
-                camera.reservedDataStore = {}
+                camera.reservedDataStore = {};
             }
             if (!camera.reservedDataStore.cameraGizmo) {
                 camera.reservedDataStore.cameraGizmo = new CameraGizmo();
-                this.cameraGizmos.push(camera.reservedDataStore.cameraGizmo)
+                this.cameraGizmos.push(camera.reservedDataStore.cameraGizmo);
                 camera.reservedDataStore.cameraGizmo.camera = camera;
                 camera.reservedDataStore.cameraGizmo.material.reservedDataStore = { hidden: true };
             }
@@ -186,4 +186,4 @@ export class GlobalState {
             camera.reservedDataStore.cameraGizmo = null;
         }
     }
-}
+}

inspector/src/inspector.ts

@@ -13,7 +13,6 @@ import { SceneExplorerComponent } from "./components/sceneExplorer/sceneExplorer
 import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
 import { PropertyChangedEvent } from "./components/propertyChangedEvent";
 import { GlobalState } from "./components/globalState";
-import { GLTFFileLoader } from "babylonjs-loaders/glTF/index";
 
 interface IInternalInspectorOptions extends IInspectorOptions {
     popup: boolean;
@@ -335,7 +334,7 @@ export class Inspector {
     public static EarlyAttachToLoader() {
         if (!this._GlobalState.onPluginActivatedObserver) {
             this._GlobalState.onPluginActivatedObserver = SceneLoader.OnPluginActivatedObservable.add((rawLoader) => {
-                const loader = rawLoader as GLTFFileLoader;
+                const loader = rawLoader as import("babylonjs-loaders/glTF/index").GLTFFileLoader;
                 if (loader.name === "gltf") {
                     this._GlobalState.prepareGLTFPlugin(loader);
                 }