Fix #6724

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

@@ -87,6 +87,8 @@ import { LensRenderingPipeline } from 'babylonjs/PostProcesses/RenderPipeline/Pi
 import { LensRenderingPipelinePropertyGridComponent } from './propertyGrids/postProcesses/lensRenderingPipelinePropertyGridComponent';
 import { NodeMaterial } from 'babylonjs/Materials/Node/nodeMaterial';
 import { NodeMaterialPropertyGridComponent } from './propertyGrids/materials/nodeMaterialPropertyGridComponent';
+import { MultiMaterial } from 'babylonjs/Materials/multiMaterial';
+import { MultiMaterialPropertyGridComponent } from './propertyGrids/materials/multiMaterialPropertyGridComponent';
 
 export class PropertyGridTabComponent extends PaneComponent {
     private _timerIntervalId: number;
@@ -205,6 +207,16 @@ export class PropertyGridTabComponent extends PaneComponent {
                     onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
             }
 
+            if (className === "MultiMaterial") {
+                const material = entity as MultiMaterial;
+                return (<MultiMaterialPropertyGridComponent
+                    globalState={this.props.globalState}
+                    material={material}
+                    lockObject={this._lockObject}
+                    onSelectionChangedObservable={this.props.onSelectionChangedObservable}
+                    onPropertyChangedObservable={this.props.onPropertyChangedObservable} />);
+            }
+
             if (className === "StandardMaterial") {
                 const material = entity as StandardMaterial;
                 return (<StandardMaterialPropertyGridComponent

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import { Observable } from "babylonjs/Misc/observable";
+
+import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
+import { LineContainerComponent } from "../../../lineContainerComponent";
+import { CommonMaterialPropertyGridComponent } from "./commonMaterialPropertyGridComponent";
+import { LockObject } from "../lockObject";
+import { GlobalState } from '../../../../globalState';
+import { MultiMaterial, Material } from 'babylonjs';
+import { TextLineComponent } from '../../../lines/textLineComponent';
+
+interface IMultiMaterialPropertyGridComponentProps {
+    globalState: GlobalState;
+    material: MultiMaterial;
+    lockObject: LockObject;
+    onSelectionChangedObservable?: Observable<any>;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+
+export class MultiMaterialPropertyGridComponent extends React.Component<IMultiMaterialPropertyGridComponentProps> {
+    constructor(props: IMultiMaterialPropertyGridComponentProps) {
+        super(props);
+    }
+
+    onMaterialLink(mat: Material) {
+        if (!this.props.onSelectionChangedObservable) {
+            return;
+        }
+
+        this.props.onSelectionChangedObservable.notifyObservers(mat);
+    }
+
+    renderChildMaterial() {
+        const material = this.props.material;
+
+        return (
+            <LineContainerComponent globalState={this.props.globalState} title="CHILDREN">
+                {
+                    material.subMaterials.map((mat, i) => {
+                        if (mat) {
+                            return (
+                                <TextLineComponent key={"Material #" + i} label={"Material #" + i} value={mat.name} onLink={() => this.onMaterialLink(mat)} />
+                            )
+                        }
+                        return null;                        
+                    })
+                }
+            </LineContainerComponent>
+        );
+    }
+
+    render() {
+        const material = this.props.material;
+
+        return (
+            <div className="pane">
+                <CommonMaterialPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
+                {this.renderChildMaterial()}
+            </div>
+        );
+    }
+}

inspector/src/components/sceneExplorer/sceneExplorerComponent.tsx

@@ -292,6 +292,14 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
             }
         });
 
+        let materials = [];
+
+        materials.push(...scene.materials);
+
+        if (scene.multiMaterials && scene.multiMaterials.length) {
+            materials.push(...scene.multiMaterials);
+        }
+
         return (
             <div id="tree" onContextMenu={e => e.preventDefault()}>
                 <SceneExplorerFilterComponent onFilter={(filter) => this.filterContent(filter)} />
@@ -304,7 +312,7 @@ export class SceneExplorerComponent extends React.Component<ISceneExplorerCompon
                     scene.skeletons.length > 0 &&
                     <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.skeletons} label="Skeletons" offset={1} filter={this.state.filter} />
                 }
-                <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={scene.materials} label="Materials" offset={1} filter={this.state.filter} />
+                <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={materials} label="Materials" offset={1} filter={this.state.filter} />
                 <TreeItemComponent globalState={this.props.globalState} extensibilityGroups={this.props.extensibilityGroups} selectedEntity={this.state.selectedEntity} items={textures} label="Textures" offset={1} filter={this.state.filter} />
                 {
                     postProcessses.length > 0 &&

inspector/src/components/sceneExplorer/treeItemSelectableComponent.tsx

@@ -108,7 +108,7 @@ export class TreeItemSelectableComponent extends React.Component<ITreeItemSelect
         const entity = this.props.entity;
 
         const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />
-        const children = Tools.SortAndFilter(entity, entity.getChildren ? entity.getChildren() : entity.children);
+        const children = entity.getClassName() === "MultiMaterial" ? [] : Tools.SortAndFilter(entity, entity.getChildren ? entity.getChildren() : entity.children);
         const hasChildren = children.length > 0;
 
         if (!entity.reservedDataStore) {

inspector/src/tools.ts

@@ -19,7 +19,7 @@ export class Tools {
         }
 
         const children = item.getChildren ? item.getChildren() : item.children;
-        if (children) {
+        if (children && item.getClassName() !== "MultiMaterial") {
             for (var child of children) {
                 if (Tools.LookForItem(child, selectedEntity)) {
                     return true;