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

dist/preview release/babylon.d.ts

@@ -54856,6 +54856,8 @@ declare module BABYLON {
         visibleInInspector: boolean;
         /** Gets or sets a boolean indicating that the value of this input will not change after a build */
         isConstant: boolean;
+        /** Gets or sets the group to use to display this block in the Inspector */
+        groupInInspector: string;
         /**
          * Gets or sets the connection point type (default is float)
          */

dist/preview release/babylon.module.d.ts

@@ -57452,6 +57452,8 @@ declare module "babylonjs/Materials/Node/Blocks/Input/inputBlock" {
         visibleInInspector: boolean;
         /** Gets or sets a boolean indicating that the value of this input will not change after a build */
         isConstant: boolean;
+        /** Gets or sets the group to use to display this block in the Inspector */
+        groupInInspector: string;
         /**
          * Gets or sets the connection point type (default is float)
          */
@@ -123820,6 +123822,8 @@ declare module BABYLON {
         visibleInInspector: boolean;
         /** Gets or sets a boolean indicating that the value of this input will not change after a build */
         isConstant: boolean;
+        /** Gets or sets the group to use to display this block in the Inspector */
+        groupInInspector: string;
         /**
          * Gets or sets the connection point type (default is float)
          */

dist/preview release/documentation.d.ts

@@ -54856,6 +54856,8 @@ declare module BABYLON {
         visibleInInspector: boolean;
         /** Gets or sets a boolean indicating that the value of this input will not change after a build */
         isConstant: boolean;
+        /** Gets or sets the group to use to display this block in the Inspector */
+        groupInInspector: string;
         /**
          * Gets or sets the connection point type (default is float)
          */

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -45181,6 +45181,27 @@ var NodeMaterialPropertyGridComponent = /** @class */ (function (_super) {
             return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_textureLinkLineComponent__WEBPACK_IMPORTED_MODULE_12__["TextureLinkLineComponent"], { label: textureBlock.name, key: i, texture: textureBlock.texture, material: material, onTextureCreated: function (texture) { return textureBlock.texture = texture; }, onSelectionChangedObservable: _this.props.onSelectionChangedObservable, onDebugSelectionChangeObservable: onDebugSelectionChangeObservable }));
         })));
     };
+    NodeMaterialPropertyGridComponent.prototype.renderInputBlock = function (block) {
+        switch (block.type) {
+            case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Float:
+                var cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
+                    cantDisplaySlider &&
+                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__["FloatLineComponent"], { key: block.name, lockObject: this.props.lockObject, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
+                    !cantDisplaySlider &&
+                        react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_13__["SliderLineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", step: (block.max - block.min) / 100.0, minimum: block.min, maximum: block.max, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
+            case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Color3:
+            case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Color4:
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+            case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Vector2:
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_11__["Vector2LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+            case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Vector3:
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_9__["Vector3LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+            case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Vector4:
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_vector4LineComponent__WEBPACK_IMPORTED_MODULE_10__["Vector4LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }));
+        }
+        return null;
+    };
     NodeMaterialPropertyGridComponent.prototype.renderInputValues = function () {
         var _this = this;
         var configurableInputBlocks = this.props.material.getInputBlocks().filter(function (block) {
@@ -45191,27 +45212,25 @@ var NodeMaterialPropertyGridComponent = /** @class */ (function (_super) {
         if (configurableInputBlocks.length === 0) {
             return null;
         }
-        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "INPUTS" }, configurableInputBlocks.map(function (block) {
-            switch (block.type) {
-                case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Float:
-                    var cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
-                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
-                        cantDisplaySlider &&
-                            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__["FloatLineComponent"], { key: block.name, lockObject: _this.props.lockObject, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: _this.props.onPropertyChangedObservable }),
-                        !cantDisplaySlider &&
-                            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_13__["SliderLineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", step: (block.max - block.min) / 100.0, minimum: block.min, maximum: block.max, onPropertyChangedObservable: _this.props.onPropertyChangedObservable })));
-                case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Color3:
-                case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Color4:
-                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: _this.props.onPropertyChangedObservable }));
-                case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Vector2:
-                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_vector2LineComponent__WEBPACK_IMPORTED_MODULE_11__["Vector2LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: _this.props.onPropertyChangedObservable }));
-                case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Vector3:
-                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_vector3LineComponent__WEBPACK_IMPORTED_MODULE_9__["Vector3LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: _this.props.onPropertyChangedObservable }));
-                case babylonjs_Misc_observable__WEBPACK_IMPORTED_MODULE_2__["NodeMaterialBlockConnectionPointTypes"].Vector4:
-                    return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_vector4LineComponent__WEBPACK_IMPORTED_MODULE_10__["Vector4LineComponent"], { key: block.name, label: block.name, target: block, propertyName: "value", onPropertyChangedObservable: _this.props.onPropertyChangedObservable }));
+        var namedGroups = [];
+        configurableInputBlocks.forEach(function (block) {
+            if (!block.groupInInspector) {
+                return;
             }
-            return null;
-        })));
+            if (namedGroups.indexOf(block.groupInInspector) === -1) {
+                namedGroups.push(block.groupInInspector);
+            }
+        });
+        namedGroups.sort();
+        return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
+            react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "INPUTS" }, configurableInputBlocks.filter(function (block) { return !block.groupInInspector; }).map(function (block) {
+                return _this.renderInputBlock(block);
+            })),
+            namedGroups.map(function (name) {
+                return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: _this.props.globalState, title: name.toUpperCase() }, configurableInputBlocks.filter(function (block) { return block.groupInInspector === name; }).map(function (block) {
+                    return _this.renderInputBlock(block);
+                })));
+            })));
     };
     NodeMaterialPropertyGridComponent.prototype.render = function () {
         var _this = this;
@@ -45220,7 +45239,7 @@ var NodeMaterialPropertyGridComponent = /** @class */ (function (_super) {
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commonMaterialPropertyGridComponent__WEBPACK_IMPORTED_MODULE_4__["CommonMaterialPropertyGridComponent"], { globalState: this.props.globalState, lockObject: this.props.lockObject, material: material, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
             react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lineContainerComponent__WEBPACK_IMPORTED_MODULE_3__["LineContainerComponent"], { globalState: this.props.globalState, title: "CONFIGURATION" },
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { label: "Ignore alpha", target: material, propertyName: "ignoreAlpha", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
-                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_5__["ButtonLineComponent"], { label: "Edit", onClick: function () { return _this.edit(); } })),
+                react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_5__["ButtonLineComponent"], { label: "Node Material Editor", onClick: function () { return _this.edit(); } })),
             this.renderInputValues(),
             this.renderTextures()));
     };

dist/preview release/inspector/babylon.inspector.d.ts

@@ -1299,6 +1299,7 @@ declare module INSPECTOR {
         constructor(props: INodeMaterialPropertyGridComponentProps);
         edit(): void;
         renderTextures(): JSX.Element | null;
+        renderInputBlock(block: BABYLON.InputBlock): JSX.Element | null;
         renderInputValues(): JSX.Element | null;
         render(): JSX.Element;
     }

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -1675,6 +1675,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
     import { PropertyChangedEvent } from "babylonjs-inspector/components/propertyChangedEvent";
     import { LockObject } from "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/lockObject";
     import { GlobalState } from "babylonjs-inspector/components/globalState";
+    import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
     interface INodeMaterialPropertyGridComponentProps {
         globalState: GlobalState;
         material: NodeMaterial;
@@ -1687,6 +1688,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/mat
         constructor(props: INodeMaterialPropertyGridComponentProps);
         edit(): void;
         renderTextures(): JSX.Element | null;
+        renderInputBlock(block: InputBlock): JSX.Element | null;
         renderInputValues(): JSX.Element | null;
         render(): JSX.Element;
     }
@@ -3630,6 +3632,7 @@ declare module INSPECTOR {
         constructor(props: INodeMaterialPropertyGridComponentProps);
         edit(): void;
         renderTextures(): JSX.Element | null;
+        renderInputBlock(block: BABYLON.InputBlock): JSX.Element | null;
         renderInputValues(): JSX.Element | null;
         render(): JSX.Element;
     }

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -55121,6 +55121,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var babylonjs_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes */ "babylonjs/Misc/observable");
 /* harmony import */ var babylonjs_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(babylonjs_Materials_Node_Enums_nodeMaterialBlockConnectionPointTypes__WEBPACK_IMPORTED_MODULE_12__);
 /* harmony import */ var _genericNodePropertyComponent__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./genericNodePropertyComponent */ "./diagram/properties/genericNodePropertyComponent.tsx");
+/* harmony import */ var _sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../sharedComponents/textInputLineComponent */ "./sharedComponents/textInputLineComponent.tsx");
+
 
 
 
@@ -55284,6 +55286,12 @@ var InputPropertyTabComponent = /** @class */ (function (_super) {
                             _this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                             _this.props.globalState.onRebuildRequiredObservable.notifyObservers();
                         } }),
+                inputBlock.visibleInInspector &&
+                    react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_textInputLineComponent__WEBPACK_IMPORTED_MODULE_14__["TextInputLineComponent"], { globalState: this.props.globalState, label: "Group", propertyName: "groupInInspector", target: this.props.block, onChange: function () {
+                            _this.forceUpdate();
+                            _this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                            _this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                        } }),
                 react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedComponents_optionsLineComponent__WEBPACK_IMPORTED_MODULE_11__["OptionsLineComponent"], { label: "Mode", options: modeOptions, target: inputBlock, noDirectUpdate: true, getSelection: function (block) {
                         if (block.isAttribute) {
                             return 1;

dist/preview release/viewer/babylon.module.d.ts

@@ -57452,6 +57452,8 @@ declare module "babylonjs/Materials/Node/Blocks/Input/inputBlock" {
         visibleInInspector: boolean;
         /** Gets or sets a boolean indicating that the value of this input will not change after a build */
         isConstant: boolean;
+        /** Gets or sets the group to use to display this block in the Inspector */
+        groupInInspector: string;
         /**
          * Gets or sets the connection point type (default is float)
          */
@@ -123820,6 +123822,8 @@ declare module BABYLON {
         visibleInInspector: boolean;
         /** Gets or sets a boolean indicating that the value of this input will not change after a build */
         isConstant: boolean;
+        /** Gets or sets the group to use to display this block in the Inspector */
+        groupInInspector: string;
         /**
          * Gets or sets the connection point type (default is float)
          */

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

@@ -18,6 +18,7 @@ import { Vector2LineComponent } from '../../../lines/vector2LineComponent';
 import { TextureLinkLineComponent } from '../../../lines/textureLinkLineComponent';
 import { SliderLineComponent } from '../../../lines/sliderLineComponent';
 import { NodeMaterialBlockConnectionPointTypes } from 'babylonjs/Materials/Node/Enums/nodeMaterialBlockConnectionPointTypes';
+import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 
 interface INodeMaterialPropertyGridComponentProps {
     globalState: GlobalState;
@@ -68,6 +69,49 @@ export class NodeMaterialPropertyGridComponent extends React.Component<INodeMate
         );
     }
 
+    renderInputBlock(block: InputBlock) {
+        switch (block.type) {
+            case NodeMaterialBlockConnectionPointTypes.Float:
+                    let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
+                    return (
+                        <>
+                            {
+                                cantDisplaySlider &&
+                                <FloatLineComponent key={block.name} lockObject={this.props.lockObject} label={block.name} target={block} propertyName="value" 
+                                    onPropertyChangedObservable={this.props.onPropertyChangedObservable}
+                                />
+                            }        
+                            {
+                                !cantDisplaySlider &&
+                                <SliderLineComponent key={block.name} label={block.name} target={block} propertyName="value" step={(block.max - block.min) / 100.0} minimum={block.min} maximum={block.max} onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
+                            }
+                        </>
+                    );  
+            case NodeMaterialBlockConnectionPointTypes.Color3:
+            case NodeMaterialBlockConnectionPointTypes.Color4:
+                return (
+                    <Color3LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
+                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                )     
+            case NodeMaterialBlockConnectionPointTypes.Vector2:
+                    return (
+                        <Vector2LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
+                            onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                    )                                
+            case NodeMaterialBlockConnectionPointTypes.Vector3:
+                return (
+                    <Vector3LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
+                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                )
+            case NodeMaterialBlockConnectionPointTypes.Vector4:
+                return (
+                    <Vector4LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
+                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                )
+            }
+        return null;
+    }
+
     renderInputValues() {
         let configurableInputBlocks = this.props.material.getInputBlocks().filter(block => {
             return block.visibleInInspector && block.isUniform && !block.isSystemValue
@@ -79,53 +123,43 @@ export class NodeMaterialPropertyGridComponent extends React.Component<INodeMate
             return null;
         }
 
-        return (
-            <LineContainerComponent globalState={this.props.globalState} title="INPUTS">
+        let namedGroups: string[] = [];
+
+        configurableInputBlocks.forEach(block => {
+            if (!block.groupInInspector) {
+                return;
+            }
+
+            if (namedGroups.indexOf(block.groupInInspector) === -1) {
+                namedGroups.push(block.groupInInspector);
+            }
+        });
+
+        namedGroups.sort();
+
+        return (           
+            <>
+                <LineContainerComponent globalState={this.props.globalState} title="INPUTS">
+                    {
+                        configurableInputBlocks.filter(block => !block.groupInInspector).map(block => {
+                            return this.renderInputBlock(block);
+                        })
+                    }           
+                </LineContainerComponent>
                 {
-                    configurableInputBlocks.map(block => {
-                        switch (block.type) {
-                            case NodeMaterialBlockConnectionPointTypes.Float:
-                                    let cantDisplaySlider = (isNaN(block.min) || isNaN(block.max) || block.min === block.max);
-                                    return (
-                                        <>
-                                            {
-                                                cantDisplaySlider &&
-                                                <FloatLineComponent key={block.name} lockObject={this.props.lockObject} label={block.name} target={block} propertyName="value" 
-                                                    onPropertyChangedObservable={this.props.onPropertyChangedObservable}
-                                                />
-                                            }        
-                                            {
-                                                !cantDisplaySlider &&
-                                                <SliderLineComponent key={block.name} label={block.name} target={block} propertyName="value" step={(block.max - block.min) / 100.0} minimum={block.min} maximum={block.max} onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
-                                            }
-                                        </>
-                                    );  
-                            case NodeMaterialBlockConnectionPointTypes.Color3:
-                            case NodeMaterialBlockConnectionPointTypes.Color4:
-                                return (
-                                    <Color3LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
-                                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                                )     
-                            case NodeMaterialBlockConnectionPointTypes.Vector2:
-                                    return (
-                                        <Vector2LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
-                                            onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                                    )                                
-                            case NodeMaterialBlockConnectionPointTypes.Vector3:
-                                return (
-                                    <Vector3LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
-                                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                                )
-                            case NodeMaterialBlockConnectionPointTypes.Vector4:
-                                return (
-                                    <Vector4LineComponent key={block.name} label={block.name} target={block} propertyName="value" 
-                                        onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                                )
+                    namedGroups.map(name => {
+                        return (
+                            <LineContainerComponent globalState={this.props.globalState} title={name.toUpperCase()}>
+                            {
+                                configurableInputBlocks.filter(block => block.groupInInspector === name).map(block => {
+                                    return this.renderInputBlock(block);
+                                })
                             }
-                        return null;
+                            </LineContainerComponent>
+                        )
                     })
-                }           
-           </LineContainerComponent>
+                }
+          </>
         );
     }
 
@@ -137,7 +171,7 @@ export class NodeMaterialPropertyGridComponent extends React.Component<INodeMate
                 <CommonMaterialPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 <LineContainerComponent globalState={this.props.globalState} title="CONFIGURATION">
                 <CheckBoxLineComponent label="Ignore alpha" target={material} propertyName="ignoreAlpha" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                    <ButtonLineComponent label="Edit" onClick={() => this.edit()} />
+                    <ButtonLineComponent label="Node Material Editor" onClick={() => this.edit()} />
                 </LineContainerComponent>
                 {
                     this.renderInputValues()

inspector/src/components/embedHost/embedHostComponent.tsx

@@ -5,7 +5,7 @@ import { SceneExplorerComponent } from "../sceneExplorer/sceneExplorerComponent"
 import { ActionTabsComponent } from "../actionTabs/actionTabsComponent";
 import { Scene } from "babylonjs/scene";
 import { GlobalState } from "../../components/globalState";
-import { IExplorerExtensibilityGroup } from 'babylonjs/Debug/debugLayer';
+import { IExplorerExtensibilityGroup, DebugLayerTab } from 'babylonjs/Debug/debugLayer';
 
 const Split = require('split.js').default;
 
@@ -19,7 +19,8 @@ interface IEmbedHostComponentProps {
     noExpand?: boolean,
     onClose: () => void,
     onPopup: () => void,
-    extensibilityGroups?: IExplorerExtensibilityGroup[]
+    extensibilityGroups?: IExplorerExtensibilityGroup[],
+    initialTab?: DebugLayerTab
 }
 
 export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps> {
@@ -57,7 +58,8 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
                     <div id="bottomPart" style={{ marginTop: "4px", overflow: "hidden" }}>
                         <ActionTabsComponent scene={this.props.scene}
                             popupMode={true}
-                            globalState={this.props.globalState} noHeader={true} />
+                            globalState={this.props.globalState} noHeader={true} 
+                            initialTab={this.props.initialTab} />
                     </div>
                 </div>
             )
@@ -76,7 +78,8 @@ export class EmbedHostComponent extends React.Component<IEmbedHostComponentProps
                     <ActionTabsComponent scene={this.props.scene}
                         globalState={this.props.globalState}
                         popupMode={true}
-                        noHeader={true} />
+                        noHeader={true}
+                        initialTab={this.props.initialTab} />
                 </div>
             </div>
         )

inspector/src/inspector.ts

@@ -251,7 +251,8 @@ export class Inspector {
                     if (options.popup) {
                         this._EmbedHostWindow.close();
                     }
-                }
+                },
+                initialTab: options.initialTab
             });
             ReactDOM.render(embedHostElement, this._EmbedHost);
         }

nodeEditor/public/index-local.html

@@ -8,7 +8,7 @@
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <script src="../../Tools/DevLoader/BabylonLoader.js"></script>
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css"></style>
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css"></link>
 
     <style>
         html,

nodeEditor/public/index.html

@@ -8,7 +8,7 @@
     <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
 
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css"></style>
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css"></link>
     <script src="https://preview.babylonjs.com/babylon.js"></script>
     <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
     <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>    

nodeEditor/src/diagram/properties/inputNodePropertyComponent.tsx

@@ -17,6 +17,7 @@ import { AnimatedInputBlockTypes } from 'babylonjs/Materials/Node/Blocks/Input/a
 import { IPropertyComponentProps } from './propertyComponentProps';
 import { InputBlock } from 'babylonjs/Materials/Node/Blocks/Input/inputBlock';
 import { GenericPropertyTabComponent } from './genericNodePropertyComponent';
+import { TextInputLineComponent } from '../../sharedComponents/textInputLineComponent';
 
 export class InputPropertyTabComponent extends React.Component<IPropertyComponentProps> {
     constructor(props: IPropertyComponentProps) {
@@ -198,7 +199,16 @@ export class InputPropertyTabComponent extends React.Component<IPropertyComponen
                                 this.props.globalState.onUpdateRequiredObservable.notifyObservers();
                                 this.props.globalState.onRebuildRequiredObservable.notifyObservers();
                             }} />                        
-                    }           
+                    }      
+                    {
+                        inputBlock.visibleInInspector &&
+                        <TextInputLineComponent globalState={this.props.globalState} label="Group" propertyName="groupInInspector" target={this.props.block} 
+                            onChange={() => {
+                                this.forceUpdate();
+                                this.props.globalState.onUpdateRequiredObservable.notifyObservers();
+                                this.props.globalState.onRebuildRequiredObservable.notifyObservers();
+                            }} />
+                    }     
                     <OptionsLineComponent label="Mode" options={modeOptions} target={inputBlock} 
                         noDirectUpdate={true}
                         getSelection={(block) => {

src/Cameras/Inputs/arcRotateCameraVRDeviceOrientationInput.ts

@@ -69,7 +69,7 @@ export class ArcRotateCameraVRDeviceOrientationInput implements ICameraInput<Arc
 
         if (hostWindow) {
             // check iOS 13+ support
-            if (typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
+            if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
                 (<any>DeviceOrientationEvent).requestPermission()
                     .then((response: string) => {
                         if (response === 'granted') {

src/Cameras/Inputs/freeCameraDeviceOrientationInput.ts

@@ -75,7 +75,7 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
                 }, timeout);
             }
 
-            if (typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
+            if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
                 (<any>DeviceOrientationEvent).requestPermission()
                     .then((response: string) => {
                         if (response == 'granted') {
@@ -143,7 +143,7 @@ export class FreeCameraDeviceOrientationInput implements ICameraInput<FreeCamera
                 //So this is needed.
                 this._orientationChanged();
             };
-            if (typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
+            if (typeof(DeviceOrientationEvent) !== "undefined" && typeof (<any>DeviceOrientationEvent).requestPermission === 'function') {
                 (<any>DeviceOrientationEvent).requestPermission()
                     .then((response: string) => {
                         if (response === 'granted') {

src/Debug/debugLayer.ts

@@ -83,7 +83,7 @@ export interface IInspectorOptions {
     /**
      * Optional initial tab (default to DebugLayerTab.Properties)
      */
-    initialTab?: DebugLayerTab.Properties;
+    initialTab?: DebugLayerTab;
 }
 
 declare module "../scene" {

src/Materials/Node/Blocks/Input/inputBlock.ts

@@ -42,6 +42,9 @@ export class InputBlock extends NodeMaterialBlock {
     /** Gets or sets a boolean indicating that the value of this input will not change after a build */
     public isConstant = false;
 
+    /** Gets or sets the group to use to display this block in the Inspector */
+    public groupInInspector = "";
+
     /**
      * Gets or sets the connection point type (default is float)
      */
@@ -593,6 +596,7 @@ export class InputBlock extends NodeMaterialBlock {
         serializationObject.max = this.max;
         serializationObject.matrixMode = this.matrixMode;
         serializationObject.isConstant = this.isConstant;
+        serializationObject.groupInInspector = this.groupInInspector;
 
         if (this._storedValue != null && this._mode === NodeMaterialBlockConnectionPointMode.Uniform) {
             if (this._storedValue.asArray) {
@@ -619,6 +623,7 @@ export class InputBlock extends NodeMaterialBlock {
         this.max = serializationObject.max || 0;
         this.matrixMode = serializationObject.matrixMode || 0;
         this.isConstant = !!serializationObject.isConstant;
+        this.groupInInspector = serializationObject.groupInInspector || "";
 
         if (!serializationObject.valueType) {
             return;