Moving a bit more towards full build

gui/src/2D/controls/inputText.ts

@@ -1,7 +1,7 @@
 import { Control } from "./control";
 import { IFocusableControl } from "../advancedDynamicTexture";
 import { ValueAndUnit } from "../valueAndUnit";
-import { Nullable, Observable, Observer, Vector2, ClipboardEventTypes, ClipboardInfo, PointerInfo } from 'babylonjs';
+import { Nullable, Observable, Observer, Vector2, ClipboardEventTypes, ClipboardInfo, PointerInfo, PointerEventTypes } from 'babylonjs';
 import { Measure } from "../measure";
 import { VirtualKeyboard } from "./virtualKeyboard";
 
@@ -378,7 +378,7 @@ export class InputText extends Control implements IFocusableControl {
                 if (!this._isFocused) {
                     return;
                 }
-                if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDOUBLETAP) {
+                if (pointerInfo.type === PointerEventTypes.POINTERDOUBLETAP) {
                     this._processDblClick(pointerInfo);
                 }
             });

gui/src/3D/controls/cylinderPanel.ts

@@ -1,5 +1,5 @@
 import { VolumeBasedPanel } from "./volumeBasedPanel";
-import { float, Tools, Vector3, Matrix, Tmp } from "babylonjs";
+import { float, Tools, Vector3, Matrix, Tmp, Space, Axis } from "babylonjs";
 import { Control3D } from "./control3D";
 import { Container3D } from "./container3D";
 
@@ -39,15 +39,15 @@ export class CylinderPanel extends VolumeBasedPanel {
 
         switch (this.orientation) {
             case Container3D.FACEORIGIN_ORIENTATION:
-                mesh.lookAt(new BABYLON.Vector3(-newPos.x, newPos.y, -newPos.z));
+                mesh.lookAt(new Vector3(-newPos.x, newPos.y, -newPos.z));
                 break;
             case Container3D.FACEORIGINREVERSED_ORIENTATION:
-                mesh.lookAt(new BABYLON.Vector3(2 * newPos.x, newPos.y, 2 * newPos.z));
+                mesh.lookAt(new Vector3(2 * newPos.x, newPos.y, 2 * newPos.z));
                 break;
             case Container3D.FACEFORWARD_ORIENTATION:
                 break;
             case Container3D.FACEFORWARDREVERSED_ORIENTATION:
-                mesh.rotate(BABYLON.Axis.Y, Math.PI, BABYLON.Space.LOCAL);
+                mesh.rotate(Axis.Y, Math.PI, Space.LOCAL);
                 break;
         }
     }

gui/src/3D/controls/holographicButton.ts

@@ -1,5 +1,5 @@
 import { Button3D } from "./button3D";
-import { Mesh, StandardMaterial, Nullable, Observer, Vector3, Scene, TransformNode, MeshBuilder, Color3 } from "babylonjs";
+import { Mesh, StandardMaterial, Nullable, Observer, Vector3, Scene, TransformNode, MeshBuilder, Color3, FadeInOutBehavior } from "babylonjs";
 import { FluentMaterial } from "../materials/fluentMaterial";
 import { StackPanel } from "../../2D/controls/stackPanel";
 import { Image } from "../../2D/controls/image";
@@ -23,7 +23,7 @@ export class HolographicButton extends Button3D {
     private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;
 
     // Tooltip
-    private _tooltipFade: Nullable<BABYLON.FadeInOutBehavior>;
+    private _tooltipFade: Nullable<FadeInOutBehavior>;
     private _tooltipTextBlock: Nullable<TextBlock>;
     private _tooltipTexture: Nullable<AdvancedDynamicTexture>;
     private _tooltipMesh: Nullable<Mesh>;
@@ -55,10 +55,10 @@ export class HolographicButton extends Button3D {
         }
         if (!this._tooltipFade) {
             // Create tooltip with mesh and text
-            this._tooltipMesh = BABYLON.MeshBuilder.CreatePlane("", {size: 1}, this._backPlate._scene);
-            var tooltipBackground = BABYLON.MeshBuilder.CreatePlane("", {size: 1, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, this._backPlate._scene);
+            this._tooltipMesh = MeshBuilder.CreatePlane("", {size: 1}, this._backPlate._scene);
+            var tooltipBackground = MeshBuilder.CreatePlane("", {size: 1, sideOrientation: Mesh.DOUBLESIDE}, this._backPlate._scene);
             var mat = new StandardMaterial("", this._backPlate._scene);
-            mat.diffuseColor = BABYLON.Color3.FromHexString("#212121");
+            mat.diffuseColor = Color3.FromHexString("#212121");
             tooltipBackground.material = mat;
             tooltipBackground.isPickable = false;
             this._tooltipMesh.addChild(tooltipBackground);
@@ -78,7 +78,7 @@ export class HolographicButton extends Button3D {
             this._tooltipTexture.addControl(this._tooltipTextBlock);
 
             // Add hover action to tooltip
-            this._tooltipFade = new BABYLON.FadeInOutBehavior();
+            this._tooltipFade = new FadeInOutBehavior();
             this._tooltipFade.delay = 500;
             this._tooltipMesh.addBehavior(this._tooltipFade);
             this._tooltipHoverObserver = this.onPointerEnterObservable.add(() => {

gui/src/3D/controls/planePanel.ts

@@ -22,12 +22,12 @@ export class PlanePanel extends VolumeBasedPanel {
         switch (this.orientation) {
             case Container3D.FACEORIGIN_ORIENTATION:
             case Container3D.FACEFORWARD_ORIENTATION:
-                target.addInPlace(new BABYLON.Vector3(0, 0, -1));
+                target.addInPlace(new Vector3(0, 0, -1));
                 mesh.lookAt(target);
                 break;
             case Container3D.FACEFORWARDREVERSED_ORIENTATION:
             case Container3D.FACEORIGINREVERSED_ORIENTATION:
-                target.addInPlace(new BABYLON.Vector3(0, 0, 1));
+                target.addInPlace(new Vector3(0, 0, 1));
                 mesh.lookAt(target);
                 break;
         }

gui/src/3D/controls/spherePanel.ts

@@ -1,5 +1,5 @@
 import { VolumeBasedPanel } from "./volumeBasedPanel";
-import { float, Tools, Vector3, Matrix, Tmp } from "babylonjs";
+import { float, Tools, Vector3, Matrix, Tmp, Axis, Space } from "babylonjs";
 import { Control3D } from "./control3D";
 import { Container3D } from "./container3D";
 
@@ -40,15 +40,15 @@ export class SpherePanel extends VolumeBasedPanel {
 
         switch (this.orientation) {
             case Container3D.FACEORIGIN_ORIENTATION:
-                mesh.lookAt(new BABYLON.Vector3(-newPos.x, -newPos.y, -newPos.z));
+                mesh.lookAt(new Vector3(-newPos.x, -newPos.y, -newPos.z));
                 break;
             case Container3D.FACEORIGINREVERSED_ORIENTATION:
-                mesh.lookAt(new BABYLON.Vector3(2 * newPos.x, 2 * newPos.y, 2 * newPos.z));
+                mesh.lookAt(new Vector3(2 * newPos.x, 2 * newPos.y, 2 * newPos.z));
                 break;
             case Container3D.FACEFORWARD_ORIENTATION:
                 break;
             case Container3D.FACEFORWARDREVERSED_ORIENTATION:
-                mesh.rotate(BABYLON.Axis.Y, Math.PI, BABYLON.Space.LOCAL);
+                mesh.rotate(Axis.Y, Math.PI, Space.LOCAL);
                 break;
         }
     }

gui/tsconfig.json

@@ -24,7 +24,7 @@
         "rootDir": "./",
         "paths": {
             "babylonjs": [
-                "../../dist/preview release/babylon.d.ts"
+                "../../dist/preview release/babylon.module.d.ts"
             ]
         },
         "outDir": "./build"

gui/webpack.config.js

@@ -21,14 +21,17 @@ module.exports = {
     resolve: {
         extensions: [".js", '.ts']
     },
-    externals: {
-        babylonjs: {
-            root: "BABYLON",
-            commonjs: "babylonjs",
-            commonjs2: "babylonjs",
-            amd: "babylonjs"
-        }
-    },
+    externals: [
+        {
+            babylonjs: {
+                root: "BABYLON",
+                commonjs: "babylonjs",
+                commonjs2: "babylonjs",
+                amd: "babylonjs"
+            }
+        },
+        /^babylonjs.*$/i
+    ],
     devtool: "source-map",
     module: {
         rules: [{

inspector/src/components/actionTabs/lineContainerComponent.tsx

@@ -3,9 +3,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 
 interface ILineContainerComponentProps {
-    title: string,
-    children: any[] | any,
-    closed?: boolean
+    title: string;
+    children: any[] | any;
+    closed?: boolean;
 }
 
 export class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean }> {
@@ -42,7 +42,7 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
                     <FontAwesomeIcon icon={faChevronDown} />
                 </div>
             </div>
-        )
+        );
     }
 
     render() {
@@ -53,7 +53,7 @@ export class LineContainerComponent extends React.Component<ILineContainerCompon
                         this.renderHeader()
                     }
                 </div>
-            )
+            );
         }
 
         return (

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

@@ -3,12 +3,12 @@ import { Observable } from "babylonjs";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 
 export interface ICheckBoxLineComponentProps {
-    label: string,
-    target?: any,
-    propertyName?: string,
-    isSelected?: () => boolean,
-    onSelect?: (value: boolean) => void,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    label: string;
+    target?: any;
+    propertyName?: string;
+    isSelected?: () => boolean;
+    onSelect?: (value: boolean) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean }> {

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

@@ -3,10 +3,10 @@ import { Observable, Color3 } from "babylonjs";
 import { PropertyChangedEvent } from "../../propertyChangedEvent";
 
 export interface IColor3LineComponentProps {
-    label: string,
-    target: any,
-    propertyName: string,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    label: string;
+    target: any;
+    propertyName: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class Color3LineComponent extends React.Component<IColor3LineComponentProps, { color: Color3 }> {
@@ -30,7 +30,7 @@ export class Color3LineComponent extends React.Component<IColor3LineComponentPro
 
     onChange(newValue: string) {
         this._localChange = true;
-        const newColor = BABYLON.Color3.FromHexString(newValue);
+        const newColor = Color3.FromHexString(newValue);
 
         if (this.props.onPropertyChangedObservable) {
             this.props.onPropertyChangedObservable.notifyObservers({

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

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { BaseTexture, PostProcess, Texture } from "babylonjs";
+import { BaseTexture, PostProcess, Texture, PassPostProcess, Engine, PassCubePostProcess, RenderTargetTexture } from "babylonjs";
 
 interface ITextureLineComponentProps {
-    texture: BaseTexture,
-    width: number,
-    height: number
+    texture: BaseTexture;
+    width: number;
+    height: number;
 }
 
 export class TextureLineComponent extends React.Component<ITextureLineComponentProps, { displayRed: boolean, displayGreen: boolean, displayBlue: boolean, displayAlpha: boolean, face: number }> {
@@ -17,7 +17,7 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
             displayBlue: true,
             displayAlpha: true,
             face: 0
-        }
+        };
     }
 
     componentDidMount() {
@@ -33,16 +33,16 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
         var scene = texture.getScene()!;
         var engine = scene.getEngine();
         var size = texture.getSize();
-        var ratio = size.width / size.height
+        var ratio = size.width / size.height;
         var width = this.props.width;
         var height = (width / ratio) | 0;
 
         let passPostProcess: PostProcess;
 
         if (!texture.isCube) {
-            passPostProcess = new BABYLON.PassPostProcess("pass", 1, null, BABYLON.Texture.NEAREST_SAMPLINGMODE, engine, false, BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT);
+            passPostProcess = new PassPostProcess("pass", 1, null, Texture.NEAREST_SAMPLINGMODE, engine, false, Engine.TEXTURETYPE_UNSIGNED_INT);
         } else {
-            var passCubePostProcess = new BABYLON.PassCubePostProcess("pass", 1, null, BABYLON.Texture.NEAREST_SAMPLINGMODE, engine, false, BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT);
+            var passCubePostProcess = new PassCubePostProcess("pass", 1, null, Texture.NEAREST_SAMPLINGMODE, engine, false, Engine.TEXTURETYPE_UNSIGNED_INT);
             passCubePostProcess.face = this.state.face;
 
             passPostProcess = passCubePostProcess;
@@ -59,7 +59,7 @@ export class TextureLineComponent extends React.Component<ITextureLineComponentP
 
         const previewCanvas = this.refs.canvas as HTMLCanvasElement;
 
-        let rtt = new BABYLON.RenderTargetTexture(
+        let rtt = new RenderTargetTexture(
             "temp",
             { width: width, height: height },
             scene, false);

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

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { BaseTexture, Observable, Material, Observer, Nullable } from "babylonjs";
+import { BaseTexture, Observable, Material, Observer, Nullable, StandardMaterial } from "babylonjs";
 import { TextLineComponent } from "./textLineComponent";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faWrench } from '@fortawesome/free-solid-svg-icons';
 
 export interface ITextureLinkLineComponentProps {
-    label: string,
-    texture: Nullable<BaseTexture>,
-    material?: Material,
-    onSelectionChangedObservable?: Observable<any>,
-    onDebugSelectionChangeObservable?: Observable<BaseTexture>
+    label: string;
+    texture: Nullable<BaseTexture>;
+    material?: Material;
+    onSelectionChangedObservable?: Observable<any>;
+    onDebugSelectionChangeObservable?: Observable<BaseTexture>;
 }
 
 export class TextureLinkLineComponent extends React.Component<ITextureLinkLineComponentProps, { isDebugSelected: boolean }> {
@@ -24,7 +24,6 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
         this.state = { isDebugSelected: material && material.metadata && material.metadata.debugTexture === texture };
     }
 
-
     componentWillMount() {
         if (!this.props.onDebugSelectionChangeObservable) {
             return;
@@ -74,7 +73,7 @@ export class TextureLinkLineComponent extends React.Component<ITextureLinkLineCo
             needToDisposeCheckMaterial = true;
         }
 
-        var debugMaterial = new BABYLON.StandardMaterial("debugMaterial", scene);
+        var debugMaterial = new StandardMaterial("debugMaterial", scene);
         debugMaterial.disableLighting = true;
         debugMaterial.sideOrientation = material.sideOrientation;
         debugMaterial.emissiveTexture = texture!;

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

@@ -3,11 +3,12 @@ import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { LineContainerComponent } from "../lineContainerComponent";
 import { CheckBoxLineComponent } from "../lines/checkBoxLineComponent";
 import { GridPropertyGridComponent } from "./propertyGrids/gridPropertyGridComponent";
+import { SkeletonViewer, PhysicsViewer, StandardMaterial } from "babylonjs";
 
 export class DebugTabComponent extends PaneComponent {
     private _skeletonViewersEnabled = false;
     private _physicsViewersEnabled = false;
-    private _skeletonViewers = new Array<BABYLON.Debug.SkeletonViewer>();
+    private _skeletonViewers = new Array<SkeletonViewer>();
 
     constructor(props: IPaneComponentProps) {
         super(props);
@@ -54,7 +55,7 @@ export class DebugTabComponent extends PaneComponent {
                     if (found) {
                         continue;
                     }
-                    var viewer = new BABYLON.Debug.SkeletonViewer(mesh.skeleton, mesh, scene, true, 0);
+                    var viewer = new SkeletonViewer(mesh.skeleton, mesh, scene, true, 0);
                     viewer.isEnabled = true;
                     this._skeletonViewers.push(viewer);
                     if (!mesh.metadata) {
@@ -78,7 +79,7 @@ export class DebugTabComponent extends PaneComponent {
         const scene = this.props.scene;
 
         if (this._physicsViewersEnabled) {
-            const physicsViewer = new BABYLON.Debug.PhysicsViewer(scene);
+            const physicsViewer = new PhysicsViewer(scene);
             scene.metadata.physicsViewer = physicsViewer;
 
             for (var mesh of scene.meshes) {
@@ -112,17 +113,17 @@ export class DebugTabComponent extends PaneComponent {
                     <CheckBoxLineComponent label="Physics" isSelected={() => this._physicsViewersEnabled} onSelect={() => this.switchPhysicsViewers()} />
                 </LineContainerComponent>
                 <LineContainerComponent title="TEXTURE CHANNELS">
-                    <CheckBoxLineComponent label="Diffuse" isSelected={() => BABYLON.StandardMaterial.DiffuseTextureEnabled} onSelect={() => BABYLON.StandardMaterial.DiffuseTextureEnabled = !BABYLON.StandardMaterial.DiffuseTextureEnabled} />
-                    <CheckBoxLineComponent label="Ambient" isSelected={() => BABYLON.StandardMaterial.AmbientTextureEnabled} onSelect={() => BABYLON.StandardMaterial.AmbientTextureEnabled = !BABYLON.StandardMaterial.AmbientTextureEnabled} />
-                    <CheckBoxLineComponent label="Specular" isSelected={() => BABYLON.StandardMaterial.SpecularTextureEnabled} onSelect={() => BABYLON.StandardMaterial.SpecularTextureEnabled = !BABYLON.StandardMaterial.SpecularTextureEnabled} />
-                    <CheckBoxLineComponent label="Emissive" isSelected={() => BABYLON.StandardMaterial.EmissiveTextureEnabled} onSelect={() => BABYLON.StandardMaterial.EmissiveTextureEnabled = !BABYLON.StandardMaterial.EmissiveTextureEnabled} />
-                    <CheckBoxLineComponent label="Bump" isSelected={() => BABYLON.StandardMaterial.BumpTextureEnabled} onSelect={() => BABYLON.StandardMaterial.BumpTextureEnabled = !BABYLON.StandardMaterial.BumpTextureEnabled} />
-                    <CheckBoxLineComponent label="Opacity" isSelected={() => BABYLON.StandardMaterial.OpacityTextureEnabled} onSelect={() => BABYLON.StandardMaterial.OpacityTextureEnabled = !BABYLON.StandardMaterial.OpacityTextureEnabled} />
-                    <CheckBoxLineComponent label="Reflection" isSelected={() => BABYLON.StandardMaterial.ReflectionTextureEnabled} onSelect={() => BABYLON.StandardMaterial.ReflectionTextureEnabled = !BABYLON.StandardMaterial.ReflectionTextureEnabled} />
-                    <CheckBoxLineComponent label="Refraction" isSelected={() => BABYLON.StandardMaterial.RefractionTextureEnabled} onSelect={() => BABYLON.StandardMaterial.RefractionTextureEnabled = !BABYLON.StandardMaterial.RefractionTextureEnabled} />
-                    <CheckBoxLineComponent label="ColorGrading" isSelected={() => BABYLON.StandardMaterial.ColorGradingTextureEnabled} onSelect={() => BABYLON.StandardMaterial.ColorGradingTextureEnabled = !BABYLON.StandardMaterial.ColorGradingTextureEnabled} />
-                    <CheckBoxLineComponent label="Lightmap" isSelected={() => BABYLON.StandardMaterial.LightmapTextureEnabled} onSelect={() => BABYLON.StandardMaterial.LightmapTextureEnabled = !BABYLON.StandardMaterial.LightmapTextureEnabled} />
-                    <CheckBoxLineComponent label="Fresnel" isSelected={() => BABYLON.StandardMaterial.FresnelEnabled} onSelect={() => BABYLON.StandardMaterial.FresnelEnabled = !BABYLON.StandardMaterial.FresnelEnabled} />
+                    <CheckBoxLineComponent label="Diffuse" isSelected={() => StandardMaterial.DiffuseTextureEnabled} onSelect={() => StandardMaterial.DiffuseTextureEnabled = !StandardMaterial.DiffuseTextureEnabled} />
+                    <CheckBoxLineComponent label="Ambient" isSelected={() => StandardMaterial.AmbientTextureEnabled} onSelect={() => StandardMaterial.AmbientTextureEnabled = !StandardMaterial.AmbientTextureEnabled} />
+                    <CheckBoxLineComponent label="Specular" isSelected={() => StandardMaterial.SpecularTextureEnabled} onSelect={() => StandardMaterial.SpecularTextureEnabled = !StandardMaterial.SpecularTextureEnabled} />
+                    <CheckBoxLineComponent label="Emissive" isSelected={() => StandardMaterial.EmissiveTextureEnabled} onSelect={() => StandardMaterial.EmissiveTextureEnabled = !StandardMaterial.EmissiveTextureEnabled} />
+                    <CheckBoxLineComponent label="Bump" isSelected={() => StandardMaterial.BumpTextureEnabled} onSelect={() => StandardMaterial.BumpTextureEnabled = !StandardMaterial.BumpTextureEnabled} />
+                    <CheckBoxLineComponent label="Opacity" isSelected={() => StandardMaterial.OpacityTextureEnabled} onSelect={() => StandardMaterial.OpacityTextureEnabled = !StandardMaterial.OpacityTextureEnabled} />
+                    <CheckBoxLineComponent label="Reflection" isSelected={() => StandardMaterial.ReflectionTextureEnabled} onSelect={() => StandardMaterial.ReflectionTextureEnabled = !StandardMaterial.ReflectionTextureEnabled} />
+                    <CheckBoxLineComponent label="Refraction" isSelected={() => StandardMaterial.RefractionTextureEnabled} onSelect={() => StandardMaterial.RefractionTextureEnabled = !StandardMaterial.RefractionTextureEnabled} />
+                    <CheckBoxLineComponent label="ColorGrading" isSelected={() => StandardMaterial.ColorGradingTextureEnabled} onSelect={() => StandardMaterial.ColorGradingTextureEnabled = !StandardMaterial.ColorGradingTextureEnabled} />
+                    <CheckBoxLineComponent label="Lightmap" isSelected={() => StandardMaterial.LightmapTextureEnabled} onSelect={() => StandardMaterial.LightmapTextureEnabled = !StandardMaterial.LightmapTextureEnabled} />
+                    <CheckBoxLineComponent label="Fresnel" isSelected={() => StandardMaterial.FresnelEnabled} onSelect={() => StandardMaterial.FresnelEnabled = !StandardMaterial.FresnelEnabled} />
                 </LineContainerComponent>
                 <LineContainerComponent title="FEATURES">
                     <CheckBoxLineComponent label="Animations" isSelected={() => scene.animationsEnabled} onSelect={() => scene.animationsEnabled = !scene.animationsEnabled} />

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

@@ -9,9 +9,9 @@ import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
 import { LockObject } from "../lockObject";
 
 interface ICommonCameraPropertyGridComponentProps {
-    camera: Camera,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    camera: Camera;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class CommonCameraPropertyGridComponent extends React.Component<ICommonCameraPropertyGridComponentProps, { mode: number }> {
@@ -25,8 +25,8 @@ export class CommonCameraPropertyGridComponent extends React.Component<ICommonCa
         const camera = this.props.camera;
 
         var modeOptions = [
-            { label: "Perspective", value: BABYLON.Camera.PERSPECTIVE_CAMERA },
-            { label: "Orthographic", value: BABYLON.Camera.ORTHOGRAPHIC_CAMERA }
+            { label: "Perspective", value: Camera.PERSPECTIVE_CAMERA },
+            { label: "Orthographic", value: Camera.ORTHOGRAPHIC_CAMERA }
         ];
 
         return (
@@ -37,25 +37,25 @@ export class CommonCameraPropertyGridComponent extends React.Component<ICommonCa
                 <FloatLineComponent lockObject={this.props.lockObject} label="Near plane" target={camera} propertyName="minZ" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <FloatLineComponent lockObject={this.props.lockObject} label="Far plane" target={camera} propertyName="maxZ" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <SliderLineComponent label="Inertia" target={camera} propertyName="inertia" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                <OptionsLineComponent label="Mode" options={modeOptions} target={camera} propertyName="mode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ mode: value })} />
+                <OptionsLineComponent label="Mode" options={modeOptions} target={camera} propertyName="mode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
                 {
-                    camera.mode === BABYLON.Camera.PERSPECTIVE_CAMERA &&
+                    camera.mode === Camera.PERSPECTIVE_CAMERA &&
                     <SliderLineComponent label="Field of view" target={camera} propertyName="fov" minimum={0.1} maximum={Math.PI} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    camera.mode === BABYLON.Camera.ORTHOGRAPHIC_CAMERA &&
+                    camera.mode === Camera.ORTHOGRAPHIC_CAMERA &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Left" target={camera} propertyName="orthoLeft" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    camera.mode === BABYLON.Camera.ORTHOGRAPHIC_CAMERA &&
+                    camera.mode === Camera.ORTHOGRAPHIC_CAMERA &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Top" target={camera} propertyName="orthoTop" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    camera.mode === BABYLON.Camera.ORTHOGRAPHIC_CAMERA &&
+                    camera.mode === Camera.ORTHOGRAPHIC_CAMERA &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Right" target={camera} propertyName="orthoRight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    camera.mode === BABYLON.Camera.ORTHOGRAPHIC_CAMERA &&
+                    camera.mode === Camera.ORTHOGRAPHIC_CAMERA &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Bottom" target={camera} propertyName="orthoBottom" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
 

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

@@ -7,9 +7,9 @@ import { OptionsLineComponent } from "../../lines/optionsLineComponent";
 import { LockObject } from "./lockObject";
 
 interface IFogPropertyGridComponentProps {
-    scene: Scene,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    scene: Scene;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class FogPropertyGridComponent extends React.Component<IFogPropertyGridComponentProps, { mode: number }> {
@@ -23,29 +23,29 @@ export class FogPropertyGridComponent extends React.Component<IFogPropertyGridCo
         const scene = this.props.scene;
 
         var fogModeOptions = [
-            { label: "None", value: BABYLON.Scene.FOGMODE_NONE },
-            { label: "Linear", value: BABYLON.Scene.FOGMODE_LINEAR },
-            { label: "Exp", value: BABYLON.Scene.FOGMODE_EXP },
-            { label: "Exp2", value: BABYLON.Scene.FOGMODE_EXP2 },
-        ]
+            { label: "None", value: Scene.FOGMODE_NONE },
+            { label: "Linear", value: Scene.FOGMODE_LINEAR },
+            { label: "Exp", value: Scene.FOGMODE_EXP },
+            { label: "Exp2", value: Scene.FOGMODE_EXP2 },
+        ];
 
         return (
             <div>
-                <OptionsLineComponent label="Fog mode" options={fogModeOptions} target={scene} propertyName="fogMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ mode: value })} />
+                <OptionsLineComponent label="Fog mode" options={fogModeOptions} target={scene} propertyName="fogMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
                 {
-                    this.state.mode !== BABYLON.Scene.FOGMODE_NONE &&
+                    this.state.mode !== Scene.FOGMODE_NONE &&
                     <Color3LineComponent label="Fog color" target={scene} propertyName="fogColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    (this.state.mode === BABYLON.Scene.FOGMODE_EXP || this.state.mode === BABYLON.Scene.FOGMODE_EXP2) &&
+                    (this.state.mode === Scene.FOGMODE_EXP || this.state.mode === Scene.FOGMODE_EXP2) &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Fog density" target={scene} propertyName="fogDensity" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    this.state.mode === BABYLON.Scene.FOGMODE_LINEAR &&
+                    this.state.mode === Scene.FOGMODE_LINEAR &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Fog start" target={scene} propertyName="fogStart" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
                 {
-                    this.state.mode === BABYLON.Scene.FOGMODE_LINEAR &&
+                    this.state.mode === Scene.FOGMODE_LINEAR &&
                     <FloatLineComponent lockObject={this.props.lockObject} label="Fog end" target={scene} propertyName="fogEnd" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
             </div>

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { Scene, AbstractMesh, Nullable } from "babylonjs";
+import { Scene, AbstractMesh, Nullable, UtilityLayerRenderer, Tools, Mesh, Color3, Texture } from "babylonjs";
 import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
 
 interface IGridPropertyGridComponentProps {
-    scene: Scene
+    scene: Scene;
 }
 
 export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps, { isEnabled: boolean }> {
@@ -15,7 +15,7 @@ export class GridPropertyGridComponent extends React.Component<IGridPropertyGrid
     }
 
     componentWillMount() {
-        const scene = BABYLON.UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
+        const scene = UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
 
         for (var mesh of scene.meshes) {
             if (mesh.metadata && mesh.metadata.isInspectorGrid) {
@@ -27,11 +27,11 @@ export class GridPropertyGridComponent extends React.Component<IGridPropertyGrid
     }
 
     addOrRemoveGrid() {
-        const scene = BABYLON.UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
+        const scene = UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
 
         if (!(BABYLON as any).GridMaterial) {
             this.setState({ isEnabled: true });
-            BABYLON.Tools.LoadScript("https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js", () => {
+            Tools.LoadScript("https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js", () => {
                 this.addOrRemoveGrid();
             });
             return;
@@ -42,7 +42,7 @@ export class GridPropertyGridComponent extends React.Component<IGridPropertyGrid
             var width = (extend.max.x - extend.min.x) * 5.0;
             var depth = (extend.max.z - extend.min.z) * 5.0;
 
-            this._gridMesh = BABYLON.Mesh.CreateGround("grid", 1.0, 1.0, 1, scene);
+            this._gridMesh = Mesh.CreateGround("grid", 1.0, 1.0, 1, scene);
             if (!this._gridMesh.metadata) {
                 this._gridMesh.metadata = {};
             }
@@ -56,11 +56,11 @@ export class GridPropertyGridComponent extends React.Component<IGridPropertyGrid
             groundMaterial.minorUnitVisibility = 0.3;
             groundMaterial.gridRatio = 0.01;
             groundMaterial.backFaceCulling = false;
-            groundMaterial.mainColor = new BABYLON.Color3(1, 1, 1);
-            groundMaterial.lineColor = new BABYLON.Color3(1.0, 1.0, 1.0);
+            groundMaterial.mainColor = new Color3(1, 1, 1);
+            groundMaterial.lineColor = new Color3(1.0, 1.0, 1.0);
             groundMaterial.opacity = 0.8;
             groundMaterial.zOffset = 1.0;
-            groundMaterial.opacityTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/backgroundGround.png", scene);
+            groundMaterial.opacityTexture = new Texture("https://assets.babylonjs.com/environments/backgroundGround.png", scene);
 
             this._gridMesh.material = groundMaterial;
 

inspector/src/components/actionTabs/tabs/propertyGrids/gui/colorPickerPropertyGridComponent.tsx

@@ -8,9 +8,9 @@ import { Color3LineComponent } from "../../../lines/color3LineComponent";
 import { LockObject } from "../lockObject";
 
 interface IColorPickerPropertyGridComponentProps {
-    colorPicker: ColorPicker,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    colorPicker: ColorPicker;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {

inspector/src/components/actionTabs/tabs/propertyGrids/gui/commonControlPropertyGridComponent.tsx

@@ -10,9 +10,9 @@ import { TextInputLineComponent } from "../../../lines/textInputLineComponent";
 import { LockObject } from "../lockObject";
 
 interface ICommonControlPropertyGridComponentProps {
-    control: Control,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    control: Control;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {

inspector/src/components/actionTabs/tabs/propertyGrids/gui/inputTextPropertyGridComponent.tsx

@@ -11,9 +11,9 @@ import { FloatLineComponent } from "../../../lines/floatLineComponent";
 import { LockObject } from "../lockObject";
 
 interface IInputTextPropertyGridComponentProps {
-    inputText: InputText,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    inputText: InputText;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class InputTextPropertyGridComponent extends React.Component<IInputTextPropertyGridComponentProps> {

inspector/src/components/actionTabs/tabs/propertyGrids/gui/textBlockPropertyGridComponent.tsx

@@ -8,9 +8,9 @@ import { TextInputLineComponent } from "../../../lines/textInputLineComponent";
 import { LockObject } from "../lockObject";
 
 interface ITextBlockPropertyGridComponentProps {
-    textBlock: TextBlock,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    textBlock: TextBlock;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class TextBlockPropertyGridComponent extends React.Component<ITextBlockPropertyGridComponentProps> {

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

@@ -10,10 +10,10 @@ import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponen
 import { LockObject } from "../lockObject";
 
 interface IBackgroundMaterialPropertyGridComponentProps {
-    material: BackgroundMaterial,
-    lockObject: LockObject,
-    onSelectionChangedObservable?: Observable<any>,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    material: BackgroundMaterial;
+    lockObject: LockObject;
+    onSelectionChangedObservable?: Observable<any>;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class BackgroundMaterialPropertyGridComponent extends React.Component<IBackgroundMaterialPropertyGridComponentProps> {
@@ -24,7 +24,7 @@ export class BackgroundMaterialPropertyGridComponent extends React.Component<IBa
     renderTextures() {
         const material = this.props.material;
 
-        const onDebugSelectionChangeObservable = new BABYLON.Observable<BaseTexture>();
+        const onDebugSelectionChangeObservable = new Observable<BaseTexture>();
 
         return (
             <LineContainerComponent title="TEXTURES">
@@ -35,7 +35,7 @@ export class BackgroundMaterialPropertyGridComponent extends React.Component<IBa
                     <SliderLineComponent label="Reflection blur" target={material} propertyName="reflectionBlur" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 }
             </LineContainerComponent>
-        )
+        );
     }
 
     render() {

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Material, Observable } from "babylonjs";
+import { Material, Observable, PBRMaterial, Engine } from "babylonjs";
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
 import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
@@ -9,9 +9,9 @@ import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
 import { LockObject } from "../lockObject";
 
 interface ICommonMaterialPropertyGridComponentProps {
-    material: Material,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    material: Material;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class CommonMaterialPropertyGridComponent extends React.Component<ICommonMaterialPropertyGridComponentProps> {
@@ -23,25 +23,25 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
         const material = this.props.material;
 
         var orientationOptions = [
-            { label: "Clockwise", value: BABYLON.Material.ClockWiseSideOrientation },
-            { label: "Counterclockwise", value: BABYLON.Material.CounterClockWiseSideOrientation }
-        ]
+            { label: "Clockwise", value: Material.ClockWiseSideOrientation },
+            { label: "Counterclockwise", value: Material.CounterClockWiseSideOrientation }
+        ];
 
         var transparencyModeOptions = [
-            { label: "Opaque", value: BABYLON.PBRMaterial.PBRMATERIAL_OPAQUE },
-            { label: "Alpha test", value: BABYLON.PBRMaterial.PBRMATERIAL_ALPHATEST },
-            { label: "Alpha blend", value: BABYLON.PBRMaterial.PBRMATERIAL_ALPHABLEND },
-            { label: "Alpha blend and test", value: BABYLON.PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND },
+            { label: "Opaque", value: PBRMaterial.PBRMATERIAL_OPAQUE },
+            { label: "Alpha test", value: PBRMaterial.PBRMATERIAL_ALPHATEST },
+            { label: "Alpha blend", value: PBRMaterial.PBRMATERIAL_ALPHABLEND },
+            { label: "Alpha blend and test", value: PBRMaterial.PBRMATERIAL_ALPHATESTANDBLEND },
         ];
 
         var alphaModeOptions = [
-            { label: "Combine", value: BABYLON.Engine.ALPHA_COMBINE },
-            { label: "One one", value: BABYLON.Engine.ALPHA_ONEONE },
-            { label: "Add", value: BABYLON.Engine.ALPHA_ADD },
-            { label: "Subtract", value: BABYLON.Engine.ALPHA_SUBTRACT },
-            { label: "Multiply", value: BABYLON.Engine.ALPHA_MULTIPLY },
-            { label: "Maximized", value: BABYLON.Engine.ALPHA_MAXIMIZED },
-            { label: "Pre-multiplied", value: BABYLON.Engine.ALPHA_PREMULTIPLIED },
+            { label: "Combine", value: Engine.ALPHA_COMBINE },
+            { label: "One one", value: Engine.ALPHA_ONEONE },
+            { label: "Add", value: Engine.ALPHA_ADD },
+            { label: "Subtract", value: Engine.ALPHA_SUBTRACT },
+            { label: "Multiply", value: Engine.ALPHA_MULTIPLY },
+            { label: "Maximized", value: Engine.ALPHA_MAXIMIZED },
+            { label: "Pre-multiplied", value: Engine.ALPHA_PREMULTIPLIED },
         ];
 
         return (
@@ -51,7 +51,7 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
                     <TextLineComponent label="Unique ID" value={material.uniqueId.toString()} />
                     <TextLineComponent label="Class" value={material.getClassName()} />
                     <CheckBoxLineComponent label="Backface culling" target={material} propertyName="backFaceCulling" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <OptionsLineComponent label="Orientation" options={orientationOptions} target={material} propertyName="sideOrientation" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ mode: value })} />
+                    <OptionsLineComponent label="Orientation" options={orientationOptions} target={material} propertyName="sideOrientation" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
                     <CheckBoxLineComponent label="Disable lighting" target={material} propertyName="disableLighting" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Disable depth write" target={material} propertyName="disableDepthWrite" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Need depth pre-pass" target={material} propertyName="needDepthPrePass" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
@@ -64,9 +64,9 @@ export class CommonMaterialPropertyGridComponent extends React.Component<ICommon
                     <SliderLineComponent label="Alpha" target={material} propertyName="alpha" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         (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="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 })} />
+                    <OptionsLineComponent label="Alpha mode" options={alphaModeOptions} target={material} propertyName="alphaMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ alphaMode: value })} />
                     <CheckBoxLineComponent label="Separate culling pass" target={material} propertyName="separateCullingPass" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
             </div>

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

@@ -10,10 +10,10 @@ import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponen
 import { LockObject } from "../lockObject";
 
 interface IPBRMaterialPropertyGridComponentProps {
-    material: PBRMaterial,
-    lockObject: LockObject,
-    onSelectionChangedObservable?: Observable<any>,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    material: PBRMaterial;
+    lockObject: LockObject;
+    onSelectionChangedObservable?: Observable<any>;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMaterialPropertyGridComponentProps> {
@@ -28,7 +28,7 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
             return null;
         }
 
-        const onDebugSelectionChangeObservable = new BABYLON.Observable<BaseTexture>();
+        const onDebugSelectionChangeObservable = new Observable<BaseTexture>();
 
         return (
             <LineContainerComponent title="TEXTURES">
@@ -43,7 +43,7 @@ export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMateri
                 <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>
-        )
+        );
     }
 
     render() {

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

@@ -9,10 +9,10 @@ import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponen
 import { LockObject } from "../lockObject";
 
 interface IStandardMaterialPropertyGridComponentProps {
-    material: StandardMaterial,
-    lockObject: LockObject,
-    onSelectionChangedObservable?: Observable<any>,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    material: StandardMaterial;
+    lockObject: LockObject;
+    onSelectionChangedObservable?: Observable<any>;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class StandardMaterialPropertyGridComponent extends React.Component<IStandardMaterialPropertyGridComponentProps> {
@@ -27,7 +27,7 @@ export class StandardMaterialPropertyGridComponent extends React.Component<IStan
             return null;
         }
 
-        const onDebugSelectionChangeObservable = new BABYLON.Observable<BaseTexture>();
+        const onDebugSelectionChangeObservable = new Observable<BaseTexture>();
 
         return (
             <LineContainerComponent title="TEXTURES">
@@ -41,7 +41,7 @@ export class StandardMaterialPropertyGridComponent extends React.Component<IStan
                 <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>
-        )
+        );
     }
 
     render() {

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Texture, BaseTexture, CubeTexture, Observable } from "babylonjs";
+import { Texture, BaseTexture, CubeTexture, Observable, Tools } from "babylonjs";
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
 import { LineContainerComponent } from "../../../lineContainerComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
@@ -13,9 +13,9 @@ import { FileButtonLineComponent } from "../../../lines/fileButtonLineComponent"
 import { LockObject } from "../lockObject";
 
 interface ITexturePropertyGridComponentProps {
-    texture: BaseTexture,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    texture: BaseTexture;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class TexturePropertyGridComponent extends React.Component<ITexturePropertyGridComponentProps> {
@@ -25,7 +25,7 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
 
     updateTexture(file: File) {
         const texture = this.props.texture;
-        BABYLON.Tools.ReadFile(file, (data) => {
+        Tools.ReadFile(file, (data) => {
             var blob = new Blob([data], { type: "octet/stream" });
             var url = URL.createObjectURL(blob);
 
@@ -50,9 +50,9 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
         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 },
+            { label: "Nearest", value: Texture.NEAREST_NEAREST },
+            { label: "Nearest & linear mip", value: Texture.NEAREST_LINEAR },
+            { label: "Linear", value: Texture.LINEAR_LINEAR_MIPLINEAR },
         ];
 
         return (
@@ -72,7 +72,7 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                     <SliderLineComponent label="UV set" target={texture} propertyName="coordinatesIndex" minimum={0} maximum={3} step={1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         texture.updateSamplingMode &&
-                        <OptionsLineComponent label="Sampling" options={samplingMode} target={texture} noDirectUpdate={true} propertyName="samplingMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => texture.updateSamplingMode(value)} />
+                        <OptionsLineComponent label="Sampling" options={samplingMode} target={texture} noDirectUpdate={true} propertyName="samplingMode" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => texture.updateSamplingMode(value)} />
                     }
                 </LineContainerComponent>
                 {
@@ -97,8 +97,8 @@ export class TexturePropertyGridComponent extends React.Component<ITextureProper
                             <FloatLineComponent lockObject={this.props.lockObject} label="U angle" target={texture} propertyName="uAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                             <FloatLineComponent lockObject={this.props.lockObject} label="V angle" target={texture} propertyName="vAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                             <FloatLineComponent lockObject={this.props.lockObject} label="W angle" target={texture} propertyName="wAng" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                            <CheckBoxLineComponent label="Clamp U" isSelected={() => texture.wrapU === BABYLON.Texture.CLAMP_ADDRESSMODE} onSelect={(value) => texture.wrapU = value ? BABYLON.Texture.CLAMP_ADDRESSMODE : BABYLON.Texture.WRAP_ADDRESSMODE} />
-                            <CheckBoxLineComponent label="Clamp V" isSelected={() => texture.wrapV === BABYLON.Texture.CLAMP_ADDRESSMODE} onSelect={(value) => texture.wrapV = value ? BABYLON.Texture.CLAMP_ADDRESSMODE : BABYLON.Texture.WRAP_ADDRESSMODE} />
+                            <CheckBoxLineComponent label="Clamp U" isSelected={() => texture.wrapU === Texture.CLAMP_ADDRESSMODE} onSelect={(value) => texture.wrapU = value ? Texture.CLAMP_ADDRESSMODE : Texture.WRAP_ADDRESSMODE} />
+                            <CheckBoxLineComponent label="Clamp V" isSelected={() => texture.wrapV === Texture.CLAMP_ADDRESSMODE} onSelect={(value) => texture.wrapV = value ? Texture.CLAMP_ADDRESSMODE : Texture.WRAP_ADDRESSMODE} />
                         </div>
                     }
                     {

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

@@ -1,9 +1,9 @@
 import * as React from "react";
-import { TransformNode } from "babylonjs";
+import { TransformNode, Vector3, Tmp, AxesViewer } from "babylonjs";
 import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 
 interface IAxisViewerComponentProps {
-    node: TransformNode
+    node: TransformNode;
 }
 
 export class AxesViewerComponent extends React.Component<IAxisViewerComponentProps, { displayAxis: boolean }> {
@@ -15,7 +15,7 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
             node.metadata = {};
         }
 
-        this.state = { displayAxis: (node.metadata && node.metadata.axisViewer) ? true : false }
+        this.state = { displayAxis: (node.metadata && node.metadata.axisViewer) ? true : false };
     }
 
     displayAxes() {
@@ -34,11 +34,11 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
             return;
         }
 
-        const viewer = new BABYLON.Debug.AxesViewer(scene);
+        const viewer = new AxesViewer(scene);
         node.metadata.axisViewer = viewer;
-        const x = new BABYLON.Vector3(1, 0, 0);
-        const y = new BABYLON.Vector3(0, 1, 0);
-        const z = new BABYLON.Vector3(0, 0, 1);
+        const x = new Vector3(1, 0, 0);
+        const y = new Vector3(0, 1, 0);
+        const z = new Vector3(0, 0, 1);
 
         viewer.xAxisMesh!.metadata = { hidden: true };
         viewer.yAxisMesh!.metadata = { hidden: true };
@@ -46,13 +46,13 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
 
         node.metadata.onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
             let matrix = node.getWorldMatrix();
-            let extend = BABYLON.Tmp.Vector3[0];
+            let extend = Tmp.Vector3[0];
             const worldExtend = scene.getWorldExtends();
             worldExtend.max.subtractToRef(worldExtend.min, extend);
             extend.scaleInPlace(0.5 * 0.5);
 
             viewer.scaleLines = Math.max(extend.x, extend.y, extend.z) * 2;
-            viewer.update(node.getAbsolutePosition(), BABYLON.Vector3.TransformNormal(x, matrix), BABYLON.Vector3.TransformNormal(y, matrix), BABYLON.Vector3.TransformNormal(z, matrix));
+            viewer.update(node.getAbsolutePosition(), Vector3.TransformNormal(x, matrix), Vector3.TransformNormal(y, matrix), Vector3.TransformNormal(z, matrix));
         });
 
         this.setState({ displayAxis: true });
@@ -61,6 +61,6 @@ export class AxesViewerComponent extends React.Component<IAxisViewerComponentPro
     render() {
         return (
             <CheckBoxLineComponent label="Display axes" isSelected={() => this.state.displayAxis} onSelect={() => this.displayAxes()} />
-        )
+        );
     }
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Mesh, Observable } from "babylonjs";
+import { Mesh, Observable, VertexBuffer, Color3, Vector3, MeshBuilder, Tools, PhysicsImpostor, Scene } from "babylonjs";
 import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
 import { LineContainerComponent } from "../../../lineContainerComponent";
 import { TextLineComponent } from "../../../lines/textLineComponent";
@@ -12,10 +12,10 @@ import { FloatLineComponent } from "../../../lines/floatLineComponent";
 import { LockObject } from "../lockObject";
 
 interface IMeshPropertyGridComponentProps {
-    mesh: Mesh,
-    lockObject: LockObject,
-    onSelectionChangedObservable?: Observable<any>,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>
+    mesh: Mesh;
+    lockObject: LockObject;
+    onSelectionChangedObservable?: Observable<any>;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
 }
 
 export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, { displayNormals: boolean, renderNormalVectors: boolean }> {
@@ -23,7 +23,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
         super(props);
         const mesh = this.props.mesh;
 
-        this.state = { displayNormals: false, renderNormalVectors: mesh.metadata && mesh.metadata.normalLines }
+        this.state = { displayNormals: false, renderNormalVectors: mesh.metadata && mesh.metadata.normalLines };
     }
 
     renderNormalVectors() {
@@ -38,20 +38,20 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
             return;
         }
 
-        var normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
-        var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
+        var normals = mesh.getVerticesData(VertexBuffer.NormalKind);
+        var positions = mesh.getVerticesData(VertexBuffer.PositionKind);
 
-        const color = BABYLON.Color3.White();
+        const color = Color3.White();
         const size = mesh.getBoundingInfo().diagonalLength * 0.05;
 
         var lines = [];
         for (var i = 0; i < normals!.length; i += 3) {
-            var v1 = BABYLON.Vector3.FromArray(positions!, i);
-            var v2 = v1.add(BABYLON.Vector3.FromArray(normals!, i).scaleInPlace(size));
+            var v1 = Vector3.FromArray(positions!, i);
+            var v2 = v1.add(Vector3.FromArray(normals!, i).scaleInPlace(size));
             lines.push([v1, v2]);
         }
 
-        var normalLines = BABYLON.MeshBuilder.CreateLineSystem("normalLines", { lines: lines }, scene);
+        var normalLines = MeshBuilder.CreateLineSystem("normalLines", { lines: lines }, scene);
         normalLines.color = color;
         normalLines.parent = mesh;
 
@@ -81,7 +81,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
 
             if (!(BABYLON as any).NormalMaterial) {
                 this.setState({ displayNormals: true });
-                BABYLON.Tools.LoadScript("https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js", () => {
+                Tools.LoadScript("https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js", () => {
                     this.displayNormals();
                 });
                 return;
@@ -107,27 +107,27 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
         }
 
         const mesh = this.props.mesh;
-        this.props.onSelectionChangedObservable.notifyObservers(mesh.material)
+        this.props.onSelectionChangedObservable.notifyObservers(mesh.material);
     }
 
     convertPhysicsTypeToString(): string {
         const mesh = this.props.mesh;
         switch (mesh.physicsImpostor!.type) {
-            case BABYLON.PhysicsImpostor.NoImpostor:
+            case PhysicsImpostor.NoImpostor:
                 return "No impostor";
-            case BABYLON.PhysicsImpostor.SphereImpostor:
+            case PhysicsImpostor.SphereImpostor:
                 return "Sphere";
-            case BABYLON.PhysicsImpostor.BoxImpostor:
+            case PhysicsImpostor.BoxImpostor:
                 return "Box";
-            case BABYLON.PhysicsImpostor.PlaneImpostor:
+            case PhysicsImpostor.PlaneImpostor:
                 return "Plane";
-            case BABYLON.PhysicsImpostor.MeshImpostor:
+            case PhysicsImpostor.MeshImpostor:
                 return "Mesh";
-            case BABYLON.PhysicsImpostor.CylinderImpostor:
+            case PhysicsImpostor.CylinderImpostor:
                 return "Cylinder";
-            case BABYLON.PhysicsImpostor.ParticleImpostor:
+            case PhysicsImpostor.ParticleImpostor:
                 return "Particle";
-            case BABYLON.PhysicsImpostor.HeightmapImpostor:
+            case PhysicsImpostor.HeightmapImpostor:
                 return "Heightmap";
         }
 
@@ -175,11 +175,11 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                     <FloatLineComponent lockObject={this.props.lockObject} label="Alpha index" target={mesh} propertyName="alphaIndex" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Receive shadows" target={mesh} propertyName="receiveShadows" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
-                        mesh.isVerticesDataPresent(BABYLON.VertexBuffer.ColorKind) &&
+                        mesh.isVerticesDataPresent(VertexBuffer.ColorKind) &&
                         <CheckBoxLineComponent label="Use vertex colors" target={mesh} propertyName="useVertexColors" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     {
-                        scene.fogMode !== BABYLON.Scene.FOGMODE_NONE &&
+                        scene.fogMode !== Scene.FOGMODE_NONE &&
                         <CheckBoxLineComponent label="Apply fog" target={mesh} propertyName="applyFog" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     {
@@ -193,15 +193,15 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                         <CheckBoxLineComponent label="Compute bones using shaders" target={mesh} propertyName="computeBonesUsingShaders" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     }
                     <CheckBoxLineComponent label="Collisions" target={mesh} propertyName="checkCollisions" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <TextLineComponent label="Has normals" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind) ? "Yes" : "No"} />
-                    <TextLineComponent label="Has vertex colors" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.ColorKind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has UV set 0" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UVKind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has UV set 1" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UV2Kind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has UV set 2" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UV3Kind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has UV set 3" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.UV4Kind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has tangents" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.TangentKind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has matrix weights" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.MatricesWeightsKind) ? "Yes" : "No"} />
-                    <TextLineComponent label="has matrix indices" value={mesh.isVerticesDataPresent(BABYLON.VertexBuffer.MatricesIndicesKind) ? "Yes" : "No"} />
+                    <TextLineComponent label="Has normals" value={mesh.isVerticesDataPresent(VertexBuffer.NormalKind) ? "Yes" : "No"} />
+                    <TextLineComponent label="Has vertex colors" value={mesh.isVerticesDataPresent(VertexBuffer.ColorKind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has UV set 0" value={mesh.isVerticesDataPresent(VertexBuffer.UVKind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has UV set 1" value={mesh.isVerticesDataPresent(VertexBuffer.UV2Kind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has UV set 2" value={mesh.isVerticesDataPresent(VertexBuffer.UV3Kind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has UV set 3" value={mesh.isVerticesDataPresent(VertexBuffer.UV4Kind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has tangents" value={mesh.isVerticesDataPresent(VertexBuffer.TangentKind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has matrix weights" value={mesh.isVerticesDataPresent(VertexBuffer.MatricesWeightsKind) ? "Yes" : "No"} />
+                    <TextLineComponent label="has matrix indices" value={mesh.isVerticesDataPresent(VertexBuffer.MatricesIndicesKind) ? "Yes" : "No"} />
                 </LineContainerComponent>
                 {
                     mesh.physicsImpostor != null &&
@@ -219,7 +219,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                         <CheckBoxLineComponent label="Display normals" isSelected={() => displayNormals} onSelect={() => this.displayNormals()} />
                     }
                     {
-                        mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind) &&
+                        mesh.isVerticesDataPresent(VertexBuffer.NormalKind) &&
                         <CheckBoxLineComponent label="Render vertex normals" isSelected={() => renderNormalVectors} onSelect={() => this.renderNormalVectors()} />
                     }
                     <AxesViewerComponent node={mesh} />

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Observable, Scene, BaseTexture, Nullable, Vector3 } from "babylonjs";
+import { Observable, Scene, BaseTexture, Nullable, Vector3, CubeTexture, Tools, ImageProcessingConfiguration } from "babylonjs";
 import { PropertyChangedEvent } from "../../../propertyChangedEvent";
 import { LineContainerComponent } from "../../lineContainerComponent";
 import { RadioButtonLineComponent } from "../../lines/radioLineComponent";
@@ -15,15 +15,15 @@ import { OptionsLineComponent } from "../../lines/optionsLineComponent";
 import { LockObject } from "./lockObject";
 
 interface IScenePropertyGridComponentProps {
-    scene: Scene,
-    lockObject: LockObject,
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>,
-    onSelectionChangedObservable?: Observable<any>
+    scene: Scene;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    onSelectionChangedObservable?: Observable<any>;
 }
 
 export class ScenePropertyGridComponent extends React.Component<IScenePropertyGridComponentProps> {
     private _storedEnvironmentTexture: Nullable<BaseTexture>;
-    private _renderingModeGroupObservable = new BABYLON.Observable<RadioButtonLineComponent>();
+    private _renderingModeGroupObservable = new Observable<RadioButtonLineComponent>();
 
     constructor(props: IScenePropertyGridComponentProps) {
         super(props);
@@ -56,14 +56,14 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
         }
 
         const scene = this.props.scene;
-        BABYLON.Tools.ReadFile(file, (data) => {
+        Tools.ReadFile(file, (data) => {
             var blob = new Blob([data], { type: "octet/stream" });
             var url = URL.createObjectURL(blob);
             if (isFileDDS) {
-                scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData(url, scene, ".dds");
+                scene.environmentTexture = CubeTexture.CreateFromPrefilteredData(url, scene, ".dds");
             }
             else {
-                scene.environmentTexture = new BABYLON.CubeTexture(url, scene,
+                scene.environmentTexture = new CubeTexture(url, scene,
                     undefined, undefined, undefined,
                     () => {
                     },
@@ -95,7 +95,6 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
     render() {
         const scene = this.props.scene;
 
-
         const physicsEngine = scene.getPhysicsEngine();
         let dummy: Nullable<{ gravity: Vector3, timeStep: number }> = null;
 
@@ -103,15 +102,15 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
             dummy = {
                 gravity: physicsEngine.gravity,
                 timeStep: physicsEngine.getTimeStep()
-            }
+            };
         }
 
         const imageProcessing = scene.imageProcessingConfiguration;
 
         var toneMappingOptions = [
-            { label: "Standard", value: BABYLON.ImageProcessingConfiguration.TONEMAPPING_STANDARD },
-            { label: "ACES", value: BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES }
-        ]
+            { label: "Standard", value: ImageProcessingConfiguration.TONEMAPPING_STANDARD },
+            { label: "ACES", value: ImageProcessingConfiguration.TONEMAPPING_ACES }
+        ];
 
         return (
             <div className="pane">
@@ -136,13 +135,13 @@ export class ScenePropertyGridComponent extends React.Component<IScenePropertyGr
                     <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Contrast" target={imageProcessing} propertyName="contrast" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <SliderLineComponent minimum={0} maximum={4} step={0.1} label="Exposure" target={imageProcessing} propertyName="exposure" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     <CheckBoxLineComponent label="Tone mapping" target={imageProcessing} propertyName="toneMappingEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <OptionsLineComponent label="Tone mapping type" options={toneMappingOptions} target={imageProcessing} propertyName="toneMappingType" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ mode: value })} />
+                    <OptionsLineComponent label="Tone mapping type" options={toneMappingOptions} target={imageProcessing} propertyName="toneMappingType" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={(value) => this.setState({ mode: value })} />
                 </LineContainerComponent>
                 {
                     dummy !== null &&
                     <LineContainerComponent title="PHYSICS" closed={true}>
-                        <FloatLineComponent lockObject={this.props.lockObject} label="Time step" target={dummy} propertyName="timeStep" onChange={newValue => this.updateTimeStep(newValue)} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                        <Vector3LineComponent label="Gravity" target={dummy} propertyName="gravity" onChange={newValue => this.updateGravity(newValue)} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <FloatLineComponent lockObject={this.props.lockObject} label="Time step" target={dummy} propertyName="timeStep" onChange={(newValue) => this.updateTimeStep(newValue)} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                        <Vector3LineComponent label="Gravity" target={dummy} propertyName="gravity" onChange={(newValue) => this.updateGravity(newValue)} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     </LineContainerComponent>
                 }
                 <LineContainerComponent title="COLLISIONS" closed={true}>

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { PaneComponent, IPaneComponentProps } from "../paneComponent";
 import { TextLineComponent } from "../lines/textLineComponent";
 import { LineContainerComponent } from "../lineContainerComponent";
-import { SceneInstrumentation, EngineInstrumentation, Nullable } from "babylonjs";
+import { SceneInstrumentation, EngineInstrumentation, Nullable, Engine } from "babylonjs";
 import { ValueLineComponent } from "../lines/valueLineComponent";
 import { BooleanLineComponent } from "../lines/booleanLineComponent";
 
@@ -22,7 +22,7 @@ export class StatisticsTabComponent extends PaneComponent {
             return;
         }
 
-        this._sceneInstrumentation = new BABYLON.SceneInstrumentation(scene);
+        this._sceneInstrumentation = new SceneInstrumentation(scene);
         this._sceneInstrumentation.captureActiveMeshesEvaluationTime = true;
         this._sceneInstrumentation.captureRenderTargetsRenderTime = true;
         this._sceneInstrumentation.captureFrameTime = true;
@@ -33,7 +33,7 @@ export class StatisticsTabComponent extends PaneComponent {
         this._sceneInstrumentation.capturePhysicsTime = true;
         this._sceneInstrumentation.captureAnimationsTime = true;
 
-        this._engineInstrumentation = new BABYLON.EngineInstrumentation(scene.getEngine());
+        this._engineInstrumentation = new EngineInstrumentation(scene.getEngine());
         this._engineInstrumentation.captureGPUFrameTime = true;
 
         this._timerIntervalId = window.setInterval(() => this.forceUpdate(), 500);
@@ -67,7 +67,7 @@ export class StatisticsTabComponent extends PaneComponent {
 
         return (
             <div className="pane">
-                <TextLineComponent label="Version" value={BABYLON.Engine.Version} color="rgb(113, 159, 255)" />
+                <TextLineComponent label="Version" value={Engine.Version} color="rgb(113, 159, 255)" />
                 <ValueLineComponent label="FPS" value={engine.getFps()} fractionDigits={0} />
                 <LineContainerComponent title="COUNT">
                     <TextLineComponent label="Total meshes" value={scene.meshes.length.toString()} />

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

@@ -2,10 +2,10 @@ 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, EnvironmentTextureTools, CubeTexture } from "babylonjs";
+import { VideoRecorder, Nullable, TransformNode, PBRMaterial, StandardMaterial, BackgroundMaterial, EnvironmentTextureTools, CubeTexture, Tools, Mesh, Texture, SceneSerializer } from "babylonjs";
 import { GLTFComponent } from "./tools/gltfComponent";
 import { GLTFData } from "babylonjs-serializers";
-
+import { GLTF2Export } from "babylonjs-serializers/src/index";
 
 export class ToolsTabComponent extends PaneComponent {
     private _videoRecorder: Nullable<VideoRecorder>;
@@ -18,7 +18,7 @@ export class ToolsTabComponent extends PaneComponent {
 
     componentWillMount() {
         if (!(BABYLON as any).GLTF2Export) {
-            BABYLON.Tools.LoadScript("https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js", () => {
+            Tools.LoadScript("https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js", () => {
             });
             return;
         }
@@ -35,7 +35,7 @@ export class ToolsTabComponent extends PaneComponent {
     captureScreenshot() {
         const scene = this.props.scene;
         if (scene.activeCamera) {
-            BABYLON.Tools.CreateScreenshotUsingRenderTarget(scene.getEngine(), scene.activeCamera, { precision: 1.0 }, undefined, undefined, 4, true);
+            Tools.CreateScreenshotUsingRenderTarget(scene.getEngine(), scene.activeCamera, { precision: 1.0 }, undefined, undefined, 4, true);
         }
     }
 
@@ -47,23 +47,23 @@ export class ToolsTabComponent extends PaneComponent {
 
         const scene = this.props.scene;
         if (!this._videoRecorder) {
-            this._videoRecorder = new BABYLON.VideoRecorder(scene.getEngine());
+            this._videoRecorder = new VideoRecorder(scene.getEngine());
         }
 
         this._videoRecorder.startRecording().then(() => {
-            this.setState({ tag: "Record video" })
+            this.setState({ tag: "Record video" });
         });
-        this.setState({ tag: "Stop recording" })
+        this.setState({ tag: "Stop recording" });
     }
 
     shouldExport(transformNode: TransformNode): boolean {
 
         // No skybox
-        if (transformNode instanceof BABYLON.Mesh) {
+        if (transformNode instanceof Mesh) {
             if (transformNode.material) {
                 const material = transformNode.material as PBRMaterial | StandardMaterial | BackgroundMaterial;
                 const reflectionTexture = material.reflectionTexture;
-                if (reflectionTexture && reflectionTexture.coordinatesMode === BABYLON.Texture.SKYBOX_MODE) {
+                if (reflectionTexture && reflectionTexture.coordinatesMode === Texture.SKYBOX_MODE) {
                     return false;
                 }
             }
@@ -75,7 +75,7 @@ export class ToolsTabComponent extends PaneComponent {
     exportGLTF() {
         const scene = this.props.scene;
 
-        BABYLON.GLTF2Export.GLBAsync(scene, "scene", {
+        GLTF2Export.GLBAsync(scene, "scene", {
             shouldExportTransformNode: (transformNode) => this.shouldExport(transformNode)
         }).then((glb: GLTFData) => {
             glb.downloadFiles();
@@ -85,10 +85,10 @@ export class ToolsTabComponent extends PaneComponent {
     exportBabylon() {
         const scene = this.props.scene;
 
-        var strScene = JSON.stringify(BABYLON.SceneSerializer.Serialize(scene));
+        var strScene = JSON.stringify(SceneSerializer.Serialize(scene));
         var blob = new Blob([strScene], { type: "octet/stream" });
 
-        BABYLON.Tools.Download(blob, "scene.babylon")
+        Tools.Download(blob, "scene.babylon");
     }
 
     createEnvTexture() {
@@ -96,7 +96,7 @@ export class ToolsTabComponent extends PaneComponent {
         EnvironmentTextureTools.CreateEnvTextureAsync(scene.environmentTexture as CubeTexture)
             .then((buffer: ArrayBuffer) => {
                 var blob = new Blob([buffer], { type: "octet/stream" });
-                BABYLON.Tools.Download(blob, "environment.env");
+                Tools.Download(blob, "environment.env");
             })
             .catch((error: any) => {
                 console.error(error);

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

@@ -7,10 +7,10 @@ import { AdvancedDynamicTexture, Control } from 'babylonjs-gui';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface IAdvancedDynamicTextureTreeItemComponentProps {
-    texture: AdvancedDynamicTexture,
-    extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangedObservable?: Observable<any>,
-    onClick: () => void
+    texture: AdvancedDynamicTexture;
+    extensibilityGroups?: IExplorerExtensibilityGroup[];
+    onSelectionChangedObservable?: Observable<any>;
+    onClick: () => void;
 }
 
 export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAdvancedDynamicTextureTreeItemComponentProps, { isInPickingMode: boolean }> {
@@ -60,6 +60,6 @@ export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAd
                 </div>
                 <ExtensionsComponent target={this.props.texture} extensibilityGroups={this.props.extensibilityGroups} />
             </div>
-        )
+        );
     }
 }

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

@@ -7,9 +7,9 @@ import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface IControlTreeItemComponentProps {
-    control: Control,
-    extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onClick: () => void
+    control: Control;
+    extensibilityGroups?: IExplorerExtensibilityGroup[];
+    onClick: () => void;
 }
 
 export class ControlTreeItemComponent extends React.Component<IControlTreeItemComponentProps, { isActive: boolean, isVisible: boolean }> {
@@ -37,7 +37,7 @@ export class ControlTreeItemComponent extends React.Component<IControlTreeItemCo
         const control = this.props.control;
         const name = (control.name || "No name") + ` [${control.getClassName()}]`;
         const isActiveElement = this.state.isActive ? <FontAwesomeIcon icon={faHighlighter} /> : <FontAwesomeIcon icon={faHighlighter} className="isNotActive" />;
-        const visibilityElement = this.state.isVisible ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} className="isNotActive" />
+        const visibilityElement = this.state.isVisible ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} className="isNotActive" />;
 
         return (
             <div className="controlTools">
@@ -50,6 +50,6 @@ export class ControlTreeItemComponent extends React.Component<IControlTreeItemCo
                 </div>
                 <ExtensionsComponent target={control} extensibilityGroups={this.props.extensibilityGroups} />
             </div>
-        )
+        );
     }
 }

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

@@ -1,4 +1,4 @@
-import { AbstractMesh, Mesh, IExplorerExtensibilityGroup } from "babylonjs";
+import { AbstractMesh, Mesh, IExplorerExtensibilityGroup, BoundingBoxGizmo, Color3, PointerDragBehavior } from "babylonjs";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCube } from '@fortawesome/free-solid-svg-icons';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
@@ -8,9 +8,9 @@ import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
 
 interface IMeshTreeItemComponentProps {
-    mesh: AbstractMesh,
-    extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onClick: () => void
+    mesh: AbstractMesh;
+    extensibilityGroups?: IExplorerExtensibilityGroup[];
+    onClick: () => void;
 }
 
 export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponentProps, { isGizmoEnabled: boolean, isVisible: boolean }> {
@@ -19,7 +19,7 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
 
         const mesh = this.props.mesh;
 
-        this.state = { isGizmoEnabled: mesh.metadata && mesh.metadata.gizmo, isVisible: this.props.mesh.isVisible }
+        this.state = { isGizmoEnabled: mesh.metadata && mesh.metadata.gizmo, isVisible: this.props.mesh.isVisible };
     }
 
     showGizmos(): void {
@@ -45,9 +45,9 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
             }
 
             // Connect to gizmo
-            const dummy = BABYLON.BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(mesh as Mesh);
+            const dummy = BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(mesh as Mesh);
             dummy.metadata = { hidden: true };
-            const gizmo = new BABYLON.BoundingBoxGizmo(BABYLON.Color3.FromHexString("#0984e3"));
+            const gizmo = new BoundingBoxGizmo(Color3.FromHexString("#0984e3"));
             gizmo.attachedMesh = dummy;
 
             gizmo.updateBoundingBox();
@@ -55,7 +55,7 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
             gizmo.fixedDragMeshScreenSize = true;
             mesh.metadata.gizmo = gizmo;
 
-            var pointerDragBehavior = new BABYLON.PointerDragBehavior();
+            var pointerDragBehavior = new PointerDragBehavior();
             pointerDragBehavior.useObjectOrienationForDragging = false;
 
             dummy.addBehavior(pointerDragBehavior);
@@ -94,7 +94,7 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
     render() {
         const mesh = this.props.mesh;
 
-        const visibilityElement = this.state.isVisible ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} className="isNotActive" />
+        const visibilityElement = this.state.isVisible ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} className="isNotActive" />;
 
         return (
             <div className="meshTools">
@@ -109,6 +109,6 @@ export class MeshTreeItemComponent extends React.Component<IMeshTreeItemComponen
                     <ExtensionsComponent target={mesh} extensibilityGroups={this.props.extensibilityGroups} />
                 }
             </div>
-        )
+        );
     }
 }

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

@@ -1,15 +1,15 @@
-import { Scene, Observable, PointerInfo, Observer, Nullable, GizmoManager, IExplorerExtensibilityGroup } from "babylonjs";
+import { Scene, Observable, PointerInfo, Observer, Nullable, GizmoManager, IExplorerExtensibilityGroup, PointerEventTypes } from "babylonjs";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSyncAlt, faImage, faCrosshairs, faArrowsAlt, faCompress, faRedoAlt } from '@fortawesome/free-solid-svg-icons';
 import { ExtensionsComponent } from "../extensionsComponent";
 import * as React from "react";
 
 interface ISceneTreeItemComponentProps {
-    scene: Scene,
-    onRefresh: () => void,
-    selectedEntity?: any,
-    extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangedObservable?: Observable<any>
+    scene: Scene;
+    onRefresh: () => void;
+    selectedEntity?: any;
+    extensibilityGroups?: IExplorerExtensibilityGroup[];
+    onSelectionChangedObservable?: Observable<any>;
 }
 
 export class SceneTreeItemComponent extends React.Component<ISceneTreeItemComponentProps, { isSelected: boolean, isInPickingMode: boolean, gizmoMode: number }> {
@@ -101,12 +101,12 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
         if (!this.state.isInPickingMode) {
             this._onPointerObserver = scene.onPointerObservable.add(() => {
                 const pickPosition = scene.unTranslatedPointer;
-                const pickInfo = scene.pick(pickPosition.x, pickPosition.y, mesh => mesh.isEnabled() && mesh.isVisible && mesh.getTotalVertices() > 0);
+                const pickInfo = scene.pick(pickPosition.x, pickPosition.y, (mesh) => mesh.isEnabled() && mesh.isVisible && mesh.getTotalVertices() > 0);
 
                 if (pickInfo && pickInfo.hit && this.props.onSelectionChangedObservable) {
                     this.props.onSelectionChangedObservable.notifyObservers(pickInfo.pickedMesh);
                 }
-            }, BABYLON.PointerEventTypes.POINTERTAP)
+            }, PointerEventTypes.POINTERTAP);
         }
 
         this.setState({ isInPickingMode: !this.state.isInPickingMode });
@@ -186,6 +186,6 @@ export class SceneTreeItemComponent extends React.Component<ISceneTreeItemCompon
                     }
                 </div>
             </div>
-        )
+        );
     }
 }

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Scene, Observer, Nullable, IExplorerExtensibilityGroup } from "babylonjs";
+import { Scene, Observer, Nullable, IExplorerExtensibilityGroup, Engine } from "babylonjs";
 import { TreeItemComponent } from "./treeItemComponent";
 import Resizable from "re-resizable";
 import { HeaderComponent } from "../headerComponent";
@@ -10,7 +10,7 @@ import { GlobalState } from "components/globalState";
 require("./sceneExplorer.scss");
 
 interface ISceneExplorerFilterComponentProps {
-    onFilter: (filter: string) => void
+    onFilter: (filter: string) => void;
 }
 
 export class SceneExplorerFilterComponent extends React.Component<ISceneExplorerFilterComponentProps> {
@@ -29,15 +29,15 @@ export class SceneExplorerFilterComponent extends React.Component<ISceneExplorer
 }
 
 interface ISceneExplorerComponentProps {
-    scene: Scene,
-    noCommands?: boolean,
-    noHeader?: boolean,
-    noExpand?: boolean,
-    extensibilityGroups?: IExplorerExtensibilityGroup[],
-    globalState: GlobalState,
-    popupMode?: boolean,
-    onPopup?: () => void,
-    onClose?: () => void
+    scene: Scene;
+    noCommands?: boolean;
+    noHeader?: boolean;
+    noExpand?: boolean;
+    extensibilityGroups?: IExplorerExtensibilityGroup[];
+    globalState: GlobalState;
+    popupMode?: boolean;
+    onPopup?: () => void;
+    onClose?: () => void;
 }
 
 export class SceneExplorerComponent extends React.Component<ISceneExplorerComponentProps, { filter: Nullable<string>, selectedEntity: any, scene: Scene }> {
@@ -74,7 +74,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         }
 
         if (this._onNewSceneAddedObserver) {
-            BABYLON.Engine.LastCreatedEngine!.onNewSceneAddedObservable.remove(this._onNewSceneAddedObserver);
+            Engine.LastCreatedEngine!.onNewSceneAddedObservable.remove(this._onNewSceneAddedObserver);
         }
 
         const scene = this.state.scene;
@@ -146,9 +146,9 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         let search = false;
         let goNext = false;
 
-        if (keyEvent.keyCode === 38) { // up 
+        if (keyEvent.keyCode === 38) { // up
             search = true;
-        } else if (keyEvent.keyCode === 40) { // down 
+        } else if (keyEvent.keyCode === 40) { // down
             goNext = true;
             search = true;
         } else if (keyEvent.keyCode === 13 || keyEvent.keyCode === 39) { // enter or right
@@ -186,12 +186,12 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         const scene = this.state.scene;
 
         if (!scene) {
-            this._onNewSceneAddedObserver = BABYLON.Engine.LastCreatedEngine!.onNewSceneAddedObservable.addOnce((scene) => this.setState({ scene: scene }));
+            this._onNewSceneAddedObserver = Engine.LastCreatedEngine!.onNewSceneAddedObservable.addOnce((scene) => this.setState({ scene: scene }));
             return null;
         }
 
-        var guiElements = scene.textures.filter(t => t.getClassName() === "AdvancedDynamicTexture");
-        var textures = scene.textures.filter(t => t.getClassName() !== "AdvancedDynamicTexture");
+        var guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
+        var textures = scene.textures.filter((t) => t.getClassName() !== "AdvancedDynamicTexture");
 
         return (
             <div id="tree">
@@ -209,7 +209,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                     <TreeItemComponent extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.animationGroups} label="Animation groups" offset={1} onSelectionChangedObservable={this.props.globalState.onSelectionChangedObservable} filter={this.state.filter} />
                 }
             </div>
-        )
+        );
     }
 
     onClose() {
@@ -270,7 +270,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
         }
 
         return (
-            <Resizable tabIndex={-1} id="sceneExplorer" ref="sceneExplorer" size={{ height: "100%" }} minWidth={300} maxWidth={600} minHeight="100%" enable={{ top: false, right: true, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }} onKeyDown={keyEvent => this.processKeys(keyEvent)}>
+            <Resizable tabIndex={-1} id="sceneExplorer" ref="sceneExplorer" size={{ height: "100%" }} minWidth={300} maxWidth={600} minHeight="100%" enable={{ top: false, right: true, bottom: false, left: false, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false }} onKeyDown={(keyEvent) => this.processKeys(keyEvent)}>
                 {
                     !this.props.noHeader &&
                     <HeaderComponent title="SCENE EXPLORER" noExpand={this.props.noExpand} noCommands={this.props.noCommands} onClose={() => this.onClose()} onPopup={() => this.onPopup()} />

inspector/src/components/sceneExplorer/treeItemSpecializedComponent.tsx

@@ -14,11 +14,11 @@ import { AdvancedDynamicTextureTreeItemComponent } from "./entities/gui/advanced
 import { AnimationGroupItemComponent } from "./entities/animationGroupTreeItemComponent";
 
 interface ITreeItemSpecializedComponentProps {
-    label: string,
-    entity?: any,
-    extensibilityGroups?: IExplorerExtensibilityGroup[],
-    onSelectionChangedObservable?: Observable<any>,
-    onClick?: () => void
+    label: string;
+    entity?: any;
+    extensibilityGroups?: IExplorerExtensibilityGroup[];
+    onSelectionChangedObservable?: Observable<any>;
+    onClick?: () => void;
 }
 
 export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpecializedComponentProps> {
@@ -86,6 +86,6 @@ export class TreeItemSpecializedComponent extends React.Component<ITreeItemSpeci
             <div className="meshTools">
                 <TreeItemLabelComponent label={entity.name} onClick={() => this.onClick()} icon={faProjectDiagram} color="cornflowerblue" />
             </div>
-        )
+        );
     }
 }

inspector/src/inspector.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { ActionTabsComponent } from "./components/actionTabs/actionTabsComponent";
 import { SceneExplorerComponent } from "./components/sceneExplorer/sceneExplorerComponent";
-import { Scene, Observable, Observer, Nullable, IInspectorOptions } from "babylonjs";
+import { Scene, Observable, Observer, Nullable, IInspectorOptions, SceneLoader, Engine } from "babylonjs";
 import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
 import { PropertyChangedEvent } from "./components/propertyChangedEvent";
 import { GlobalState } from "./components/globalState";
@@ -31,8 +31,8 @@ export class Inspector {
     private static _OpenedPane = 0;
     private static _OnBeforeRenderObserver: Nullable<Observer<Scene>>;
 
-    public static OnSelectionChangeObservable = new BABYLON.Observable<string>();
-    public static OnPropertyChangedObservable = new BABYLON.Observable<PropertyChangedEvent>();
+    public static OnSelectionChangeObservable = new Observable<string>();
+    public static OnPropertyChangedObservable = new Observable<PropertyChangedEvent>();
     private static _GlobalState = new GlobalState();
 
     private static _CopyStyles(sourceDoc: HTMLDocument, targetDoc: HTMLDocument) {
@@ -284,7 +284,7 @@ export class Inspector {
 
     public static EarlyAttachToLoader() {
         if (!this._GlobalState.onPluginActivatedObserver) {
-            this._GlobalState.onPluginActivatedObserver = BABYLON.SceneLoader.OnPluginActivatedObservable.add((loader: GLTFFileLoader) => {
+            this._GlobalState.onPluginActivatedObserver = SceneLoader.OnPluginActivatedObservable.add((loader: GLTFFileLoader) => {
                 if (loader.name === "gltf") {
                     this._GlobalState.prepareGLTFPlugin(loader);
                 }
@@ -319,12 +319,12 @@ export class Inspector {
         }
 
         if (!scene) {
-            scene = BABYLON.Engine.LastCreatedScene!;
+            scene = Engine.LastCreatedScene!;
         }
 
         this._Scene = scene;
 
-        var canvas = scene ? scene.getEngine().getRenderingCanvas() : BABYLON.Engine.LastCreatedEngine!.getRenderingCanvas();
+        var canvas = scene ? scene.getEngine().getRenderingCanvas() : Engine.LastCreatedEngine!.getRenderingCanvas();
 
         if (options.embedMode && options.showExplorer && options.showInspector) {
             if (options.popup) {
@@ -469,7 +469,7 @@ export class Inspector {
         this._Cleanup();
 
         if (!this._GlobalState.onPluginActivatedObserver) {
-            BABYLON.SceneLoader.OnPluginActivatedObservable.remove(this._GlobalState.onPluginActivatedObserver);
+            SceneLoader.OnPluginActivatedObservable.remove(this._GlobalState.onPluginActivatedObserver);
             this._GlobalState.onPluginActivatedObserver = null;
         }
     }

inspector/tsconfig.json

@@ -25,7 +25,7 @@
         "rootDir": "./",
         "paths": {
             "babylonjs": [
-                "../../dist/preview release/babylon.d.ts"
+                "../../dist/preview release/babylon.module.d.ts"
             ],
             "babylonjs-gui": [
                 "../../dist/preview release/gui/babylon.gui.module.d.ts"

inspector/webpack.config.js

@@ -22,32 +22,35 @@ module.exports = {
     resolve: {
         extensions: [".js", '.ts', ".tsx"],
     },
-    externals: {
-        babylonjs: {
-            root: "BABYLON",
-            commonjs: "babylonjs",
-            commonjs2: "babylonjs",
-            amd: "babylonjs"
-        },
-        "babylonjs-gui": {
-            root: ["BABYLON", "GUI"],
-            commonjs: "babylonjs-gui",
-            commonjs2: "babylonjs-gui",
-            amd: "babylonjs-gui"
-        },
-        "babylonjs-loaders": {
-            root: "BABYLON",
-            commonjs: "babylonjs-loaders",
-            commonjs2: "babylonjs-loaders",
-            amd: "babylonjs-loaders"
+    externals: [
+            {
+            babylonjs: {
+                root: "BABYLON",
+                commonjs: "babylonjs",
+                commonjs2: "babylonjs",
+                amd: "babylonjs"
+            },
+            "babylonjs-gui": {
+                root: ["BABYLON", "GUI"],
+                commonjs: "babylonjs-gui",
+                commonjs2: "babylonjs-gui",
+                amd: "babylonjs-gui"
+            },
+            "babylonjs-loaders": {
+                root: "BABYLON",
+                commonjs: "babylonjs-loaders",
+                commonjs2: "babylonjs-loaders",
+                amd: "babylonjs-loaders"
+            },
+            "babylonjs-serializers": {
+                root: "BABYLON",
+                commonjs: "babylonjs-serializers",
+                commonjs2: "babylonjs-serializers",
+                amd: "babylonjs-serializers"
+            }
         },
-        "babylonjs-serializers": {
-            root: "BABYLON",
-            commonjs: "babylonjs-serializers",
-            commonjs2: "babylonjs-serializers",
-            amd: "babylonjs-serializers"
-        }
-    },
+        /^babylonjs.*$/i
+    ],
     devtool: "source-map",
     module: {
         rules: [{

postProcessLibrary/tsconfig.json

@@ -24,7 +24,7 @@
         "rootDir": "./",
         "paths": {
             "babylonjs": [
-                "../../dist/preview release/babylon.d.ts"
+                "../../dist/preview release/babylon.module.d.ts"
             ]
         },
         "outDir": "./build"

postProcessLibrary/webpack.config.js

@@ -22,14 +22,17 @@ module.exports = {
     resolve: {
         extensions: [".js", '.ts']
     },
-    externals: {
-        babylonjs: {
-            root: "BABYLON",
-            commonjs: "babylonjs",
-            commonjs2: "babylonjs",
-            amd: "babylonjs"
-        }
-    },
+    externals: [
+        {
+            babylonjs: {
+                root: "BABYLON",
+                commonjs: "babylonjs",
+                commonjs2: "babylonjs",
+                amd: "babylonjs"
+            }
+        },
+        /^babylonjs.*$/i
+    ],
     devtool: "source-map",
     module: {
         rules: [{

proceduralTexturesLibrary/tsconfig.json

@@ -24,7 +24,7 @@
         "rootDir": "./",
         "paths": {
             "babylonjs": [
-                "../../dist/preview release/babylon.d.ts"
+                "../../dist/preview release/babylon.module.d.ts"
             ]
         },
         "outDir": "./build"

proceduralTexturesLibrary/webpack.config.js

@@ -23,14 +23,17 @@ module.exports = {
     resolve: {
         extensions: [".js", '.ts']
     },
-    externals: {
-        babylonjs: {
-            root: "BABYLON",
-            commonjs: "babylonjs",
-            commonjs2: "babylonjs",
-            amd: "babylonjs"
-        }
-    },
+    externals: [
+        {
+            babylonjs: {
+                root: "BABYLON",
+                commonjs: "babylonjs",
+                commonjs2: "babylonjs",
+                amd: "babylonjs"
+            }
+        },
+        /^babylonjs.*$/i
+    ],
     devtool: "source-map",
     module: {
         rules: [{

serializers/src/OBJ/objSerializer.ts

@@ -28,8 +28,8 @@ export class OBJExport {
             //Uses the position of the item in the scene, to the file (this back to normal in the end)
             let lastMatrix: Nullable<Matrix> = null;
             if (globalposition) {
-                var newMatrix = BABYLON.Matrix.Translation(mesh[j].position.x, mesh[j].position.y, mesh[j].position.z);
-                lastMatrix = BABYLON.Matrix.Translation(-(mesh[j].position.x), -(mesh[j].position.y), -(mesh[j].position.z));
+                var newMatrix = Matrix.Translation(mesh[j].position.x, mesh[j].position.y, mesh[j].position.z);
+                lastMatrix = Matrix.Translation(-(mesh[j].position.x), -(mesh[j].position.y), -(mesh[j].position.z));
                 mesh[j].bakeTransformIntoVertices(newMatrix);
             }
 

serializers/src/glTF/2.0/glTFAnimation.ts

@@ -404,7 +404,7 @@ export class _GLTFAnimation {
         if (animationType === Animation.ANIMATIONTYPE_FLOAT) { // handles single component x, y, z or w component animation by using a base property and animating over a component.
             property = animation.targetProperty.split('.');
             componentName = property ? property[1] : ''; // x, y, or z component
-            value = useQuaternion ? BABYLON.Quaternion.FromArray(basePositionRotationOrScale).normalize() : BABYLON.Vector3.FromArray(basePositionRotationOrScale);
+            value = useQuaternion ? Quaternion.FromArray(basePositionRotationOrScale).normalize() : Vector3.FromArray(basePositionRotationOrScale);
 
             switch (componentName) {
                 case 'x': {
@@ -545,7 +545,7 @@ export class _GLTFAnimation {
                     }
                 }
                 else {
-                    basePositionRotationOrScale = BABYLON.Quaternion.Identity().asArray();
+                    basePositionRotationOrScale = Quaternion.Identity().asArray();
                 }
             }
             else {

serializers/src/glTF/2.0/glTFExporter.ts

@@ -881,7 +881,7 @@ export class _Exporter {
      */
     private setNodeTransformation(node: INode, babylonTransformNode: TransformNode): void {
         if (!babylonTransformNode.getPivotPoint().equalsToFloats(0, 0, 0)) {
-            BABYLON.Tools.Warn("Pivot points are not supported in the glTF serializer");
+            Tools.Warn("Pivot points are not supported in the glTF serializer");
         }
         if (!babylonTransformNode.position.equalsToFloats(0, 0, 0)) {
             node.translation = this._convertToRightHandedSystem ? _GLTFUtilities._GetRightHandedPositionVector3(babylonTransformNode.position).asArray() : babylonTransformNode.position.asArray();

serializers/src/glTF/2.0/glTFMaterialExporter.ts

@@ -1,4 +1,4 @@
-import { Nullable, Color3, Scalar, Material, StandardMaterial, PBRMetallicRoughnessMaterial, PBRMaterial, Tools, Engine, Scene, Texture, PostProcess, RawTexture, BaseTexture, TextureTools } from "babylonjs";
+import { Nullable, Color3, Scalar, Material, StandardMaterial, PBRMetallicRoughnessMaterial, PBRMaterial, Tools, Engine, Scene, Texture, PostProcess, RawTexture, BaseTexture, TextureTools, Vector2 } from "babylonjs";
 import { ITextureInfo, ImageMimeType, IMaterial, IMaterialPbrMetallicRoughness, MaterialAlphaMode, IMaterialOcclusionTextureInfo, ISampler, TextureMagFilter, TextureMinFilter, TextureWrapMode, ITexture, IImage } from "babylonjs-gltf2interface";
 import { _Exporter } from "./glTFExporter";
 
@@ -10,11 +10,11 @@ interface _IPBRSpecularGlossiness {
     /**
      * Represents the linear diffuse factors of the material
     */
-    diffuseColor: BABYLON.Color3;
+    diffuseColor: Color3;
     /**
      * Represents the linear specular factors of the material
     */
-    specularColor: BABYLON.Color3;
+    specularColor: Color3;
     /**
      * Represents the smoothness of the material
     */
@@ -29,7 +29,7 @@ interface _IPBRMetallicRoughness {
     /**
      * Represents the albedo color of the material
     */
-    baseColor: BABYLON.Color3;
+    baseColor: Color3;
     /**
      * Represents the metallness of the material
     */
@@ -174,10 +174,10 @@ export class _GLTFMaterialExporter {
      * @returns glTF Metallic Roughness Material representation
      */
     public _convertToGLTFPBRMetallicRoughness(babylonStandardMaterial: StandardMaterial): IMaterialPbrMetallicRoughness {
-        const P0 = new BABYLON.Vector2(0, 1);
-        const P1 = new BABYLON.Vector2(0, 0.1);
-        const P2 = new BABYLON.Vector2(0, 0.1);
-        const P3 = new BABYLON.Vector2(1300, 0.1);
+        const P0 = new Vector2(0, 1);
+        const P1 = new Vector2(0, 0.1);
+        const P2 = new Vector2(0, 0.1);
+        const P3 = new Vector2(1300, 0.1);
 
         /**
          * Given the control points, solve for x based on a given t for a cubic bezier curve
@@ -246,7 +246,7 @@ export class _GLTFMaterialExporter {
         const b = diffuse * oneMinusSpecularStrength / (1.0 - this._DielectricSpecular.r) + specular - 2.0 * this._DielectricSpecular.r;
         const c = this._DielectricSpecular.r - specular;
         const D = b * b - 4.0 * a * c;
-        return BABYLON.Scalar.Clamp((-b + Math.sqrt(D)) / (2.0 * a), 0, 1);
+        return Scalar.Clamp((-b + Math.sqrt(D)) / (2.0 * a), 0, 1);
     }
 
     /**
@@ -508,7 +508,7 @@ export class _GLTFMaterialExporter {
                         resolve(dataURL);
                     }
                     else {
-                        BABYLON.Tools.ToBlob(canvas, (blob) => {
+                        Tools.ToBlob(canvas, (blob) => {
                             if (blob) {
                                 let fileReader = new FileReader();
                                 fileReader.onload = (event: any) => {

serializers/tsconfig.json

@@ -24,7 +24,7 @@
       "rootDir": "./",
       "paths": {
           "babylonjs": [
-            "../../dist/preview release/babylon.d.ts",
+            "../../dist/preview release/babylon.module.d.ts",
           ],
           "babylonjs-gltf2interface": [
             "../../dist/preview release/glTF2Interface/babylon.glTF2Interface.d.ts"

serializers/webpack.config.js

@@ -22,14 +22,17 @@ module.exports = {
     resolve: {
         extensions: [".js", '.ts']
     },
-    externals: {
-        babylonjs: {
-            root: "BABYLON",
-            commonjs: "babylonjs",
-            commonjs2: "babylonjs",
-            amd: "babylonjs"
-        }
-    },
+    externals: [
+        {
+            babylonjs: {
+                root: "BABYLON",
+                commonjs: "babylonjs",
+                commonjs2: "babylonjs",
+                amd: "babylonjs"
+            }
+        },
+        /^babylonjs.*$/i
+    ],
     devtool: "source-map",
     module: {
         rules: [{