Better gltf support

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

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { Scene, TransformNode, PBRMaterial, StandardMaterial, BackgroundMaterial } from "babylonjs";
+import { Scene } from "babylonjs";
 import { LineContainerComponent } from "../../lineContainerComponent";
-import { ButtonLineComponent } from "../../lines/buttonLineComponent";
-import { GLTFData } from "babylonjs-serializers";
 import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
 import { GlobalState } from "../../../globalState";
 
@@ -14,43 +12,16 @@ interface IGLTFComponentProps {
 export class GLTFComponent extends React.Component<IGLTFComponentProps> {
     constructor(props: IGLTFComponentProps) {
         super(props);
-    }
-
-    shouldExport(transformNode: TransformNode): boolean {
-
-        // No skybox
-        if (transformNode instanceof BABYLON.Mesh) {
-            if (transformNode.material) {
-                const material = transformNode.material as PBRMaterial | StandardMaterial | BackgroundMaterial;
-                const reflectionTexture = material.reflectionTexture;
-                if (reflectionTexture && reflectionTexture.coordinatesMode === BABYLON.Texture.SKYBOX_MODE) {
-                    return false;
-                }
-            }
-        }
-
-        return true;
-    }
-
-    exportGLTF() {
-        const scene = this.props.scene;
-
-        BABYLON.GLTF2Export.GLBAsync(scene, "scene", {
-            shouldExportTransformNode: (transformNode) => this.shouldExport(transformNode)
-        }).then((glb: GLTFData) => {
-            glb.downloadFiles();
-        });
-    }
+    }   
 
     render() {
         const extensionStates = this.props.globalState.glTFLoaderDefaults;
         return (
             <div>
-                <LineContainerComponent title="SCENE EXPORT">
-                    <ButtonLineComponent label="Export to GLB" onClick={() => this.exportGLTF()} />
-                </LineContainerComponent>
                 <LineContainerComponent title="GLTF EXTENSIONS">
-                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"]} onSelect={value => extensionStates["MSFT_lod"] = value}/>
+                    <CheckBoxLineComponent label="MSFT_lod" isSelected={() => extensionStates["MSFT_lod"].isEnabled} onSelect={value => extensionStates["MSFT_lod"].isEnabled = value}/>
+                </LineContainerComponent>
+                <LineContainerComponent title="GLTF VALIDATION RESULTS">
                 </LineContainerComponent>
             </div>
         );

inspector/src/components/actionTabs/tabs/toolsTabComponent.tsx

@@ -2,8 +2,9 @@ import * as React from "react";
 import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { LineContainerComponent } from "../lineContainerComponent";
 import { ButtonLineComponent } from "../lines/buttonLineComponent";
-import { VideoRecorder, Nullable } from "babylonjs";
+import { VideoRecorder, Nullable, TransformNode, PBRMaterial, StandardMaterial, BackgroundMaterial } from "babylonjs";
 import { GLTFComponent } from "./tools/gltfComponent";
+import { GLTFData } from "babylonjs-serializers";
 
 
 export class ToolsTabComponent extends PaneComponent {
@@ -55,6 +56,32 @@ export class ToolsTabComponent extends PaneComponent {
         this.setState({ tag: "Stop recording" })
     }
 
+    shouldExport(transformNode: TransformNode): boolean {
+
+        // No skybox
+        if (transformNode instanceof BABYLON.Mesh) {
+            if (transformNode.material) {
+                const material = transformNode.material as PBRMaterial | StandardMaterial | BackgroundMaterial;
+                const reflectionTexture = material.reflectionTexture;
+                if (reflectionTexture && reflectionTexture.coordinatesMode === BABYLON.Texture.SKYBOX_MODE) {
+                    return false;
+                }
+            }
+        }
+
+        return true;
+    }
+
+    exportGLTF() {
+        const scene = this.props.scene;
+
+        BABYLON.GLTF2Export.GLBAsync(scene, "scene", {
+            shouldExportTransformNode: (transformNode) => this.shouldExport(transformNode)
+        }).then((glb: GLTFData) => {
+            glb.downloadFiles();
+        });
+    }
+
     render() {
         const scene = this.props.scene;
 
@@ -68,6 +95,9 @@ export class ToolsTabComponent extends PaneComponent {
                     <ButtonLineComponent label="Screenshot" onClick={() => this.captureScreenshot()} />
                     <ButtonLineComponent label={this.state.tag} onClick={() => this.recordVideo()} />
                 </LineContainerComponent>   
+                <LineContainerComponent title="SCENE EXPORT">
+                    <ButtonLineComponent label="Export to GLB" onClick={() => this.exportGLTF()} />
+                </LineContainerComponent>
                 <GLTFComponent scene={scene} globalState={this.props.globalState!}/> 
             </div>
         );

inspector/src/components/globalState.ts

@@ -11,14 +11,16 @@ export class GlobalState {
     public onValidationResultsUpdatedObservable = new Observable<IGLTFValidationResults>();
 
     public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
-    public glTFLoaderDefaults: {[key: string]: boolean} = {};
+    public glTFLoaderDefaults: {[name: string]: {[key: string]: any}} = {};
 
     public prepareGLTFPlugin(loader: GLTFFileLoader) {
         loader.onExtensionLoadedObservable.add((extension: IGLTFLoaderExtension) => {
 
             var extensionState = this.glTFLoaderDefaults[extension.name];
             if (extensionState !== undefined) {
-                extension.enabled = extensionState;
+                for (const key in extensionState) {
+                    (extension as any)[key] = extensionState[key];
+                }
             }
         });
     }