Inspector: Add Materials tab and corresponding styles for enhanced ma…

examples/jsm/inspector/Inspector.js

@@ -5,6 +5,7 @@ import { Performance } from './tabs/Performance.js';
 import { Console } from './tabs/Console.js';
 import { Parameters } from './tabs/Parameters.js';
 import { Viewer } from './tabs/Viewer.js';
+import { Materials } from './tabs/Materials.js';
 import { setText, splitPath, splitCamelCase } from './ui/utils.js';
 
 import { QuadMesh, NodeMaterial, CanvasTarget, setConsoleFunction, REVISION, NoToneMapping } from 'three/webgpu';
@@ -59,6 +60,9 @@ class Inspector extends RendererInspector {
 		const consoleTab = new Console();
 		profiler.addTab( consoleTab );
 
+		const materials = new Materials();
+		profiler.addTab( materials );
+
 		profiler.loadLayout();
 
 		if ( ! profiler.activeTabId ) {
@@ -74,6 +78,7 @@ class Inspector extends RendererInspector {
 		this.console = consoleTab;
 		this.parameters = parameters;
 		this.viewer = viewer;
+		this.materials = materials;
 		this.once = {};
 
 		this.displayCycle = {
@@ -440,6 +445,27 @@ class Inspector extends RendererInspector {
 
 			this.performance.updateText( this, frame );
 
+			// Update materials tab
+			if ( this.materials.isVisible ) {
+
+				const scenes = [];
+				const seenScenes = new Set();
+
+				for ( const renderStats of frame.renders ) {
+
+					if ( renderStats.scene && renderStats.scene.isScene && ! seenScenes.has( renderStats.scene.uuid ) ) {
+
+						scenes.push( renderStats.scene );
+						seenScenes.add( renderStats.scene.uuid );
+
+					}
+
+				}
+
+				this.materials.updateFromScenes( scenes, this.getRenderer() );
+
+			}
+
 		}
 
 		if ( this.displayCycle.graph.needsUpdate ) {