Merge branch 'newinspector' of https://github.com/BabylonJS/Babylon.js into newinspector

inspector/src/Inspector.ts

@@ -7,6 +7,8 @@ import { Scene, Observable, Observer, Nullable, IInspectorOptions } from "babylo
 import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
 import { PropertyChangedEvent } from "./components/propertyChangedEvent";
 import { GlobalState } from "./components/globalState";
+import { IGLTFLoaderExtension } from "babylonjs-gltf2interface";
+import {GLTFFileLoader} from "babylonjs-loaders"
 
 interface IInternalInspectorOptions extends IInspectorOptions {
     popup: boolean;
@@ -301,6 +303,23 @@ export class Inspector {
         if (!this._GlobalState.onSelectionChangeObservable) {
             this._GlobalState.onSelectionChangeObservable = this.OnSelectionChangeObservable;
         }
+        if (!this._GlobalState.onPluginActivatedObserver) {
+            this._GlobalState.onPluginActivatedObserver = BABYLON.SceneLoader.OnPluginActivatedObservable.add((loader: GLTFFileLoader) => {
+                if (loader.name === "gltf") {
+                    this._GlobalState.prepareGLTFPlugin(loader);
+    
+                    loader.onValidatedObservable.add((results: IGLTFValidationResults) => {
+                        this._GlobalState.validationResults = results;
+    
+                        this._GlobalState.onValidationResultsUpdatedObservable.notifyObservers(results);
+                    });
+
+                    loader.onExtensionLoadedObservable.add((extension: IGLTFLoaderExtension) => {
+
+                    });
+                }
+            });
+        }
 
         // Make sure it is not already opened
         if (this.IsVisible && options.original) {
@@ -456,5 +475,10 @@ export class Inspector {
 
         Inspector._OpenedPane = 0;
         this._Cleanup();
+
+        if (!this._GlobalState.onPluginActivatedObserver) {
+            BABYLON.SceneLoader.OnPluginActivatedObservable.remove(this._GlobalState.onPluginActivatedObserver);
+            this._GlobalState.onPluginActivatedObserver = null;
+        }
     }
 }

inspector/src/components/actionTabs/actionTabsComponent.tsx

@@ -54,7 +54,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
                     onPropertyChangedObservable={this.props.globalState.onPropertyChangedObservable} />
                 <DebugTabComponent title="Debug" icon={faBug} scene={this.props.scene} />
                 <StatisticsTabComponent title="Statistics" icon={faChartBar} scene={this.props.scene} />
-                <ToolsTabComponent title="Tools" icon={faWrench} scene={this.props.scene} />
+                <ToolsTabComponent title="Tools" icon={faWrench} scene={this.props.scene} globalState={this.props.globalState}/>
             </TabsComponent>
         )
     }

inspector/src/components/actionTabs/paneComponent.tsx

@@ -2,13 +2,15 @@ import * as React from "react";
 import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 import { Scene, Observable } from "babylonjs";
 import { PropertyChangedEvent } from "../propertyChangedEvent";
+import { GlobalState } from "components/globalState";
 
 export interface IPaneComponentProps {
     title: string,
     icon: IconDefinition, scene: Scene,
     selectedEntity?: any,
     onSelectionChangeObservable?: Observable<any>,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
+    globalState?: GlobalState
 }
 
 export class PaneComponent extends React.Component<IPaneComponentProps, { tag: any }> {

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Scene } from "babylonjs";
+import { LineContainerComponent } from "../../lineContainerComponent";
+import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
+import { GlobalState } from "../../../globalState";
+
+interface IGLTFComponentProps {
+    scene: Scene,
+    globalState: GlobalState
+}
+
+export class GLTFComponent extends React.Component<IGLTFComponentProps> {
+    constructor(props: IGLTFComponentProps) {
+        super(props);
+    }   
+
+    render() {
+        const extensionStates = this.props.globalState.glTFLoaderDefaults;
+        return (
+            <div>
+                <LineContainerComponent title="GLTF EXTENSIONS">
+                    <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,9 +2,11 @@ import * as React from "react";
 import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { LineContainerComponent } from "../lineContainerComponent";
 import { ButtonLineComponent } from "../lines/buttonLineComponent";
-import { VideoRecorder, TransformNode, PBRMaterial, StandardMaterial, BackgroundMaterial, 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 {
     private _videoRecorder: Nullable<VideoRecorder>;
 
@@ -92,10 +94,11 @@ export class ToolsTabComponent extends PaneComponent {
                 <LineContainerComponent title="CAPTURE">
                     <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>
-                <LineContainerComponent title="GLTF">
-                    <ButtonLineComponent label="Export" onClick={() => this.exportGLTF()} />
-                </LineContainerComponent>
+                <GLTFComponent scene={scene} globalState={this.props.globalState!}/> 
             </div>
         );
     }

inspector/src/components/globalState.ts

@@ -1,7 +1,27 @@
-import { Observable } from "babylonjs";
+import { Observable, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observer, Nullable } from "babylonjs";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
+import {IGLTFLoaderExtension, GLTFFileLoader} from "babylonjs-loaders"
 
 export class GlobalState {
     public onSelectionChangeObservable: Observable<string>;
     public onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    public onPluginActivatedObserver: Nullable<Observer<ISceneLoaderPlugin | ISceneLoaderPluginAsync>>;
+    
+    public validationResults: IGLTFValidationResults;
+    public onValidationResultsUpdatedObservable = new Observable<IGLTFValidationResults>();
+
+    public onExtensionLoadedObservable: Observable<IGLTFLoaderExtension>;
+    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) {
+                for (const key in extensionState) {
+                    (extension as any)[key] = extensionState[key];
+                }
+            }
+        });
+    }
 }