super-three 0.181.0 → 0.185.0

package/examples/jsm/inspector/tabs/Memory.js

@@ -0,0 +1,136 @@
+import { Tab } from '../ui/Tab.js';
+import { List } from '../ui/List.js';
+import { Graph } from '../ui/Graph.js';
+import { Item } from '../ui/Item.js';
+import { createValueSpan, setText, formatBytes } from '../ui/utils.js';
+
+class Memory extends Tab {
+
+	constructor( options = {} ) {
+
+		super( 'Memory', options );
+
+		const memoryList = new List( 'Name', 'Count', 'Size' );
+		memoryList.setGridStyle( 'minmax(200px, 2fr) 60px 100px' );
+		memoryList.domElement.style.minWidth = '300px';
+
+		const scrollWrapper = document.createElement( 'div' );
+		scrollWrapper.className = 'list-scroll-wrapper';
+		scrollWrapper.appendChild( memoryList.domElement );
+		this.content.appendChild( scrollWrapper );
+
+		// graph
+
+		const graphContainer = document.createElement( 'div' );
+		graphContainer.className = 'graph-container';
+
+		const graph = new Graph();
+		graph.addLine( 'total', 'var( --color-yellow )' );
+		graphContainer.append( graph.domElement );
+
+		// stats
+
+		const graphStats = new Item( 'Graph Stats', '', '' );
+		memoryList.add( graphStats );
+
+		const graphItem = new Item( graphContainer );
+		graphItem.itemRow.childNodes[ 0 ].style.gridColumn = '1 / -1';
+		graphStats.add( graphItem );
+
+		// info
+
+		this.memoryStats = new Item( 'Renderer Info', '', createValueSpan() );
+		this.memoryStats.domElement.firstChild.classList.add( 'no-hover' );
+		memoryList.add( this.memoryStats );
+
+		this.attributes = new Item( 'Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.attributes );
+
+		this.geometries = new Item( 'Geometries', createValueSpan(), 'N/A' );
+		this.memoryStats.add( this.geometries );
+
+		this.indexAttributes = new Item( 'Index Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.indexAttributes );
+
+		this.indirectStorageAttributes = new Item( 'Indirect Storage Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.indirectStorageAttributes );
+
+		this.programs = new Item( 'Programs', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.programs );
+
+		this.readbackBuffers = new Item( 'Readback Buffers', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.readbackBuffers );
+
+		this.renderTargets = new Item( 'Render Targets', createValueSpan(), 'N/A' );
+		this.memoryStats.add( this.renderTargets );
+
+		this.storageAttributes = new Item( 'Storage Attributes', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.storageAttributes );
+
+		this.textures = new Item( 'Textures', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.textures );
+
+		this.uniformBuffers = new Item( 'Uniform Buffers', createValueSpan(), createValueSpan() );
+		this.memoryStats.add( this.uniformBuffers );
+
+		this.graph = graph;
+
+	}
+
+	updateGraph( inspector ) {
+
+		const renderer = inspector.getRenderer();
+		if ( ! renderer ) return;
+
+		const memory = renderer.info.memory;
+
+		this.graph.addPoint( 'total', memory.total );
+
+		if ( this.graph.limit === 0 ) this.graph.limit = 1;
+
+		this.graph.update();
+
+	}
+
+	updateText( inspector ) {
+
+		const renderer = inspector.getRenderer();
+		if ( ! renderer ) return;
+
+		const memory = renderer.info.memory;
+
+		setText( this.memoryStats.data[ 2 ], formatBytes( memory.total ) );
+
+		setText( this.attributes.data[ 1 ], memory.attributes.toString() );
+		setText( this.attributes.data[ 2 ], formatBytes( memory.attributesSize ) );
+
+		setText( this.geometries.data[ 1 ], memory.geometries.toString() );
+
+		setText( this.indexAttributes.data[ 1 ], memory.indexAttributes.toString() );
+		setText( this.indexAttributes.data[ 2 ], formatBytes( memory.indexAttributesSize ) );
+
+		setText( this.indirectStorageAttributes.data[ 1 ], memory.indirectStorageAttributes.toString() );
+		setText( this.indirectStorageAttributes.data[ 2 ], formatBytes( memory.indirectStorageAttributesSize ) );
+
+		setText( this.programs.data[ 1 ], memory.programs.toString() );
+		setText( this.programs.data[ 2 ], formatBytes( memory.programsSize ) );
+
+		setText( this.readbackBuffers.data[ 1 ], memory.readbackBuffers.toString() );
+		setText( this.readbackBuffers.data[ 2 ], formatBytes( memory.readbackBuffersSize ) );
+
+		setText( this.renderTargets.data[ 1 ], memory.renderTargets.toString() );
+
+		setText( this.storageAttributes.data[ 1 ], memory.storageAttributes.toString() );
+		setText( this.storageAttributes.data[ 2 ], formatBytes( memory.storageAttributesSize ) );
+
+		setText( this.textures.data[ 1 ], memory.textures.toString() );
+		setText( this.textures.data[ 2 ], formatBytes( memory.texturesSize ) );
+
+		setText( this.uniformBuffers.data[ 1 ], memory.uniformBuffers.toString() );
+		setText( this.uniformBuffers.data[ 2 ], formatBytes( memory.uniformBuffersSize ) );
+
+	}
+
+}
+
+export { Memory };

package/examples/jsm/inspector/tabs/Parameters.js

@@ -1,17 +1,19 @@
 import { Tab } from '../ui/Tab.js';
 import { List } from '../ui/List.js';
 import { Item } from '../ui/Item.js';
-import { createValueSpan } from '../ui/utils.js';
-import { ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor, ValueButton } from '../ui/Values.js';
+import { createValueSpan, info } from '../ui/utils.js';
+import { ValueString, ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor, ValueButton } from '../ui/Values.js';
 
 class ParametersGroup {
 
 	constructor( parameters, name ) {
 
 		this.parameters = parameters;
-		this.name = name;
 
 		this.paramList = new Item( name );
+		this.paramList.setCollapsible( true );
+
+		this.objects = [];
 
 	}
 
@@ -23,6 +25,30 @@ class ParametersGroup {
 
 	}
 
+	name( name ) {
+
+		this.paramList.setValue( 0, name );
+
+		return this;
+
+	}
+
+	show() {
+
+		this.paramList.show();
+
+		return this;
+
+	}
+
+	hide() {
+
+		this.paramList.hide();
+
+		return this;
+
+	}
+
 	add( object, property, ...params ) {
 
 		const value = object[ property ];
@@ -50,6 +76,10 @@ class ParametersGroup {
 
 			item = this.addBoolean( object, property );
 
+		} else if ( type === 'string' ) {
+
+			item = this.addString( object, property );
+
 		} else if ( type === 'function' ) {
 
 			item = this.addButton( object, property, ...params );
@@ -60,16 +90,37 @@ class ParametersGroup {
 
 	}
 
+	_addInfo( editor, itemNode ) {
+
+		editor.info = ( text ) => {
+
+			info( itemNode, text );
+			return editor;
+
+		};
+
+	}
+
 	_addParameter( object, property, editor, subItem ) {
 
 		editor.name = ( name ) => {
 
-			subItem.data[ 0 ].textContent = name;
+			if ( subItem.data[ 0 ].childNodes.length > 0 && subItem.data[ 0 ].firstChild.nodeType === 3 /* Node.TEXT_NODE */ ) {
+
+				subItem.data[ 0 ].firstChild.textContent = name;
+
+			} else {
+
+				subItem.data[ 0 ].insertBefore( document.createTextNode( name ), subItem.data[ 0 ].firstChild );
+
+			}
 
 			return editor;
 
 		};
 
+		this._addInfo( editor, subItem.data[ 0 ] );
+
 		editor.listen = () => {
 
 			const update = () => {
@@ -93,6 +144,46 @@ class ParametersGroup {
 
 		};
 
+
+		this._registerParameter( object, property, editor, subItem );
+
+	}
+
+	_registerParameter( object, property, editor, subItem ) {
+
+		this.objects.push( { object: object, key: property, editor: editor, subItem: subItem } );
+
+		editor.addEventListener( 'show', () => subItem.show() );
+		editor.addEventListener( 'hide', () => subItem.hide() );
+
+	}
+
+	addString( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueString( { value } );
+		editor.addEventListener( 'change', ( { value } ) => {
+
+			object[ property ] = value;
+
+		} );
+
+		const description = createValueSpan();
+		description.textContent = property;
+
+		const subItem = new Item( description, editor.domElement );
+		this.paramList.add( subItem );
+
+		const itemRow = subItem.domElement.firstChild;
+		itemRow.classList.add( 'actionable' );
+
+		// extend object property
+
+		this._addParameter( object, property, editor, subItem );
+
+		return editor;
+
 	}
 
 	addFolder( name ) {
@@ -285,12 +376,26 @@ class ParametersGroup {
 
 		editor.name = ( name ) => {
 
-			editor.domElement.childNodes[ 0 ].textContent = name;
+			const buttonNode = editor.domElement.childNodes[ 0 ];
+
+			if ( buttonNode.childNodes.length > 0 && buttonNode.firstChild.nodeType === 3 /* Node.TEXT_NODE */ ) {
+
+				buttonNode.firstChild.textContent = name;
+
+			} else {
+
+				buttonNode.insertBefore( document.createTextNode( name ), buttonNode.firstChild );
+
+			}
 
 			return editor;
 
 		};
 
+		this._addInfo( editor, editor.domElement.childNodes[ 0 ] );
+
+		this._registerParameter( object, property, editor, subItem );
+
 		return editor;
 
 	}
@@ -299,9 +404,9 @@ class ParametersGroup {
 
 class Parameters extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Parameters' );
+		super( options.name || 'Parameters', options );
 
 		const paramList = new List( 'Property', 'Value' );
 		paramList.domElement.classList.add( 'parameters' );
@@ -315,6 +420,8 @@ class Parameters extends Tab {
 
 		this.paramList = paramList;
 
+		this.groups = [];
+
 	}
 
 	createGroup( name ) {
@@ -322,6 +429,7 @@ class Parameters extends Tab {
 		const group = new ParametersGroup( this, name );
 
 		this.paramList.add( group.paramList );
+		this.groups.push( group );
 
 		return group;
 

package/examples/jsm/inspector/tabs/Performance.js

@@ -6,9 +6,9 @@ import { createValueSpan, setText } from '../ui/utils.js';
 
 class Performance extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Performance' );
+		super( 'Performance', options );
 
 		const perfList = new List( 'Name', 'CPU', 'GPU', 'Total' );
 		perfList.setGridStyle( 'minmax(200px, 2fr) 80px 80px 80px' );
@@ -25,8 +25,9 @@ class Performance extends Tab {
 		graphContainer.className = 'graph-container';
 
 		const graph = new Graph();
-		graph.addLine( 'fps', '--accent-color' );
-		//graph.addLine( 'gpu', '--color-yellow' );
+		graph.addLine( 'fps', 'var( --color-fps )' );
+		graph.addLine( 'cpu', 'var( --color-yellow )' );
+		graph.addLine( 'gpu', 'var( --color-green )' );
 		graphContainer.append( graph.domElement );
 
 		//
@@ -45,7 +46,8 @@ class Performance extends Tab {
 		label.appendChild( checkmark );
 		*/
 
-		const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), createValueSpan( 'graph-fps-counter' ) );
+		this.graphFpsCounter = createValueSpan();
+		const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), this.graphFpsCounter );
 		perfList.add( graphStats );
 
 		const graphItem = new Item( graphContainer );
@@ -160,9 +162,22 @@ class Performance extends Tab {
 
 	}
 
-	updateGraph( inspector/*, frame*/ ) {
+	updateGraph( inspector, frame ) {
+
+		const fps = inspector.fps;
+
+		this.graph.addPoint( 'fps', fps );
+
+		if ( frame ) {
+
+			const cpuValue = Math.min( ( ( frame.cpu || 0 ) * fps ) / 1000, 1.0 ) * fps;
+			const gpuValue = Math.min( ( ( frame.gpu || 0 ) * fps ) / 1000, 1.0 ) * fps;
+
+			this.graph.addPoint( 'cpu', cpuValue );
+			this.graph.addPoint( 'gpu', gpuValue );
+
+		}
 
-		this.graph.addPoint( 'fps', inspector.fps );
 		this.graph.update();
 
 	}
@@ -243,12 +258,12 @@ class Performance extends Tab {
 
 		//
 
-		setText( 'graph-fps-counter', inspector.fps.toFixed() + ' FPS' );
+		setText( this.graphFpsCounter, inspector.fps.toFixed() + ' FPS' );
 
 		//
 
 		setText( this.frameStats.data[ 1 ], frame.cpu.toFixed( 2 ) );
-		setText( this.frameStats.data[ 2 ], frame.gpu.toFixed( 2 ) );
+		setText( this.frameStats.data[ 2 ], inspector.getRenderer().backend.hasTimestamp ? frame.gpu.toFixed( 2 ) : '-' );
 		setText( this.frameStats.data[ 3 ], frame.total.toFixed( 2 ) );
 
 		//

package/examples/jsm/inspector/tabs/Settings.js

@@ -0,0 +1,306 @@
+import { Parameters } from './Parameters.js';
+import { WebGPURenderer, WebGLBackend, Node } from 'three/webgpu';
+import { getItem, setItem } from '../Inspector.js';
+
+const _extensions = [
+	{
+		name: 'TSL Graph',
+		url: '../extensions/tsl-graph/TSLGraphEditor.js'
+	}
+];
+
+const _init = WebGPURenderer.prototype.init;
+
+function forceWebGL( enable ) {
+
+	if ( enable ) {
+
+		WebGPURenderer.prototype.init = async function () {
+
+			if ( this.backend.isWebGLBackend !== true ) {
+
+				const parameters = this.backend.parameters;
+
+				this.backend = new WebGLBackend( parameters );
+
+			}
+
+			return _init.call( this );
+
+		};
+
+	} else {
+
+		WebGPURenderer.prototype.init = _init;
+
+	}
+
+}
+
+let _state = null;
+
+function _loadState() {
+
+	if ( _state !== null ) return _state;
+
+	const settings = getItem( 'settings' );
+
+	_state = {
+		forceWebGL: settings.forceWebGL !== undefined ? settings.forceWebGL : false,
+		captureStackTrace: settings.captureStackTrace !== undefined ? settings.captureStackTrace : false,
+		activeExtensions: settings.activeExtensions !== undefined ? settings.activeExtensions : {},
+		storage: settings.storage !== undefined ? settings.storage : 'url'
+	};
+
+	if ( _state.forceWebGL ) {
+
+		forceWebGL( true );
+
+	}
+
+	if ( _state.captureStackTrace ) {
+
+		Node.captureStackTrace = true;
+
+	}
+
+	return _state;
+
+}
+
+function _saveState() {
+
+	setItem( 'settings', {
+		forceWebGL: _state.forceWebGL,
+		captureStackTrace: _state.captureStackTrace,
+		activeExtensions: _state.activeExtensions,
+		storage: _state.storage
+	} );
+
+}
+
+_loadState();
+
+//
+
+class Settings extends Parameters {
+
+	constructor() {
+
+		super( { name: 'Settings' } );
+
+		this.extensions = {};
+
+		const currentState = _loadState();
+
+		// UI
+
+		const rendererGroup = this.createGroup( 'Renderer' );
+
+		rendererGroup.add( currentState, 'forceWebGL' ).name( 'Force WebGL' ).onChange( ( enable ) => {
+
+			forceWebGL( enable );
+			_saveState();
+
+			location.reload();
+
+		} );
+
+		rendererGroup.add( currentState, 'captureStackTrace' ).name( 'Capture Stack Trace' ).onChange( ( enable ) => {
+
+			Node.captureStackTrace = enable;
+			_saveState();
+
+			location.reload();
+
+		} );
+
+		// Render Modes
+
+		const modesGroup = this.createGroup( 'Render Modes' );
+
+		modesGroup.add( { overdraw: false }, 'overdraw' ).name( 'Overdraw' ).onChange( ( enable ) => {
+
+			this.inspector.overdraw = enable;
+
+		} ).info( 'Shows how many times each pixel is shaded.' );
+
+	}
+
+	init() {
+
+		const extensionsGroup = this.createGroup( 'Extensions' );
+
+		const storageGroup = this.createGroup( 'Storage' );
+
+		const currentState = _loadState();
+
+		storageGroup.add( currentState, 'storage', { 'URL Session': 'url', 'Keep across Origin': 'origin' } )
+			.name( 'Save Settings' )
+			.onChange( () => {
+
+				_saveState();
+
+			} ).info( `
+Defines how the **Inspector** preferences and states are stored in the browser.
+
+**URL Session**
+Saves state based on the exact URL. It will reset the settings whenever the URL changes.
+
+**Keep across Origin**
+Shares the same state across any page within the current origin.` );
+
+		storageGroup.add( {
+			clear: () => {
+
+				localStorage.removeItem( 'threejs-inspector' );
+
+				location.reload();
+
+			}
+		}, 'clear' ).name( 'Clear Settings' );
+
+		this._getExtensions().then( extensions => {
+
+			for ( const extension of extensions ) {
+
+				extension.active = false;
+				extension.loaded = false;
+				extension.tab = null;
+
+				this.extensions[ extension.name ] = extension;
+
+				extension.ui = extensionsGroup.add( { [ extension.name ]: false }, extension.name ).onChange( async ( value ) => {
+
+					this.setActiveExtension( extension.name, value );
+
+					// User preference
+
+					if ( value ) {
+
+						_state.activeExtensions[ extension.name ] = {
+							name: extension.name,
+							url: extension.url
+						};
+
+					} else {
+
+						delete _state.activeExtensions[ extension.name ];
+
+
+					}
+
+					//
+
+					this._updateExtensionUI( extension );
+
+					_saveState();
+
+				} );
+
+				// Set user-defined state
+
+				if ( _state.activeExtensions[ extension.name ] !== undefined ) {
+
+					extension.ui.setValue( true );
+
+				}
+
+			}
+
+		} );
+
+	}
+
+	async setActiveExtension( name, value ) {
+
+		const extension = this.extensions[ name ];
+		const inspector = this.inspector;
+
+		if ( extension ) {
+
+			if ( value ) {
+
+				await this._loadExtension( inspector, extension );
+
+			} else {
+
+				await this._unloadExtension( inspector, extension );
+
+			}
+
+		}
+
+	}
+
+	_updateExtensionUI( extension ) {
+
+		const forceActive = extension.active && _state.activeExtensions[ extension.name ] === undefined;
+
+		if ( forceActive ) {
+
+			extension.ui.checkbox.checked = true;
+			extension.ui.domElement.style.setProperty( '--accent-color', 'var(--color-green)' );
+
+		} else {
+
+			extension.ui.domElement.style.removeProperty( '--accent-color' );
+
+		}
+
+	}
+
+	async _unloadExtension( inspector, extension ) {
+
+		if ( extension.active === false ) return;
+
+		//
+
+		inspector.removeTab( extension.tab );
+
+		extension.active = false;
+		extension.loaded = false;
+		extension.tab = null;
+
+		this._updateExtensionUI( extension );
+
+		this.dispatchEvent( { type: 'extensionremoved', name: extension.name } );
+
+	}
+
+	async _loadExtension( inspector, extension ) {
+
+		if ( extension.active === true ) return;
+
+		//
+
+		extension.active = true;
+
+		const extUrl = new URL( extension.url, import.meta.url ).href;
+
+		const module = await import( extUrl );
+
+		const keys = Object.keys( module );
+		const ExtensionClass = module[ keys[ 0 ] ];
+		const extensionTab = new ExtensionClass();
+
+		inspector.addTab( extensionTab );
+
+		extension.loaded = true;
+		extension.tab = extensionTab;
+
+		this._updateExtensionUI( extension );
+
+		this.dispatchEvent( { type: 'extensionadded', name: extension.name, tab: extensionTab } );
+
+	}
+
+	async _getExtensions() {
+
+		return _extensions;
+
+	}
+
+}
+
+export { Settings };