Final merge before integration to master

inspector/src/Inspector.ts

@@ -7,7 +7,6 @@ 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 {
@@ -184,7 +183,7 @@ export class Inspector {
         }
     }
 
-    private static _CreateEmbedHost(scene: Scene, options: IInternalInspectorOptions, parentControl: Nullable<HTMLElement>, onSelectionChangeObservable: Observable<string>) {
+    private static _CreateEmbedHost(scene: Scene, options: IInternalInspectorOptions, parentControl: Nullable<HTMLElement>, onSelectionChangedObservable: Observable<string>) {
 
         // Prepare the inspector host
         if (parentControl) {
@@ -288,16 +287,6 @@ export class Inspector {
             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) => {
-
-                    });
                 }
             });
         }
@@ -320,8 +309,8 @@ export class Inspector {
         if (!this._GlobalState.onPropertyChangedObservable) {
             this._GlobalState.onPropertyChangedObservable = this.OnPropertyChangedObservable;
         }
-        if (!this._GlobalState.onSelectionChangeObservable) {
-            this._GlobalState.onSelectionChangeObservable = this.OnSelectionChangeObservable;
+        if (!this._GlobalState.onSelectionChangedObservable) {
+            this._GlobalState.onSelectionChangedObservable = this.OnSelectionChangeObservable;
         }
 
         // Make sure it is not already opened

inspector/src/components/actionTabs/actionTabsComponent.tsx

@@ -25,36 +25,58 @@ interface IActionTabsComponentProps {
 
 export class ActionTabsComponent extends React.Component<IActionTabsComponentProps, { selectedEntity: any, selectedIndex: number }> {
     private _onSelectionChangeObserver: Nullable<Observer<any>>;
+    private _onTabChangedObserver: Nullable<Observer<any>>;
     private _once = true;
 
     constructor(props: IActionTabsComponentProps) {
         super(props);
 
-        this.state = { selectedEntity: null, selectedIndex: 0 }
+        let initialIndex = 0;
+
+        const validationResutls = this.props.globalState.validationResults;
+        if (validationResutls) {
+            if (validationResutls.issues.numErrors || validationResutls.issues.numWarnings) {
+                initialIndex = 3;
+            }
+        }
+
+        this.state = { selectedEntity: null, selectedIndex: initialIndex }
     }
 
     componentWillMount() {
-        this._onSelectionChangeObserver = this.props.globalState.onSelectionChangeObservable.add((entity) => {
+        this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
             this.setState({ selectedEntity: entity, selectedIndex: 0 });
         });
+
+        this._onTabChangedObserver = this.props.globalState.onTabChangedObservable.add(index => {
+            this.setState({ selectedIndex: index });
+        });
     }
 
     componentWillUnmount() {
         if (this._onSelectionChangeObserver) {
-            this.props.globalState.onSelectionChangeObservable.remove(this._onSelectionChangeObserver);
+            this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangeObserver);
         }
+
+        if (this._onTabChangedObserver) {
+            this.props.globalState.onTabChangedObservable.remove(this._onTabChangedObserver);
+        }
+    }
+
+    changeSelectedTab(index: number) {
+        this.props.globalState.onTabChangedObservable.notifyObservers(index);
     }
 
     renderContent() {
         return (
-            <TabsComponent selectedIndex={this.state.selectedIndex} onSelectedIndexChange={(value) => this.setState({ selectedIndex: value })}>
+            <TabsComponent selectedIndex={this.state.selectedIndex} onSelectedIndexChange={(value) => this.changeSelectedTab(value)}>
                 <PropertyGridTabComponent
                     title="Properties" icon={faFileAlt} scene={this.props.scene} selectedEntity={this.state.selectedEntity}
-                    onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable}
+                    onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable}
                     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} globalState={this.props.globalState}/>
+                <ToolsTabComponent title="Tools" icon={faWrench} scene={this.props.scene} globalState={this.props.globalState} />
             </TabsComponent>
         )
     }
@@ -79,7 +101,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
                 <div id="actionTabs">
                     {
                         !this.props.noHeader &&
-                        <HeaderComponent title="INSPECTOR" handleBack={true} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} />
+                        <HeaderComponent title="INSPECTOR" handleBack={true} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
                     }
                     {this.renderContent()}
                 </div>
@@ -102,7 +124,7 @@ export class ActionTabsComponent extends React.Component<IActionTabsComponentPro
             <Resizable id="actionTabs" minWidth={300} maxWidth={600} size={{ height: "100%" }} minHeight="100%" enable={{ top: false, right: false, bottom: false, left: true, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}>
                 {
                     !this.props.noHeader &&
-                    <HeaderComponent title="INSPECTOR" handleBack={true} noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} />
+                    <HeaderComponent title="INSPECTOR" handleBack={true} noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
                 }
                 {this.renderContent()}
             </Resizable>

inspector/src/components/actionTabs/lines/floatLineComponent.tsx

@@ -30,7 +30,7 @@ export class FloatLineComponent extends React.Component<IFloatLineComponentProps
         }
 
         const newValue = nextProps.target[nextProps.propertyName];
-        if (newValue !== nextState.value) {
+        if (newValue && newValue !== nextState.value) {
             nextState.value = newValue.toFixed(3);
             return true;
         }

inspector/src/components/actionTabs/lines/optionsLineComponent.tsx

@@ -12,6 +12,7 @@ interface IOptionsLineComponentProps {
     target: any,
     propertyName: string,
     options: ListLineOption[],
+    noDirectUpdate?: boolean,
     onSelect?: (value: number) => void,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>
 }
@@ -57,7 +58,9 @@ export class OptionsLineComponent extends React.Component<IOptionsLineComponentP
         this._localChange = true;
 
         const store = this.state.value;
-        this.props.target[this.props.propertyName] = value;
+        if (!this.props.noDirectUpdate) {
+            this.props.target[this.props.propertyName] = value;
+        }
         this.setState({ value: value });
 
         this.raiseOnPropertyChanged(value, store);

inspector/src/components/actionTabs/lines/textureLinkLineComponent.tsx

@@ -7,9 +7,9 @@ import { faWrench } from '@fortawesome/free-solid-svg-icons';
 export interface ITextureLinkLineComponentProps {
     label: string,
     texture: Nullable<BaseTexture>,
-    material: Material,
-    onSelectionChangeObservable?: Observable<any>,
-    onDebugSelectionChangeObservable: Observable<BaseTexture>
+    material?: Material,
+    onSelectionChangedObservable?: Observable<any>,
+    onDebugSelectionChangeObservable?: Observable<BaseTexture>
 }
 
 export class TextureLinkLineComponent extends React.Component<ITextureLinkLineComponentProps, { isDebugSelected: boolean }> {
@@ -21,11 +21,14 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         const material = this.props.material;
         const texture = this.props.texture;
 
-        this.state = { isDebugSelected: material.metadata && material.metadata.debugTexture === texture };
+        this.state = { isDebugSelected: material && material.metadata && material.metadata.debugTexture === texture };
     }
 
 
     componentWillMount() {
+        if (!this.props.onDebugSelectionChangeObservable) {
+            return;
+        }
         this._onDebugSelectionChangeObserver = this.props.onDebugSelectionChangeObservable.add((texture) => {
             if (this.props.texture !== texture) {
                 this.setState({ isDebugSelected: false });
@@ -34,7 +37,7 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
     }
 
     componentWillUnmount() {
-        if (this._onDebugSelectionChangeObserver) {
+        if (this.props.onDebugSelectionChangeObservable && this._onDebugSelectionChangeObserver) {
             this.props.onDebugSelectionChangeObservable.remove(this._onDebugSelectionChangeObserver);
         }
     }
@@ -42,6 +45,10 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
     debugTexture() {
         const texture = this.props.texture;
         const material = this.props.material;
+
+        if (!material) {
+            return;
+        }
         const scene = material.getScene();
 
         if (material.metadata && material.metadata.debugTexture === texture) {
@@ -87,7 +94,9 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         material.metadata.debugTexture = texture;
         material.metadata.debugMaterial = debugMaterial;
 
-        this.props.onDebugSelectionChangeObservable.notifyObservers(texture!);
+        if (this.props.onDebugSelectionChangeObservable) {
+            this.props.onDebugSelectionChangeObservable.notifyObservers(texture!);
+        }
 
         if (needToDisposeCheckMaterial) {
             checkMaterial.dispose();
@@ -97,12 +106,12 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
     }
 
     onLink() {
-        if (!this.props.onSelectionChangeObservable) {
+        if (!this.props.onSelectionChangedObservable) {
             return;
         }
 
         const texture = this.props.texture;
-        this.props.onSelectionChangeObservable.notifyObservers(texture!);
+        this.props.onSelectionChangedObservable.notifyObservers(texture!);
     }
 
     render() {
@@ -114,7 +123,7 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         return (
             <div className="textureLinkLine">
                 {
-                    !texture.isCube &&
+                    !texture.isCube && this.props.material &&
                     <div className={this.state.isDebugSelected ? "debug selected" : "debug"} onClick={() => this.debugTexture()} title="Render as main texture">
                         <FontAwesomeIcon icon={faWrench} />
                     </div>

inspector/src/components/actionTabs/paneComponent.tsx

@@ -8,7 +8,7 @@ export interface IPaneComponentProps {
     title: string,
     icon: IconDefinition, scene: Scene,
     selectedEntity?: any,
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
     globalState?: GlobalState
 }

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

@@ -3,7 +3,7 @@ import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { Mesh, TransformNode, Material, StandardMaterial, Texture, PBRMaterial, Scene, FreeCamera, ArcRotateCamera, HemisphericLight, PointLight, BackgroundMaterial } from "babylonjs";
 import { MaterialPropertyGridComponent } from "./propertyGrids/materials/materialPropertyGridComponent";
 import { StandardMaterialPropertyGridComponent } from "./propertyGrids/materials/standardMaterialPropertyGridComponent";
-import { TexturePropertyGridComponent } from "./propertyGrids/texturePropertyGridComponent";
+import { TexturePropertyGridComponent } from "./propertyGrids/materials/texturePropertyGridComponent";
 import { PBRMaterialPropertyGridComponent } from "./propertyGrids/materials/pbrMaterialPropertyGridComponent";
 import { ScenePropertyGridComponent } from "./propertyGrids/scenePropertyGridComponent";
 import { HemisphericLightPropertyGridComponent } from "./propertyGrids/lights/hemisphericLightPropertyGridComponent";
@@ -45,7 +45,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const mesh = entity as Mesh;
                 if (mesh.getTotalVertices() > 0) {
                     return (<MeshPropertyGridComponent mesh={mesh}
-                        onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                        onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                         onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
                 }
             }
@@ -83,7 +83,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const material = entity as StandardMaterial;
                 return (<StandardMaterialPropertyGridComponent
                     material={material}
-                    onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                    onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
@@ -91,7 +91,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const material = entity as PBRMaterial;
                 return (<PBRMaterialPropertyGridComponent
                     material={material}
-                    onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                    onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
@@ -99,7 +99,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const material = entity as BackgroundMaterial;
                 return (<BackgroundMaterialPropertyGridComponent
                     material={material}
-                    onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                    onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
@@ -134,7 +134,9 @@ export class PropertyGridTabComponent extends PaneComponent {
             }
         } else if (entity.transformNodes) {
             const scene = entity as Scene;
-            return (<ScenePropertyGridComponent scene={scene} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            return (<ScenePropertyGridComponent scene={scene}
+                onSelectionChangedObservable={this.props.onSelectionChangedObservable}
+                onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
         }
 
         return null;

inspector/src/components/actionTabs/tabs/propertyGrids/cameras/propertyGridTabComponent.tsx

@@ -3,7 +3,7 @@ import { PaneComponent, IPaneComponentProps } from "../../../paneComponent";
 import { Mesh, TransformNode, Material, StandardMaterial, Texture, PBRMaterial, Scene, FreeCamera, ArcRotateCamera, HemisphericLight, PointLight } from "babylonjs";
 import { MaterialPropertyGridComponent } from "../materials/materialPropertyGridComponent";
 import { StandardMaterialPropertyGridComponent } from "../materials/standardMaterialPropertyGridComponent";
-import { TexturePropertyGridComponent } from "../texturePropertyGridComponent";
+import { TexturePropertyGridComponent } from "../materials/texturePropertyGridComponent";
 import { PBRMaterialPropertyGridComponent } from "../materials/pbrMaterialPropertyGridComponent";
 import { ScenePropertyGridComponent } from "../scenePropertyGridComponent";
 import { HemisphericLightPropertyGridComponent } from "../lights/hemisphericLightPropertyGridComponent";
@@ -32,7 +32,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const mesh = entity as Mesh;
                 if (mesh.getTotalVertices() > 0) {
                     return (<MeshPropertyGridComponent mesh={mesh}
-                        onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                        onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                         onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
                 }
             }
@@ -70,7 +70,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const material = entity as StandardMaterial;
                 return (<StandardMaterialPropertyGridComponent
                     material={material}
-                    onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                    onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
@@ -78,7 +78,7 @@ export class PropertyGridTabComponent extends PaneComponent {
                 const material = entity as PBRMaterial;
                 return (<PBRMaterialPropertyGridComponent
                     material={material}
-                    onSelectionChangeObservable={this.props.onSelectionChangeObservable}
+                    onSelectionChangedObservable={this.props.onSelectionChangedObservable}
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 

inspector/src/components/actionTabs/tabs/propertyGrids/materials/backgroundMaterialPropertyGridComponent.tsx

@@ -10,7 +10,7 @@ import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponen
 
 interface IBackgroundMaterialPropertyGridComponentProps {
     material: BackgroundMaterial,
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>
 }
 
@@ -26,8 +26,8 @@ export class BackgroundMaterialPropertyGridComponent extends React.Component<IBa
 
         return (
             <LineContainerComponent title="TEXTURES">
-                <TextureLinkLineComponent label="Diffuse" texture={material.diffuseTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Diffuse" texture={material.diffuseTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 {
                     material.reflectionTexture &&
                     <SliderLineComponent label="Reflection blur" target={material} propertyName="reflectionBlur" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />

inspector/src/components/actionTabs/tabs/propertyGrids/materials/commonMaterialPropertyGridComponent.tsx

@@ -61,7 +61,7 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
                 <LineContainerComponent title="TRANSPARENCY">
                     <SliderLineComponent label="Alpha" target={material} propertyName="alpha" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
-                        (material as any).transparencyMode &&
+                        (material as any).transparencyMode !== undefined &&
                         <OptionsLineComponent label="Transparency mode" options={transparencyModeOptions} target={material} propertyName="transparencyMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ transparencyMode: value })} />
                     }
                     <OptionsLineComponent label="Alpha mode" options={alphaModeOptions} target={material} propertyName="alphaMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ alphaMode: value })} />

inspector/src/components/actionTabs/tabs/propertyGrids/materials/pbrMaterialPropertyGridComponent.tsx

@@ -10,7 +10,7 @@ import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponen
 
 interface IPBRMaterialPropertyGridComponentProps {
     material: PBRMaterial,
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>
 }
 
@@ -30,16 +30,16 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
 
         return (
             <LineContainerComponent title="TEXTURES">
-                <TextureLinkLineComponent label="Albedo" texture={material.albedoTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Metallic" texture={material.metallicTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Micro-surface" texture={material.microSurfaceTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Ambient" texture={material.ambientTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Albedo" texture={material.albedoTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Metallic" texture={material.metallicTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Micro-surface" texture={material.microSurfaceTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Ambient" texture={material.ambientTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
             </LineContainerComponent>
         )
     }

inspector/src/components/actionTabs/tabs/propertyGrids/materials/standardMaterialPropertyGridComponent.tsx

@@ -9,7 +9,7 @@ import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponen
 
 interface IStandardMaterialPropertyGridComponentProps {
     material: StandardMaterial,
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>
 }
 
@@ -29,23 +29,23 @@ export class StandardMaterialPropertyGridComponent extends React.Component<IStan
 
         return (
             <LineContainerComponent title="TEXTURES">
-                <TextureLinkLineComponent label="Diffuse" texture={material.diffuseTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Diffuse" texture={material.diffuseTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 {
                     material.diffuseTexture &&
                     <SliderLineComponent label="Diffuse level" target={material.diffuseTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
-                <TextureLinkLineComponent label="Specular" texture={material.specularTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Specular" texture={material.specularTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
                 {
                     material.bumpTexture &&
                     <SliderLineComponent label="Bump level" target={material.bumpTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
-                <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Ambient" texture={material.ambientTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
-                <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} material={material} onSelectionChangeObservable={this.props.onSelectionChangeObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Ambient" texture={material.ambientTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
+                <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
             </LineContainerComponent>
         )
     }

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

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { Texture, Observable } from "babylonjs";
-import { PropertyChangedEvent } from "../../../propertyChangedEvent";
-import { LineContainerComponent } from "../../lineContainerComponent";
-import { SliderLineComponent } from "../../lines/sliderLineComponent";
-import { TextLineComponent } from "../../lines/textLineComponent";
-import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
-import { TextureLineComponent } from "../../lines/textureLineComponent";
-import { FloatLineComponent } from "../../lines/floatLineComponent";
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { SliderLineComponent } from "../../../lines/sliderLineComponent";
+import { TextLineComponent } from "../../../lines/textLineComponent";
+import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
+import { TextureLineComponent } from "../../../lines/textureLineComponent";
+import { FloatLineComponent } from "../../../lines/floatLineComponent";
 import { AdvancedDynamicTexture } from "babylonjs-gui";
+import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
 
 interface ITexturePropertyGridComponentProps {
     texture: Texture,
@@ -23,6 +24,12 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
         const texture = this.props.texture;
         const adtTexture = texture instanceof AdvancedDynamicTexture ? texture as AdvancedDynamicTexture : null;
 
+        var samplingMode = [
+            { label: "Nearest", value: BABYLON.Texture.NEAREST_NEAREST },
+            { label: "Nearest & linear mip", value: BABYLON.Texture.NEAREST_LINEAR },
+            { label: "Linear", value: BABYLON.Texture.LINEAR_LINEAR_MIPLINEAR },
+        ];
+
         return (
             <div className="pane">
                 <LineContainerComponent title="PREVIEW">
@@ -35,6 +42,7 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                     <TextLineComponent label="Is render target" value={texture.isRenderTarget ? "Yes" : "No"} />
                     <TextLineComponent label="Has mipmaps" value={!texture.noMipmap ? "Yes" : "No"} />
                     <SliderLineComponent label="UV set" target={texture} propertyName="coordinatesIndex" minimum={0} maximum={3} step={1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    <OptionsLineComponent label="Sampling" options={samplingMode} target={texture} noDirectUpdate={true} propertyName="samplingMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => texture.updateSamplingMode(value)} />
                 </LineContainerComponent>
                 {
                     adtTexture &&

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -10,7 +10,7 @@ import { QuaternionLineComponent } from "../../../lines/quaternionLineComponent"
 
 interface IMeshPropertyGridComponentProps {
     mesh: Mesh,
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>
 }
 
@@ -98,12 +98,12 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
     }
 
     onMaterialLink() {
-        if (!this.props.onSelectionChangeObservable) {
+        if (!this.props.onSelectionChangedObservable) {
             return;
         }
 
         const mesh = this.props.mesh;
-        this.props.onSelectionChangeObservable.notifyObservers(mesh.material)
+        this.props.onSelectionChangedObservable.notifyObservers(mesh.material)
     }
 
     render() {

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

@@ -7,10 +7,12 @@ import { Color3LineComponent } from "../../lines/color3LineComponent";
 import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
 import { FogPropertyGridComponent } from "./fogPropertyGridComponent";
 import { FileButtonLineComponent } from "../../lines/fileButtonLineComponent";
+import { TextureLinkLineComponent } from "../../lines/textureLinkLineComponent";
 
 interface IScenePropertyGridComponentProps {
     scene: Scene,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
+    onSelectionChangedObservable?: Observable<any>
 }
 
 export class ScenePropertyGridComponent extends React.Component<IScenePropertyGridComponentProps> {
@@ -84,6 +86,10 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
                 <LineContainerComponent title="ENVIRONMENT">
                     <Color3LineComponent label="Ambient color" target={scene} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Environment texture (IBL)" isSelected={() => scene.environmentTexture != null} onSelect={() => this.switchIBL()} />
+                    {
+                        scene.environmentTexture &&
+                        <TextureLinkLineComponent label="Env. texture" texture={scene.environmentTexture} onSelectionChangedObservable={this.props.onSelectionChangedObservable} />
+                    }
                     <FileButtonLineComponent label="Update environment texture" onClick={(file) => this.updateEnvironmentTexture(file)} />
                     <FogPropertyGridComponent scene={scene} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>

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

@@ -73,7 +73,7 @@ export class GLTFComponent extends React.Component<IGLTFComponentProps> {
         const issues = validationResults.issues;
 
         return (
-            <LineContainerComponent title="GLTF VALIDATION" closed={true}>
+            <LineContainerComponent title="GLTF VALIDATION" closed={!issues.numErrors && !issues.numWarnings}>
                 <BooleanLineComponent label={this.prepareText("error", issues.numErrors)} value={issues.numErrors === 0} />
                 <BooleanLineComponent label={this.prepareText("warning", issues.numWarnings)} value={issues.numWarnings === 0} />
                 <BooleanLineComponent label={this.prepareText("info", issues.numInfos)} value={issues.numInfos === 0} />

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { LineContainerComponent } from "../lineContainerComponent";
 import { ButtonLineComponent } from "../lines/buttonLineComponent";
-import { VideoRecorder, Nullable, TransformNode, PBRMaterial, StandardMaterial, BackgroundMaterial } from "babylonjs";
+import { VideoRecorder, Nullable, TransformNode, PBRMaterial, StandardMaterial, BackgroundMaterial, EnvironmentTextureTools, CubeTexture } from "babylonjs";
 import { GLTFComponent } from "./tools/gltfComponent";
 import { GLTFData } from "babylonjs-serializers";
 
@@ -82,6 +82,27 @@ export class ToolsTabComponent extends PaneComponent {
         });
     }
 
+    exportBabylon() {
+        const scene = this.props.scene;
+
+        var strScene = JSON.stringify(BABYLON.SceneSerializer.Serialize(scene));
+        var blob = new Blob([strScene], { type: "octet/stream" });
+
+        BABYLON.Tools.Download(blob, "scene.babylon")
+    }
+
+    createEnvTexture() {
+        const scene = this.props.scene;
+        EnvironmentTextureTools.CreateEnvTextureAsync(scene.environmentTexture as CubeTexture)
+            .then((buffer: ArrayBuffer) => {
+                var blob = new Blob([buffer], { type: "octet/stream" });
+                BABYLON.Tools.Download(blob, "environment.env");
+            })
+            .catch((error: any) => {
+                console.error(error);
+            });
+    }
+
     render() {
         const scene = this.props.scene;
 
@@ -94,11 +115,16 @@ export class ToolsTabComponent extends PaneComponent {
                 <LineContainerComponent title="CAPTURE">
                     <ButtonLineComponent label="Screenshot" onClick={() => this.captureScreenshot()} />
                     <ButtonLineComponent label={this.state.tag} onClick={() => this.recordVideo()} />
-                </LineContainerComponent>   
+                </LineContainerComponent>
                 <LineContainerComponent title="SCENE EXPORT">
                     <ButtonLineComponent label="Export to GLB" onClick={() => this.exportGLTF()} />
+                    <ButtonLineComponent label="Export to Babylon" onClick={() => this.exportBabylon()} />
+                    {
+                        !scene.getEngine().premultipliedAlpha && scene.environmentTexture && scene.activeCamera &&
+                        <ButtonLineComponent label="Generate .env texture" onClick={() => this.createEnvTexture()} />
+                    }
                 </LineContainerComponent>
-                <GLTFComponent scene={scene} globalState={this.props.globalState!}/> 
+                <GLTFComponent scene={scene} globalState={this.props.globalState!} />
             </div>
         );
     }

inspector/src/components/embedHost/embedHostComponent.tsx

@@ -66,7 +66,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
         if (this.props.popupMode) {
             return (
                 <div id="embed">
-                    <HeaderComponent title="INSPECTOR" handleBack={true} onClose={() => this.props.onClose()} onPopup={() => this.props.onPopup()} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} />
+                    <HeaderComponent title="INSPECTOR" handleBack={true} onClose={() => this.props.onClose()} onPopup={() => this.props.onPopup()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
                     {this.renderContent()}
                 </div>
             );
@@ -86,7 +86,7 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
 
         return (
             <Resizable id="embed" minWidth={300} maxWidth={600} size={{ height: "100%" }} minHeight="100%" enable={{ top: false, right: false, bottom: false, left: true, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }}>
-                <HeaderComponent title="INSPECTOR" handleBack={true} onClose={() => this.props.onClose()} onPopup={() => this.props.onPopup()} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} />
+                <HeaderComponent title="INSPECTOR" handleBack={true} onClose={() => this.props.onClose()} onPopup={() => this.props.onPopup()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
                 {this.renderContent()}
             </Resizable>
         );

inspector/src/components/globalState.ts

@@ -1,10 +1,12 @@
 import { Observable, ISceneLoaderPlugin, ISceneLoaderPluginAsync, Observer, Nullable } from "babylonjs";
 import { PropertyChangedEvent } from "./propertyChangedEvent";
 import { IGLTFLoaderExtension, GLTFFileLoader } from "babylonjs-loaders"
+import { } from "babylonjs-gltf2interface"
 
 export class GlobalState {
-    public onSelectionChangeObservable: Observable<string>;
+    public onSelectionChangedObservable: Observable<string>;
     public onPropertyChangedObservable: Observable<PropertyChangedEvent>;
+    public onTabChangedObservable = new Observable<number>();
     public onPluginActivatedObserver: Nullable<Observer<ISceneLoaderPlugin | ISceneLoaderPluginAsync>>;
 
     public validationResults: IGLTFValidationResults;
@@ -31,5 +33,14 @@ export class GlobalState {
                 }
             }
         });
+
+        loader.onValidatedObservable.add((results: IGLTFValidationResults) => {
+            this.validationResults = results;
+            this.onValidationResultsUpdatedObservable.notifyObservers(results);
+
+            if (results.issues.numErrors || results.issues.numWarnings) {
+                this.onTabChangedObservable.notifyObservers(3);
+            }
+        });
     }
 }

inspector/src/components/headerComponent.tsx

@@ -10,7 +10,7 @@ export interface IHeaderComponentProps {
     noCommands?: boolean,
     onPopup: () => void,
     onClose: () => void,
-    onSelectionChangeObservable?: Observable<any>
+    onSelectionChangedObservable?: Observable<any>
 }
 
 export class HeaderComponent extends React.Component<IHeaderComponentProps, { isBackVisible: boolean }> {
@@ -23,11 +23,11 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps, { is
     }
 
     componentWillMount() {
-        if (!this.props.onSelectionChangeObservable) {
+        if (!this.props.onSelectionChangedObservable) {
             return;
         }
 
-        this._onSelectionChangeObserver = this.props.onSelectionChangeObservable.add((entity) => {
+        this._onSelectionChangeObserver = this.props.onSelectionChangedObservable.add((entity) => {
             if (this._backStack.length === 0 || entity !== this._backStack[this._backStack.length - 1]) {
                 this._backStack.push(entity);
                 this.setState({ isBackVisible: this._backStack.length > 1 });
@@ -37,7 +37,7 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps, { is
 
     componentWillUnmount() {
         if (this._onSelectionChangeObserver) {
-            this.props.onSelectionChangeObservable!.remove(this._onSelectionChangeObserver);
+            this.props.onSelectionChangedObservable!.remove(this._onSelectionChangeObserver);
         }
     }
 
@@ -45,8 +45,8 @@ export class HeaderComponent extends React.Component<IHeaderComponentProps, { is
         this._backStack.pop(); // remove current
         var entity = this._backStack[this._backStack.length - 1];
 
-        if (this.props.onSelectionChangeObservable) {
-            this.props.onSelectionChangeObservable.notifyObservers(entity);
+        if (this.props.onSelectionChangedObservable) {
+            this.props.onSelectionChangedObservable.notifyObservers(entity);
         }
 
         this.setState({ isBackVisible: this._backStack.length > 1 });

inspector/src/components/sceneExplorer/entities/gui/advancedDynamicTextureTreeItemComponent.tsx

@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 interface IAdvancedDynamicTextureTreeItemComponentProps {
     texture: AdvancedDynamicTexture,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onClick: () => void
 }
 
@@ -41,10 +41,10 @@ export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAd
 
         if (!this.state.isInPickingMode) {
             this._onControlPickedObserver = adt.onControlPickedObservable.add((control) => {
-                if (!this.props.onSelectionChangeObservable) {
+                if (!this.props.onSelectionChangedObservable) {
                     return;
                 }
-                this.props.onSelectionChangeObservable.notifyObservers(control);
+                this.props.onSelectionChangedObservable.notifyObservers(control);
             });
         }
 

inspector/src/components/sceneExplorer/entities/sceneTreeItemComponent.tsx

@@ -9,7 +9,7 @@ interface ISceneTreeItemComponentProps {
     onRefresh: () => void,
     selectedEntity?: any,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangeObservable?: Observable<any>
+    onSelectionChangedObservable?: Observable<any>
 }
 
 export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, { isSelected: boolean, isInPickingMode: boolean, gizmoMode: number }> {
@@ -49,12 +49,12 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
     }
 
     componentWillMount() {
-        if (!this.props.onSelectionChangeObservable) {
+        if (!this.props.onSelectionChangedObservable) {
             return;
         }
 
         const scene = this.props.scene;
-        this._onSelectionChangeObserver = this.props.onSelectionChangeObservable.add((entity) => {
+        this._onSelectionChangeObserver = this.props.onSelectionChangedObservable.add((entity) => {
             if (scene.metadata && scene.metadata.gizmoManager) {
                 const manager: GizmoManager = scene.metadata.gizmoManager;
 
@@ -75,17 +75,17 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
             this._onPointerObserver = null;
         }
 
-        if (this._onSelectionChangeObserver && this.props.onSelectionChangeObservable) {
-            this.props.onSelectionChangeObservable.remove(this._onSelectionChangeObserver);
+        if (this._onSelectionChangeObserver && this.props.onSelectionChangedObservable) {
+            this.props.onSelectionChangedObservable.remove(this._onSelectionChangeObserver);
         }
     }
 
     onSelect() {
-        if (!this.props.onSelectionChangeObservable) {
+        if (!this.props.onSelectionChangedObservable) {
             return;
         }
         const scene = this.props.scene;
-        this.props.onSelectionChangeObservable.notifyObservers(scene);
+        this.props.onSelectionChangedObservable.notifyObservers(scene);
     }
 
     onPickingMode() {
@@ -101,8 +101,8 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                 const pickPosition = scene.unTranslatedPointer;
                 const pickInfo = scene.pick(pickPosition.x, pickPosition.y, mesh => mesh.isEnabled() && mesh.isVisible && mesh.getTotalVertices() > 0);
 
-                if (pickInfo && pickInfo.hit && this.props.onSelectionChangeObservable) {
-                    this.props.onSelectionChangeObservable.notifyObservers(pickInfo.pickedMesh);
+                if (pickInfo && pickInfo.hit && this.props.onSelectionChangedObservable) {
+                    this.props.onSelectionChangedObservable.notifyObservers(pickInfo.pickedMesh);
                 }
             }, BABYLON.PointerEventTypes.POINTERTAP)
         }

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -52,7 +52,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
     }
 
     componentWillMount() {
-        this._onSelectionChangeObserver = this.props.globalState.onSelectionChangeObservable.add((entity) => {
+        this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
             if (this.state.selectedEntity !== entity) {
                 this.setState({ selectedEntity: entity });
             }
@@ -61,7 +61,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
 
     componentWillUnmount() {
         if (this._onSelectionChangeObserver) {
-            this.props.globalState.onSelectionChangeObservable.remove(this._onSelectionChangeObserver);
+            this.props.globalState.onSelectionChangedObservable.remove(this._onSelectionChangeObserver);
         }
 
         if (this._onNewSceneAddedObserver) {
@@ -86,13 +86,13 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                 data.found = true;
                 if (!goNext) {
                     if (data.previousOne) {
-                        this.props.globalState.onSelectionChangeObservable.notifyObservers(data.previousOne);
+                        this.props.globalState.onSelectionChangedObservable.notifyObservers(data.previousOne);
                     }
                     return true;
                 }
             } else {
                 if (data.found) {
-                    this.props.globalState.onSelectionChangeObservable.notifyObservers(item);
+                    this.props.globalState.onSelectionChangedObservable.notifyObservers(item);
                     return true;
                 }
                 data.previousOne = item;
@@ -168,13 +168,13 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         return (
             <div id="tree">
                 <SceneExplorerFilterComponent onFilter={(filter) => this.filterContent(filter)} />
-                <SceneTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} scene={scene} onRefresh={() => this.forceUpdate()} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} />
-                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.rootNodes} label="Nodes" offset={1} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} filter={this.state.filter} />
-                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.materials} label="Materials" offset={1} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} filter={this.state.filter} />
-                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={textures} label="Textures" offset={1} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} filter={this.state.filter} />
+                <SceneTreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} scene={scene} onRefresh={() => this.forceUpdate()} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} />
+                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.rootNodes} label="Nodes" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
+                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.materials} label="Materials" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
+                <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={textures} label="Textures" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
                 {
                     guiElements && guiElements.length > 0 &&
-                    <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} onSelectionChangeObservable={this.props.globalState.onSelectionChangeObservable} filter={this.state.filter} />
+                    <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={guiElements} label="GUI" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
                 }
             </div>
         )

inspector/src/components/sceneExplorer/treeItemComponent.tsx

@@ -54,7 +54,7 @@ export interface ITreeItemComponentProps {
     label: string,
     offset: number,
     filter: Nullable<string>,
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     entity?: any,
     selectedEntity: any,
     extensibilityGroups?: IExplorerExtensibilityGroup[]
@@ -136,7 +136,7 @@ export class TreeItemComponent extends React.Component<ITreeItemComponentProps,
                 {
                     sortedItems.map(item => {
                         return (
-                            <TreeItemSelectableComponent extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId} offset={this.props.offset + 2} selectedEntity={this.props.selectedEntity} entity={item} onSelectionChangeObservable={this.props.onSelectionChangeObservable} filter={this.props.filter} />
+                            <TreeItemSelectableComponent extensibilityGroups={this.props.extensibilityGroups} key={item.uniqueId} offset={this.props.offset + 2} selectedEntity={this.props.selectedEntity} entity={item} onSelectionChangedObservable={this.props.onSelectionChangedObservable} filter={this.props.filter} />
                         );
                     })
                 }

inspector/src/components/sceneExplorer/treeItemSelectableComponent.tsx

@@ -11,7 +11,7 @@ export interface ITreeItemSelectableComponentProps {
     selectedEntity?: any,
     offset: number,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     filter: Nullable<string>
 }
 
@@ -72,12 +72,12 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
     }
 
     onSelect() {
-        if (!this.props.onSelectionChangeObservable) {
+        if (!this.props.onSelectionChangedObservable) {
             return;
         }
         this._wasSelected = true;
         const entity = this.props.entity;
-        this.props.onSelectionChangeObservable.notifyObservers(entity);
+        this.props.onSelectionChangedObservable.notifyObservers(entity);
     }
 
     renderChildren() {
@@ -91,7 +91,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
             children.map(item => {
 
                 return (
-                    <TreeItemSelectableComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.props.selectedEntity} key={item.uniqueId} offset={this.props.offset + 2} entity={item} onSelectionChangeObservable={this.props.onSelectionChangeObservable} filter={this.props.filter} />
+                    <TreeItemSelectableComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.props.selectedEntity} key={item.uniqueId} offset={this.props.offset + 2} entity={item} onSelectionChangedObservable={this.props.onSelectionChangedObservable} filter={this.props.filter} />
                 );
             })
         )
@@ -143,7 +143,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
                             {chevron}
                         </div>
                     }
-                    <TreeItemSpecializedComponent extensibilityGroups={this.props.extensibilityGroups} label={entity.name} entity={entity} onClick={() => this.onSelect()} onSelectionChangeObservable={this.props.onSelectionChangeObservable} />
+                    <TreeItemSpecializedComponent extensibilityGroups={this.props.extensibilityGroups} label={entity.name} entity={entity} onClick={() => this.onSelect()} onSelectionChangedObservable={this.props.onSelectionChangedObservable} />
                 </div>
                 {
                     this.renderChildren()

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -16,7 +16,7 @@ interface ITreeItemSpecializedComponentProps {
     label: string,
     entity?: any,
     extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangeObservable?: Observable<any>,
+    onSelectionChangedObservable?: Observable<any>,
     onClick?: () => void
 }
 
@@ -65,7 +65,7 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
             }
 
             if (className === "AdvancedDynamicTexture") {
-                return (<AdvancedDynamicTextureTreeItemComponent onSelectionChangeObservable={this.props.onSelectionChangeObservable} extensibilityGroups={this.props.extensibilityGroups} texture={entity as AdvancedDynamicTexture} onClick={() => this.onClick()} />);
+                return (<AdvancedDynamicTextureTreeItemComponent onSelectionChangedObservable={this.props.onSelectionChangedObservable} extensibilityGroups={this.props.extensibilityGroups} texture={entity as AdvancedDynamicTexture} onClick={() => this.onClick()} />);
             }
 
             if (className.indexOf("Texture") !== -1) {

src/Tools/babylon.tools.ts

@@ -958,7 +958,7 @@ module BABYLON {
                     request.addEventListener("readystatechange", onReadyStateChange);
 
                     if (Tools.UseCustomRequestHeaders) {
-                       Tools.InjectCustomRequestHeaders(request);
+                        Tools.InjectCustomRequestHeaders(request);
                     }
 
                     request.send();
@@ -1541,7 +1541,7 @@ module BABYLON {
                 return;
             }
 
-            var originalSize = {width: renderCanvas.width, height: renderCanvas.height};
+            var originalSize = { width: renderCanvas.width, height: renderCanvas.height };
             engine.setSize(width, height);
             scene.render();