super-three 0.181.0 → 0.185.0

package/examples/jsm/inspector/Inspector.js

@@ -2,13 +2,15 @@
 import { RendererInspector } from './RendererInspector.js';
 import { Profiler } from './ui/Profiler.js';
 import { Performance } from './tabs/Performance.js';
+import { Memory } from './tabs/Memory.js';
 import { Console } from './tabs/Console.js';
 import { Parameters } from './tabs/Parameters.js';
+import { Settings } from './tabs/Settings.js';
 import { Viewer } from './tabs/Viewer.js';
-import { setText, splitPath, splitCamelCase } from './ui/utils.js';
+import { Timeline } from './tabs/Timeline.js';
+import { setText } from './ui/utils.js';
 
-import { QuadMesh, NodeMaterial, CanvasTarget, setConsoleFunction, REVISION, NoToneMapping } from 'three/webgpu';
-import { renderOutput, vec3, vec4 } from 'three/tsl';
+import { setConsoleFunction, REVISION } from 'three/webgpu';
 
 class Inspector extends RendererInspector {
 
@@ -18,9 +20,13 @@ class Inspector extends RendererInspector {
 
 		// init profiler
 
-		const profiler = new Profiler();
+		const profiler = new Profiler( this );
+		profiler.addEventListener( 'resize', ( e ) => this.dispatchEvent( e ) );
 
-		const parameters = new Parameters();
+		const parameters = new Parameters( {
+			builtin: true,
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 6l8 0" /><path d="M16 6l4 0" /><path d="M8 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 12l2 0" /><path d="M10 12l10 0" /><path d="M17 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M4 18l11 0" /><path d="M19 18l1 0" /></svg>'
+		} );
 		parameters.hide();
 		profiler.addTab( parameters );
 
@@ -31,21 +37,37 @@ class Inspector extends RendererInspector {
 		const performance = new Performance();
 		profiler.addTab( performance );
 
-		const console = new Console();
-		profiler.addTab( console );
+		const memory = new Memory();
+		profiler.addTab( memory );
 
-		profiler.setActiveTab( performance.id );
+		const timeline = new Timeline();
+		profiler.addTab( timeline );
 
-		//
+		const consoleTab = new Console();
+		profiler.addTab( consoleTab );
+
+		const settings = new Settings();
+		profiler.addTab( settings );
+
+		profiler.loadLayout();
+
+		if ( ! profiler.activeTabId ) {
+
+			profiler.setActiveTab( performance.id );
+
+		}
 
 		this.statsData = new Map();
-		this.canvasNodes = new Map();
 		this.profiler = profiler;
 		this.performance = performance;
-		this.console = console;
+		this.memory = memory;
+		this.console = consoleTab;
 		this.parameters = parameters;
 		this.viewer = viewer;
+		this.timeline = timeline;
+		this.settings = settings;
 		this.once = {};
+		this.extensionsData = new WeakMap();
 
 		this.displayCycle = {
 			text: {
@@ -57,6 +79,11 @@ class Inspector extends RendererInspector {
 				needsUpdate: false,
 				duration: .02,
 				time: 0
+			},
+			toggleGraph: {
+				needsUpdate: false,
+				duration: .02,
+				time: 0
 			}
 		};
 
@@ -68,6 +95,84 @@ class Inspector extends RendererInspector {
 
 	}
 
+	onExtension( name, callback ) {
+
+		const extensionAdded = ( e ) => {
+
+			if ( e.name === name ) {
+
+				callback( e.tab );
+
+				this.settings.removeEventListener( 'extensionadded', extensionAdded );
+
+			}
+
+		};
+
+		if ( this.settings.extensions[ name ] && this.settings.extensions[ name ].loaded ) {
+
+			callback( this.settings.extensions[ name ] );
+
+		} else {
+
+			this.settings.addEventListener( 'extensionadded', extensionAdded );
+
+		}
+
+		return this;
+
+	}
+
+	hide() {
+
+		this.profiler.hide();
+
+	}
+
+	show() {
+
+		this.profiler.show();
+
+	}
+
+	getSize() {
+
+		return this.profiler.getSize();
+
+	}
+
+	setActiveTab( tab ) {
+
+		this.profiler.setActiveTab( tab.id );
+
+		return this;
+
+	}
+
+	addTab( tab ) {
+
+		this.profiler.addTab( tab );
+
+		return this;
+
+	}
+
+	removeTab( tab ) {
+
+		this.profiler.removeTab( tab );
+
+		return this;
+
+	}
+
+	setActiveExtension( name, value ) {
+
+		this.settings.setActiveExtension( name, value );
+
+		return this;
+
+	}
+
 	resolveConsoleOnce( type, message ) {
 
 		const key = type + message;
@@ -81,7 +186,7 @@ class Inspector extends RendererInspector {
 
 	}
 
-	resolveConsole( type, message ) {
+	resolveConsole( type, message, stackTrace = null ) {
 
 		switch ( type ) {
 
@@ -97,7 +202,15 @@ class Inspector extends RendererInspector {
 
 				this.console.addMessage( 'warn', message );
 
-				console.warn( message );
+				if ( stackTrace && stackTrace.isStackTrace ) {
+
+					console.warn( stackTrace.getError( message ) );
+
+				} else {
+
+					console.warn( message );
+
+				}
 
 				break;
 
@@ -105,7 +218,15 @@ class Inspector extends RendererInspector {
 
 				this.console.addMessage( 'error', message );
 
-				console.error( message );
+				if ( stackTrace && stackTrace.isStackTrace ) {
+
+					console.error( stackTrace.getError( message ) );
+
+				} else {
+
+					console.error( message );
+
+				}
 
 				break;
 
@@ -135,9 +256,28 @@ class Inspector extends RendererInspector {
 
 		//
 
-		if ( renderer.inspector.domElement.parentElement === null && renderer.domElement.parentElement !== null ) {
+		if ( renderer.inspector.domElement.parentElement === null ) {
+
+			if ( renderer.domElement.parentElement !== null ) {
+
+				renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
+
+			} else {
+
+				const observer = new MutationObserver( () => {
 
-			renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
+					if ( renderer.domElement.parentElement !== null ) {
+
+						renderer.domElement.parentElement.appendChild( renderer.inspector.domElement );
+						observer.disconnect();
+
+					}
+
+				} );
+
+				observer.observe( document.body || document.documentElement, { childList: true, subtree: true } );
+
+			}
 
 		}
 
@@ -153,10 +293,10 @@ class Inspector extends RendererInspector {
 
 			if ( this.isAvailable ) {
 
-				renderer.backend.trackTimestamp = true;
-
 				renderer.init().then( () => {
 
+					renderer.backend.trackTimestamp = true;
+
 					if ( renderer.hasFeature( 'timestamp-query' ) !== true ) {
 
 						this.console.addMessage( 'error', 'THREE.Inspector: GPU Timestamp Queries not available.' );
@@ -165,6 +305,8 @@ class Inspector extends RendererInspector {
 
 				} );
 
+				this.timeline.setRenderer( renderer );
+
 			}
 
 		}
@@ -178,7 +320,6 @@ class Inspector extends RendererInspector {
 		if ( this.parameters.isVisible === false ) {
 
 			this.parameters.show();
-			this.profiler.setActiveTab( this.parameters.id );
 
 		}
 
@@ -248,105 +389,62 @@ class Inspector extends RendererInspector {
 
 	}
 
-	getCanvasDataByNode( node ) {
-
-		let canvasData = this.canvasNodes.get( node );
-
-		if ( canvasData === undefined ) {
-
-			const renderer = this.getRenderer();
-
-			const canvas = document.createElement( 'canvas' );
-
-			const canvasTarget = new CanvasTarget( canvas );
-			canvasTarget.setPixelRatio( window.devicePixelRatio );
-			canvasTarget.setSize( 140, 140 );
+	getNodes() {
 
-			const id = node.id;
-
-			const { path, name } = splitPath( splitCamelCase( node.getName() || '(unnamed)' ) );
-
-			let output = vec4( vec3( node ), 1 );
-			output = renderOutput( output, NoToneMapping, renderer.outputColorSpace );
-			output = output.context( { inspector: true } );
-
-			const material = new NodeMaterial();
-			material.outputNode = output;
-
-			const quad = new QuadMesh( material );
-			quad.name = 'Viewer - ' + name;
-
-			canvasData = {
-				id,
-				name,
-				path,
-				node,
-				quad,
-				canvasTarget,
-				material
-			};
-
-			this.canvasNodes.set( node, canvasData );
-
-		}
-
-		return canvasData;
+		return this.currentNodes;
 
 	}
 
-	resolveViewer() {
-
-		const nodes = this.currentNodes;
-		const renderer = this.getRenderer();
+	getAverageDeltaTime( statsData, property, frames = this.fps ) {
 
-		if ( nodes.length === 0 ) return;
+		const statsArray = statsData.stats;
 
-		if ( ! renderer.backend.isWebGPUBackend ) {
+		let sum = 0;
+		let count = 0;
 
-			this.resolveConsoleOnce( 'warn', 'Inspector: Viewer is only available with WebGPU.' );
+		for ( let i = statsArray.length - 1; i >= 0 && count < frames; i -- ) {
 
-			return;
+			const stats = statsArray[ i ];
+			const value = stats[ property ];
 
-		}
+			if ( value > 0 ) {
 
-		//
+				// ignore invalid values
 
-		if ( ! this.viewer.isVisible ) {
+				sum += value;
+				count ++;
 
-			this.viewer.show();
+			}
 
 		}
 
-		const canvasDataList = nodes.map( node => this.getCanvasDataByNode( node ) );
-
-		this.viewer.update( renderer, canvasDataList );
+		return count > 0 ? sum / count : 0;
 
 	}
 
-	getAverageDeltaTime( statsData, property, frames = this.fps ) {
+	updateTabs() {
 
-		const statsArray = statsData.stats;
+		// tabs
 
-		let sum = 0;
-		let count = 0;
+		const tabs = Object.values( this.profiler.tabs );
 
-		for ( let i = statsArray.length - 1; i >= 0 && count < frames; i -- ) {
+		for ( const tab of tabs ) {
 
-			const stats = statsArray[ i ];
-			const value = stats[ property ];
+			let tabData = this.extensionsData.get( tab );
 
-			if ( value > 0 ) {
+			if ( tabData === undefined ) {
 
-				// ignore invalid values
+				tab.init( this );
 
-				sum += value;
-				count ++;
+				tabData = {};
+
+				this.extensionsData.set( tab, tabData );
 
 			}
 
-		}
+			tab.update( this );
 
-		return count > 0 ? sum / count : 0;
+		}
 
 	}
 
@@ -389,23 +487,38 @@ class Inspector extends RendererInspector {
 
 		this.updateCycle( this.displayCycle.text );
 		this.updateCycle( this.displayCycle.graph );
+		this.updateCycle( this.displayCycle.toggleGraph );
 
 		if ( this.displayCycle.text.needsUpdate ) {
 
-			setText( 'fps-counter', this.fps.toFixed() );
+			setText( this.profiler.toggleButton.querySelector( '.fps-counter' ), this.fps.toFixed() );
 
 			this.performance.updateText( this, frame );
+			this.memory.updateText( this );
+
+		}
+
+		if ( this.displayCycle.toggleGraph.needsUpdate ) {
+
+			if ( this.profiler.toggleGraph ) {
+
+				this.profiler.toggleGraph.addPoint( 'fps', this.fps );
+				this.profiler.toggleGraph.update();
+
+			}
 
 		}
 
 		if ( this.displayCycle.graph.needsUpdate ) {
 
 			this.performance.updateGraph( this, frame );
+			this.memory.updateGraph( this );
 
 		}
 
 		this.displayCycle.text.needsUpdate = false;
 		this.displayCycle.graph.needsUpdate = false;
+		this.displayCycle.toggleGraph.needsUpdate = false;
 
 	}
 
@@ -424,4 +537,44 @@ class Inspector extends RendererInspector {
 
 }
 
-export { Inspector };
+function getItem( id ) {
+
+	const data = JSON.parse( localStorage.getItem( 'threejs-inspector' ) || '{}' );
+
+	if ( data.version !== REVISION ||
+		 data.settings && ( data.settings.storage === 'url' && data.settings.url !== location.href ) ) {
+
+		localStorage.removeItem( 'threejs-inspector' );
+
+		return {};
+
+	}
+
+	return data[ id ] || {};
+
+}
+
+function setItem( id, state ) {
+
+	const data = JSON.parse( localStorage.getItem( 'threejs-inspector' ) || '{}' );
+
+	if ( state === null ) {
+
+		delete data[ id ];
+
+	} else {
+
+		data[ id ] = state;
+
+	}
+
+	data.settings = data.settings || {};
+	data.settings.url = data.settings.url || location.href;
+	data.settings.storage = data.settings.storage || 'url';
+	data.version = REVISION;
+
+	localStorage.setItem( 'threejs-inspector', JSON.stringify( data ) );
+
+}
+
+export { Inspector, getItem, setItem };