Fix grid material

dist/preview release/babylon.max.js

@@ -31633,8 +31633,7 @@ var BABYLON;
             this._cachedSize = BABYLON.Size.Zero();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
             if (this._scene) {
-                this._scene.textures.push(this);
-                this._scene.onNewTextureAddedObservable.notifyObservers(this);
+                this._scene.addTexture(this);
                 this.uniqueId = this._scene.getUniqueId();
             }
             this._uid = null;
@@ -66680,6 +66679,17 @@ var BABYLON;
 
 //# sourceMappingURL=babylon.rayHelper.js.map
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var BABYLON;
 (function (BABYLON) {
     Object.defineProperty(BABYLON.Scene.prototype, "debugLayer", {
@@ -66722,25 +66732,12 @@ var BABYLON;
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
-            if (config === void 0) { config = {}; }
             if (this.isVisible()) {
                 return;
             }
-            var popup = config.popup || false;
-            var parentElement = config.parentElement || null;
+            var userOptions = __assign({ overlay: false, showExplorer: true, showInspector: true, embedMode: false, handleResize: true, enablePopup: true }, config);
             this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-            var options = {
-                popup: popup,
-                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
-                embedHostRoot: null,
-                overlay: config.overlay,
-                handleResize: config.handleResize,
-                enablePopup: config.enablePopup
-            };
-            if (parentElement) {
-                options.embedHostRoot = parentElement;
-            }
-            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
+            this.BJSINSPECTOR.Inspector.Show(this._scene, userOptions);
         };
         /**
          * Get if the inspector is visible or not.
@@ -66756,29 +66753,10 @@ var BABYLON;
             this.BJSINSPECTOR.Inspector.Hide();
         };
         /**
-        *
-        * Launch the debugLayer.
-        *
-        * initialTab:
-        * | Value | Tab Name |
-        * | --- | --- |
-        * | 0 | Scene |
-        * | 1 | Console |
-        * | 2 | Stats |
-        * | 3 | Textures |
-        * | 4 | Mesh |
-        * | 5 | Light |
-        * | 6 | Material |
-        * | 7 | GLTF |
-        * | 8 | GUI |
-        * | 9 | Physics |
-        * | 10 | Camera |
-        * | 11 | Audio |
-        *
-        * @param config Define the configuration of the inspector
-        */
+          * Launch the debugLayer.
+          * @param config Define the configuration of the inspector
+          */
         DebugLayer.prototype.show = function (config) {
-            if (config === void 0) { config = {}; }
             if (typeof this.BJSINSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
                 BABYLON.Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));
@@ -73708,13 +73686,18 @@ var BABYLON;
          */
         CubeTexture.prototype.clone = function () {
             var _this = this;
-            return BABYLON.SerializationHelper.Clone(function () {
-                var scene = _this.getScene();
+            var scene = this.getScene();
+            var uniqueId = 0;
+            var newCubeTexture = BABYLON.SerializationHelper.Clone(function () {
                 if (!scene) {
                     return _this;
                 }
-                return new CubeTexture(_this.url, scene, _this._extensions, _this._noMipmap, _this._files);
+                var cubeTexture = new CubeTexture(_this.url, scene, _this._extensions, _this._noMipmap, _this._files);
+                uniqueId = cubeTexture.uniqueId;
+                return cubeTexture;
             }, this);
+            newCubeTexture.uniqueId = uniqueId;
+            return newCubeTexture;
         };
         __decorate([
             BABYLON.serialize("rotationY")

dist/preview release/babylon.no-module.max.js

@@ -31600,8 +31600,7 @@ var BABYLON;
             this._cachedSize = BABYLON.Size.Zero();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
             if (this._scene) {
-                this._scene.textures.push(this);
-                this._scene.onNewTextureAddedObservable.notifyObservers(this);
+                this._scene.addTexture(this);
                 this.uniqueId = this._scene.getUniqueId();
             }
             this._uid = null;
@@ -66647,6 +66646,17 @@ var BABYLON;
 
 //# sourceMappingURL=babylon.rayHelper.js.map
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var BABYLON;
 (function (BABYLON) {
     Object.defineProperty(BABYLON.Scene.prototype, "debugLayer", {
@@ -66689,25 +66699,12 @@ var BABYLON;
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
-            if (config === void 0) { config = {}; }
             if (this.isVisible()) {
                 return;
             }
-            var popup = config.popup || false;
-            var parentElement = config.parentElement || null;
+            var userOptions = __assign({ overlay: false, showExplorer: true, showInspector: true, embedMode: false, handleResize: true, enablePopup: true }, config);
             this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-            var options = {
-                popup: popup,
-                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
-                embedHostRoot: null,
-                overlay: config.overlay,
-                handleResize: config.handleResize,
-                enablePopup: config.enablePopup
-            };
-            if (parentElement) {
-                options.embedHostRoot = parentElement;
-            }
-            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
+            this.BJSINSPECTOR.Inspector.Show(this._scene, userOptions);
         };
         /**
          * Get if the inspector is visible or not.
@@ -66723,29 +66720,10 @@ var BABYLON;
             this.BJSINSPECTOR.Inspector.Hide();
         };
         /**
-        *
-        * Launch the debugLayer.
-        *
-        * initialTab:
-        * | Value | Tab Name |
-        * | --- | --- |
-        * | 0 | Scene |
-        * | 1 | Console |
-        * | 2 | Stats |
-        * | 3 | Textures |
-        * | 4 | Mesh |
-        * | 5 | Light |
-        * | 6 | Material |
-        * | 7 | GLTF |
-        * | 8 | GUI |
-        * | 9 | Physics |
-        * | 10 | Camera |
-        * | 11 | Audio |
-        *
-        * @param config Define the configuration of the inspector
-        */
+          * Launch the debugLayer.
+          * @param config Define the configuration of the inspector
+          */
         DebugLayer.prototype.show = function (config) {
-            if (config === void 0) { config = {}; }
             if (typeof this.BJSINSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
                 BABYLON.Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));
@@ -73675,13 +73653,18 @@ var BABYLON;
          */
         CubeTexture.prototype.clone = function () {
             var _this = this;
-            return BABYLON.SerializationHelper.Clone(function () {
-                var scene = _this.getScene();
+            var scene = this.getScene();
+            var uniqueId = 0;
+            var newCubeTexture = BABYLON.SerializationHelper.Clone(function () {
                 if (!scene) {
                     return _this;
                 }
-                return new CubeTexture(_this.url, scene, _this._extensions, _this._noMipmap, _this._files);
+                var cubeTexture = new CubeTexture(_this.url, scene, _this._extensions, _this._noMipmap, _this._files);
+                uniqueId = cubeTexture.uniqueId;
+                return cubeTexture;
             }, this);
+            newCubeTexture.uniqueId = uniqueId;
+            return newCubeTexture;
         };
         __decorate([
             BABYLON.serialize("rotationY")

dist/preview release/es6.js

@@ -31600,8 +31600,7 @@ var BABYLON;
             this._cachedSize = BABYLON.Size.Zero();
             this._scene = scene || BABYLON.Engine.LastCreatedScene;
             if (this._scene) {
-                this._scene.textures.push(this);
-                this._scene.onNewTextureAddedObservable.notifyObservers(this);
+                this._scene.addTexture(this);
                 this.uniqueId = this._scene.getUniqueId();
             }
             this._uid = null;
@@ -66647,6 +66646,17 @@ var BABYLON;
 
 //# sourceMappingURL=babylon.rayHelper.js.map
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var BABYLON;
 (function (BABYLON) {
     Object.defineProperty(BABYLON.Scene.prototype, "debugLayer", {
@@ -66689,25 +66699,12 @@ var BABYLON;
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
-            if (config === void 0) { config = {}; }
             if (this.isVisible()) {
                 return;
             }
-            var popup = config.popup || false;
-            var parentElement = config.parentElement || null;
+            var userOptions = __assign({ overlay: false, showExplorer: true, showInspector: true, embedMode: false, handleResize: true, enablePopup: true }, config);
             this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-            var options = {
-                popup: popup,
-                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
-                embedHostRoot: null,
-                overlay: config.overlay,
-                handleResize: config.handleResize,
-                enablePopup: config.enablePopup
-            };
-            if (parentElement) {
-                options.embedHostRoot = parentElement;
-            }
-            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
+            this.BJSINSPECTOR.Inspector.Show(this._scene, userOptions);
         };
         /**
          * Get if the inspector is visible or not.
@@ -66723,29 +66720,10 @@ var BABYLON;
             this.BJSINSPECTOR.Inspector.Hide();
         };
         /**
-        *
-        * Launch the debugLayer.
-        *
-        * initialTab:
-        * | Value | Tab Name |
-        * | --- | --- |
-        * | 0 | Scene |
-        * | 1 | Console |
-        * | 2 | Stats |
-        * | 3 | Textures |
-        * | 4 | Mesh |
-        * | 5 | Light |
-        * | 6 | Material |
-        * | 7 | GLTF |
-        * | 8 | GUI |
-        * | 9 | Physics |
-        * | 10 | Camera |
-        * | 11 | Audio |
-        *
-        * @param config Define the configuration of the inspector
-        */
+          * Launch the debugLayer.
+          * @param config Define the configuration of the inspector
+          */
         DebugLayer.prototype.show = function (config) {
-            if (config === void 0) { config = {}; }
             if (typeof this.BJSINSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
                 BABYLON.Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));
@@ -73675,13 +73653,18 @@ var BABYLON;
          */
         CubeTexture.prototype.clone = function () {
             var _this = this;
-            return BABYLON.SerializationHelper.Clone(function () {
-                var scene = _this.getScene();
+            var scene = this.getScene();
+            var uniqueId = 0;
+            var newCubeTexture = BABYLON.SerializationHelper.Clone(function () {
                 if (!scene) {
                     return _this;
                 }
-                return new CubeTexture(_this.url, scene, _this._extensions, _this._noMipmap, _this._files);
+                var cubeTexture = new CubeTexture(_this.url, scene, _this._extensions, _this._noMipmap, _this._files);
+                uniqueId = cubeTexture.uniqueId;
+                return cubeTexture;
             }, this);
+            newCubeTexture.uniqueId = uniqueId;
+            return newCubeTexture;
         };
         __decorate([
             BABYLON.serialize("rotationY")

inspector/src/Inspector.ts

@@ -3,33 +3,11 @@ 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 } from "babylonjs";
+import { Scene, Observable, Observer, Nullable, IInspectorOptions } from "babylonjs";
 import { EmbedHostComponent } from "./components/embedHost/embedHostComponent";
 import { PropertyChangedEvent } from "./components/propertyChangedEvent";
 import { GlobalState } from "./components/globalState";
 
-export interface IExtensibilityOption {
-    label: string;
-    action: (entity: any) => void;
-}
-
-export interface IExtensibilityGroup {
-    predicate: (entity: any) => boolean;
-    entries: IExtensibilityOption[];
-}
-
-export interface IInspectorOptions {
-    overlay?: boolean;
-    sceneExplorerRoot?: HTMLElement;
-    actionTabsRoot?: HTMLElement;
-    embedHostRoot?: HTMLElement;
-    showExplorer?: boolean;
-    showInspector?: boolean;
-    embedMode?: boolean;
-    handleResize?: boolean;
-    enablePopup?: boolean;
-    explorerExtensibility?: IExtensibilityGroup[];
-}
 
 interface IInternalInspectorOptions extends IInspectorOptions {
     popup: boolean;
@@ -156,6 +134,7 @@ export class Inspector {
     }
 
     private static _CreateActionTabs(scene: Scene, options: IInternalInspectorOptions, parentControlActions: Nullable<HTMLElement>) {
+        options.original = false;
 
         if (!options.actionTabsRoot || options.popup) {
             // Prepare the inspector host

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Scene, AbstractMesh } from "babylonjs";
+import { Scene, AbstractMesh, Nullable } from "babylonjs";
 import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
 
 interface IGridPropertyGridComponentProps {
@@ -7,7 +7,7 @@ interface IGridPropertyGridComponentProps {
 }
 
 export class GridPropertyGridComponent extends React.Component<IGridPropertyGridComponentProps, { isEnabled: boolean }> {
-    private _gridMesh: AbstractMesh;
+    private _gridMesh: Nullable<AbstractMesh>;
 
     constructor(props: IGridPropertyGridComponentProps) {
         super(props);
@@ -42,20 +42,22 @@ export class GridPropertyGridComponent extends React.Component<IGridPropertyGrid
 
         if (!this._gridMesh) {
             var extend = this.props.scene.getWorldExtends();
-            var width = extend.max.x - extend.min.x;
-            var depth = extend.max.z - extend.min.z;
+            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", width, depth, 1, scene);
+            this._gridMesh = BABYLON.Mesh.CreateGround("grid", 1.0, 1.0, 1, scene);
             if (!this._gridMesh.metadata) {
-                this._gridMesh.metadata = {}
+                this._gridMesh.metadata = {};
             }
+            this._gridMesh.scaling.x = width;
+            this._gridMesh.scaling.z = depth;
             this._gridMesh.metadata.isInspectorGrid = true;
             this._gridMesh.isPickable = false;
 
             var groundMaterial = new (BABYLON as any).GridMaterial("GridMaterial", scene);
-            groundMaterial.majorUnitFrequency = width / 10;
+            groundMaterial.majorUnitFrequency = 10;
             groundMaterial.minorUnitVisibility = 0.3;
-            groundMaterial.gridRatio = 1;
+            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);
@@ -70,7 +72,8 @@ export class GridPropertyGridComponent extends React.Component<IGridPropertyGrid
         }
 
         this.setState({ isEnabled: !this.state.isEnabled });
-        this._gridMesh.setEnabled(!this._gridMesh.isEnabled());
+        this._gridMesh.dispose(true, true);
+        this._gridMesh = null;
     }
 
     render() {

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

@@ -13,14 +13,14 @@ interface IMeshPropertyGridComponentProps {
     onPropertyChangedObservable?: Observable<PropertyChangedEvent>
 }
 
-export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, { paintNormals: boolean }> {
+export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGridComponentProps, { displayNormals: boolean }> {
     constructor(props: IMeshPropertyGridComponentProps) {
         super(props);
 
-        this.state = { paintNormals: false }
+        this.state = { displayNormals: false }
     }
 
-    paintNormals() {
+    displayNormals() {
         const mesh = this.props.mesh;
         const scene = mesh.getScene();
         if (!mesh.material) {
@@ -32,13 +32,13 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
 
             mesh.material = mesh.metadata.originalMaterial;
             mesh.metadata.originalMaterial = null;
-            this.setState({ paintNormals: false });
+            this.setState({ displayNormals: false });
         } else {
 
             if (!(BABYLON as any).NormalMaterial) {
-                this.setState({ paintNormals: true });
+                this.setState({ displayNormals: true });
                 BABYLON.Tools.LoadScript("https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.js", () => {
-                    this.paintNormals();
+                    this.displayNormals();
                 });
                 return;
             }
@@ -53,7 +53,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
             normalMaterial.sideOrientation = mesh.material.sideOrientation;
             normalMaterial.metadata = { hidden: true };
             mesh.material = normalMaterial;
-            this.setState({ paintNormals: true });
+            this.setState({ displayNormals: true });
         }
     }
 
@@ -70,7 +70,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
         const mesh = this.props.mesh;
         const scene = mesh.getScene();
 
-        const paintNormals = mesh.material != null && mesh.material.getClassName() === "NormalMaterial";
+        const displayNormals = mesh.material != null && mesh.material.getClassName() === "NormalMaterial";
 
         return (
             <div className="pane">
@@ -130,7 +130,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                     <CheckBoxLineComponent label="Show bounding box" target={mesh} propertyName="showBoundingBox" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                     {
                         mesh.material &&
-                        <CheckBoxLineComponent label="Paint normals" isSelected={() => paintNormals} onSelect={() => this.paintNormals()} />
+                        <CheckBoxLineComponent label="Display normals" isSelected={() => displayNormals} onSelect={() => this.displayNormals()} />
                     }
                 </LineContainerComponent>
             </div>

materialsLibrary/src/grid/grid.fragment.fx

@@ -11,9 +11,6 @@ uniform vec4 gridControl;
 uniform vec3 gridOffset;
 
 // Varying
-#ifdef TRANSPARENT
-varying vec4 vCameraSpacePosition;
-#endif
 varying vec3 vPosition;
 varying vec3 vNormal;
 
@@ -78,7 +75,7 @@ void main(void) {
     
     // Scale position to the requested ratio.
     float gridRatio = gridControl.x;
-    vec3 gridPos = (vPosition + gridOffset) / gridRatio;
+    vec3 gridPos = (vPosition + gridOffset.xyz) / gridRatio;
     
     // Find the contribution of each coords.
     float x = contributionOnAxis(gridPos.x);
@@ -103,10 +100,7 @@ void main(void) {
 
     float opacity = 1.0;
 #ifdef TRANSPARENT
-    float distanceToFragment = length(vCameraSpacePosition.xyz);
-    float cameraPassThrough = clamp(distanceToFragment - 0.25, 0.0, 1.0);
-
-    opacity = clamp(grid, 0.08, cameraPassThrough * gridControl.w * grid);
+    opacity = clamp(grid, 0.08, gridControl.w * grid);
 #endif    
 
 #ifdef OPACITY

materialsLibrary/src/grid/grid.vertex.fx

@@ -17,9 +17,6 @@ uniform mat4 view;
 uniform mat4 worldView;
 
 // Varying
-#ifdef TRANSPARENT
-    varying vec4 vCameraSpacePosition;
-#endif
 varying vec3 vPosition;
 varying vec3 vNormal;
 
@@ -42,10 +39,6 @@ void main(void) {
     vec4 cameraSpacePosition = worldView * vec4(position, 1.0);
     gl_Position = projection * cameraSpacePosition;
 
-    #ifdef TRANSPARENT
-        vCameraSpacePosition = cameraSpacePosition;
-    #endif
-
 #ifdef OPACITY
 #ifndef UV1
 	vec2 uv = vec2(0., 0.);

src/Debug/babylon.debugLayer.ts

@@ -4,6 +4,29 @@ module BABYLON {
     declare var INSPECTOR: any;
     // load the inspector using require, if not present in the global namespace.
 
+    export interface IExplorerExtensibilityOption {
+        label: string;
+        action: (entity: any) => void;
+    }
+
+    export interface IExplorerExtensibilityGroup {
+        predicate: (entity: any) => boolean;
+        entries: IExplorerExtensibilityOption[];
+    }
+
+    export interface IInspectorOptions {
+        overlay?: boolean;
+        sceneExplorerRoot?: HTMLElement;
+        actionTabsRoot?: HTMLElement;
+        embedHostRoot?: HTMLElement;
+        showExplorer?: boolean;
+        showInspector?: boolean;
+        embedMode?: boolean;
+        handleResize?: boolean;
+        enablePopup?: boolean;
+        explorerExtensibility?: IExplorerExtensibilityGroup[];
+    }
+
     export interface Scene {
         /**
          * @hidden
@@ -69,36 +92,24 @@ module BABYLON {
         }
 
         /** Creates the inspector window. */
-        private _createInspector(config: {
-            popup?: boolean,
-            embedMode?: boolean,
-            parentElement?: HTMLElement,
-            overlay?: boolean;
-            handleResize?: boolean;
-            enablePopup?: boolean;
-        } = {}) {
+        private _createInspector(config: Partial<IInspectorOptions>) {
             if (this.isVisible()) {
                 return;
             }
 
-            let popup = config.popup || false;
-            let parentElement = config.parentElement || null;
-            this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
-
-            let options: any = {
-                popup: popup,
-                embedMode: config.embedMode != null ? config.embedMode : parentElement ? true : false,
-                embedHostRoot: null,
-                overlay: config.overlay,
-                handleResize: config.handleResize || true,
-                enablePopup: config.enablePopup || true
+            const userOptions: IInspectorOptions = {
+                overlay: false,
+                showExplorer: true,
+                showInspector: true,
+                embedMode: false,
+                handleResize: true,
+                enablePopup: true,
+                ...config
             };
 
-            if (parentElement) {
-                options.embedHostRoot = parentElement;
-            }
+            this.BJSINSPECTOR = this.BJSINSPECTOR || typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
 
-            this.BJSINSPECTOR.Inspector.Show(this._scene, options);
+            this.BJSINSPECTOR.Inspector.Show(this._scene, userOptions);
         }
 
         /**
@@ -117,35 +128,11 @@ module BABYLON {
         }
 
         /**
-        *
-        * Launch the debugLayer.
-        *
-        * initialTab:
-        * | Value | Tab Name |
-        * | --- | --- |
-        * | 0 | Scene |
-        * | 1 | Console |
-        * | 2 | Stats |
-        * | 3 | Textures |
-        * | 4 | Mesh |
-        * | 5 | Light |
-        * | 6 | Material |
-        * | 7 | GLTF |
-        * | 8 | GUI |
-        * | 9 | Physics |
-        * | 10 | Camera |
-        * | 11 | Audio |
-        *
-        * @param config Define the configuration of the inspector
-        */
-        public show(config: {
-            popup?: boolean,
-            parentElement?: HTMLElement,
-            overlay?: boolean;
-            handleResize?: boolean;
-            embedMode?: boolean,
-            enablePopup?: boolean;
-        } = {}): void {
+          * Launch the debugLayer.
+          * @param config Define the configuration of the inspector
+          */
+        public show(config: IInspectorOptions): void {
+
             if (typeof this.BJSINSPECTOR == 'undefined') {
                 // Load inspector and add it to the DOM
                 Tools.LoadScript(DebugLayer.InspectorURL, this._createInspector.bind(this, config));