Fix inspector render grid es6

Tools/Config/config.json

@@ -552,11 +552,13 @@
                         "babylonjs": "BABYLON",
                         "babylonjs-loaders": "BABYLON",
                         "babylonjs-serializers": "BABYLON",
+                        "babylonjs-materials": "BABYLON",
                         "babylonjs-gltf2interface": "BABYLON.GLTF2",
                         "react": "React",
                         "babylonjs-gui": "BABYLON.GUI",
                         "@babylonjs/core": "BABYLON",
                         "@babylonjs/loaders": "BABYLON",
+                        "@babylonjs/materials": "BABYLON",
                         "@babylonjs/serializers": "BABYLON",
                         "@babylonjs/gui": "BABYLON.GUI",
                         "@fortawesome": false,

Tools/WebpackPlugins/babylonExternals.js

@@ -27,6 +27,14 @@ module.exports = function nodeExternals(options) {
                 amd: "babylonjs-gui"
             });
         }
+        else if (/^babylonjs-materials.*$/i.test(request)) {
+            callback(null, {
+                root: "BABYLON",
+                commonjs: "babylonjs-materials",
+                commonjs2: "babylonjs-materials",
+                amd: "babylonjs-materials"
+            });
+        }
         else if (/^babylonjs.*$/i.test(request)) {
             callback(null, {
                 root: "BABYLON",
@@ -59,6 +67,14 @@ module.exports = function nodeExternals(options) {
                 amd: "@babylonjs/gui"
             });
         }
+        else if (/^@babylonjs\/materials.*$/i.test(request)) {
+            callback(null, {
+                root: ["BABYLON", "MATERIALS"],
+                commonjs: "@babylonjs/materials",
+                commonjs2: "@babylonjs/materials",
+                amd: "@babylonjs/materials"
+            });
+        }
         else if (/^@babylonjs\/core.*$/i.test(request)) {
             callback(null, {
                 root: "BABYLON",

dist/preview release/inspector/package.json

@@ -32,6 +32,7 @@
         "babylonjs": "4.1.0-alpha.11",
         "babylonjs-gui": "4.1.0-alpha.11",
         "babylonjs-loaders": "4.1.0-alpha.11",
+        "babylonjs-materials": "4.1.0-alpha.11",
         "babylonjs-serializers": "4.1.0-alpha.11",
         "babylonjs-gltf2interface": "4.1.0-alpha.11"
     },

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

@@ -1,13 +1,13 @@
 import * as React from "react";
 
 import { Nullable } from "babylonjs/types";
-import { Tools } from "babylonjs/Misc/tools";
 import { Color3 } from "babylonjs/Maths/math";
 import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
 import { Mesh } from "babylonjs/Meshes/mesh";
 import { Texture } from "babylonjs/Materials/Textures/texture";
 import { UtilityLayerRenderer } from "babylonjs/Rendering/utilityLayerRenderer";
 import { Scene } from "babylonjs/scene";
+import { GridMaterial } from "babylonjs-materials/grid/index";
 
 import { CheckBoxLineComponent } from "../../lines/checkBoxLineComponent";
 import { GlobalState } from '../../../globalState';
@@ -40,14 +40,6 @@ export class RenderGridPropertyGridComponent extends React.Component<IRenderGrid
     addOrRemoveGrid() {
         const scene = UtilityLayerRenderer.DefaultKeepDepthUtilityLayer.utilityLayerScene;
 
-        if (!(BABYLON as any).GridMaterial) {
-            this.setState({ isEnabled: true });
-            Tools.LoadScript("https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js", () => {
-                this.addOrRemoveGrid();
-            });
-            return;
-        }
-
         if (!this._gridMesh) {
             var extend = this.props.scene.getWorldExtends();
             var width = (extend.max.x - extend.min.x) * 5.0;
@@ -62,7 +54,7 @@ export class RenderGridPropertyGridComponent extends React.Component<IRenderGrid
             this._gridMesh.reservedDataStore.isInspectorGrid = true;
             this._gridMesh.isPickable = false;
 
-            var groundMaterial = new (BABYLON as any).GridMaterial("GridMaterial", scene);
+            var groundMaterial = new GridMaterial("GridMaterial", scene);
             groundMaterial.majorUnitFrequency = 10;
             groundMaterial.minorUnitVisibility = 0.3;
             groundMaterial.gridRatio = 0.01;

inspector/tsconfig.json

@@ -14,6 +14,9 @@
             "babylonjs-loaders/*": [
                 "../../dist/preview release/loaders/babylonjs.loaders.module.d.ts"
             ],
+            "babylonjs-materials/*": [
+                "../../dist/preview release/materialsLibrary/babylonjs.materials.module.d.ts"
+            ],
             "babylonjs-serializers/*": [
                 "../../dist/preview release/serializers/babylonjs.serializers.module.d.ts"
             ],