super-three 0.181.0 → 0.184.0

package/examples/jsm/inspector/extensions/tsl-graph/TSLGraphLoader.js

@@ -0,0 +1,281 @@
+import { FileLoader, error } from 'three';
+
+import * as THREE from 'three';
+import * as TSL from 'three/tsl';
+
+const _library = {
+	'three/tsl': { ...TSL }
+};
+
+const STORAGE_PREFIX = 'tsl-graph';
+const STORAGE_CODE = 'tsl-graph-code';
+
+function _storageKey( graphId ) {
+
+	return `${STORAGE_PREFIX}:${graphId}`;
+
+}
+
+class TSLGraphLoaderApplier {
+
+	constructor( tslGraphFns ) {
+
+		this.tslGraphFns = tslGraphFns;
+
+	}
+
+	apply( scene ) {
+
+		const tslGraphFns = this.tslGraphFns;
+
+		scene.traverse( ( object ) => {
+
+			if ( object.material && object.material.userData.graphId ) {
+
+				if ( tslGraphFns[ object.material.userData.graphId ] ) {
+
+					tslGraphFns[ object.material.userData.graphId ]( object.material );
+
+					object.material.needsUpdate = true;
+
+				}
+
+			}
+
+		} );
+
+	}
+
+}
+
+export class TSLGraphLoader extends FileLoader {
+
+	constructor( manager ) {
+
+		super( manager );
+
+	}
+
+	load( url, onLoad, onProgress, onError ) {
+
+		super.load( url, ( text ) => {
+
+			let json;
+
+			try {
+
+				json = JSON.parse( text );
+
+			} catch ( e ) {
+
+				if ( onError ) onError( e );
+
+				return;
+
+			}
+
+			const applier = this.parse( json );
+
+			if ( onLoad ) onLoad( applier );
+
+		}, onProgress, onError );
+
+	}
+
+	parseMaterial( json ) {
+
+		const baseFn = 'tslGraph';
+
+		const imports = {};
+		const materials = [ this._generateMaterialCode( json, baseFn, imports ) ];
+		const code = this._generateCode( materials, imports );
+
+		const tslFunction = new Function( code )()( THREE, imports );
+
+		return tslFunction;
+
+	}
+
+	parseMaterials( json ) {
+
+		const imports = {};
+		const materials = [];
+
+		for ( const [ name, material ] of Object.entries( json ) ) {
+
+			materials.push( this._generateMaterialCode( material, name, imports ) );
+
+		}
+
+		const code = this._generateCode( materials, imports );
+
+		const tslFunction = new Function( code )()( THREE, imports );
+
+		return tslFunction;
+
+	}
+
+	parse( json ) {
+
+		let result;
+
+		if ( json.material && json.material.code ) {
+
+			result = this.parseMaterial( json.material );
+
+		} else if ( json.materials ) {
+
+			result = this.parseMaterials( json.materials );
+
+		} else if ( json.codes && json.graphs ) {
+
+			result = this.parseMaterials( json.codes.materials );
+
+			TSLGraphLoader.setGraphs( json );
+
+		}
+
+		return new TSLGraphLoaderApplier( result );
+
+	}
+
+	_generateMaterialCode( json, name = 'tslGraph', imports = {} ) {
+
+		const code = json.code.replace( 'function tslGraph', `materials[ '${ name }' ] = function` ).replace( /\n|^/g, '\n\t' );
+
+		for ( const importData of json.imports ) {
+
+			if ( _library[ importData.from ] ) {
+
+				for ( const importName of importData.imports ) {
+
+					if ( _library[ importData.from ][ importName ] ) {
+
+						imports[ importName ] = _library[ importData.from ][ importName ];
+
+					} else {
+
+						error( `TSLGraph: Import ${ importName } not found in ${ importData.from }.` );
+
+					}
+
+				}
+
+			} else {
+
+				error( `TSLGraph: Library ${ importData.from } not found.` );
+
+			}
+
+		}
+
+		return code;
+
+	}
+
+	_generateCode( materials, imports ) {
+
+		const fnCode = `return ( THREE, { ${ Object.keys( imports ).join( ', ' ) } } ) => {\n\n\tconst materials = {};\n${ materials.join( '\n' ) }\n\n\treturn materials;\n\n}`;
+
+		return fnCode;
+
+	}
+
+	static get hasGraphs() {
+
+		return Object.keys( TSLGraphLoader.getCodes().materials ).length > 0;
+
+	}
+
+	static getCodes() {
+
+		const code = window.localStorage.getItem( STORAGE_CODE );
+
+		return code ? JSON.parse( code ) : { materials: {} };
+
+	}
+
+	static setCodes( codes ) {
+
+		window.localStorage.setItem( STORAGE_CODE, JSON.stringify( codes ) );
+
+	}
+
+	static setGraph( graphId, graphData ) {
+
+		window.localStorage.setItem( _storageKey( graphId ), JSON.stringify( graphData ) );
+
+	}
+
+	static getGraph( graphId ) {
+
+		const raw = window.localStorage.getItem( _storageKey( graphId ) );
+
+		if ( ! raw ) return null;
+
+		try {
+
+			return JSON.parse( raw );
+
+		} catch ( e ) {
+
+			error( 'TSLGraph: Invalid graph JSON in localStorage, ignoring.', e );
+			return null;
+
+		}
+
+	}
+
+	static deleteGraph( graphId ) {
+
+		window.localStorage.removeItem( _storageKey( graphId ) );
+
+	}
+
+	static setGraphs( json ) {
+
+		if ( ! json.codes || ! json.graphs ) {
+
+			throw new Error( 'TSLGraph: Invalid import file structure.' );
+
+		}
+
+		TSLGraphLoader.clearGraphs();
+
+		// Save imported graph visualizations
+		for ( const [ id, graphData ] of Object.entries( json.graphs ) ) {
+
+			TSLGraphLoader.setGraph( id, graphData );
+
+		}
+
+		// Fully overwrite codes
+		TSLGraphLoader.setCodes( json.codes );
+
+		return json;
+
+	}
+
+	static clearGraphs() {
+
+		const keysToRemove = [];
+		for ( let i = 0; i < window.localStorage.length; i ++ ) {
+
+			const key = window.localStorage.key( i );
+			if ( key.startsWith( STORAGE_PREFIX ) ) {
+
+				keysToRemove.push( key );
+
+			}
+
+		}
+
+		for ( const key of keysToRemove ) {
+
+			window.localStorage.removeItem( key );
+
+		}
+
+	}
+
+}

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

@@ -2,9 +2,9 @@ import { Tab } from '../ui/Tab.js';
 
 class Console extends Tab {
 
-	constructor() {
+	constructor( options = {} ) {
 
-		super( 'Console' );
+		super( 'Console', options );
 
 		this.filters = { info: true, warn: true, error: true };
 		this.filterText = '';
@@ -33,8 +33,14 @@ class Console extends Tab {
 
 		} );
 
-		const filtersGroup = document.createElement( 'div' );
-		filtersGroup.className = 'console-filters-group';
+		const copyButton = document.createElement( 'button' );
+		copyButton.className = 'console-copy-button';
+		copyButton.title = 'Copy all';
+		copyButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
+		copyButton.addEventListener( 'click', () => this.copyAll( copyButton ) );
+
+		const buttonsGroup = document.createElement( 'div' );
+		buttonsGroup.className = 'console-buttons-group';
 
 		Object.keys( this.filters ).forEach( type => {
 
@@ -53,11 +59,11 @@ class Console extends Tab {
 			label.appendChild( checkbox );
 			label.appendChild( checkmark );
 			label.append( type.charAt( 0 ).toUpperCase() + type.slice( 1 ) );
-			filtersGroup.appendChild( label );
+			buttonsGroup.appendChild( label );
 
 		} );
 
-		filtersGroup.addEventListener( 'change', ( e ) => {
+		buttonsGroup.addEventListener( 'change', ( e ) => {
 
 			const type = e.target.dataset.type;
 			if ( type in this.filters ) {
@@ -69,8 +75,10 @@ class Console extends Tab {
 
 		} );
 
+		buttonsGroup.appendChild( copyButton );
+
 		header.appendChild( filterInput );
-		header.appendChild( filtersGroup );
+		header.appendChild( buttonsGroup );
 		this.content.appendChild( header );
 
 	}
@@ -92,6 +100,32 @@ class Console extends Tab {
 
 	}
 
+	copyAll( button ) {
+
+		const win = this.logContainer.ownerDocument.defaultView;
+		const selection = win.getSelection();
+		const selectedText = selection.toString();
+		const textInConsole = selectedText && this.logContainer.contains( selection.anchorNode );
+
+		let text;
+		if ( textInConsole ) {
+
+			text = selectedText;
+
+		} else {
+
+			const messages = this.logContainer.querySelectorAll( '.log-message:not(.hidden)' );
+			text = Array.from( messages ).map( msg => msg.dataset.rawText ).join( '\n' );
+
+		}
+
+		navigator.clipboard.writeText( text );
+
+		button.classList.add( 'copied' );
+		setTimeout( () => button.classList.remove( 'copied' ), 350 );
+
+	}
+
 	_getIcon( type, subType ) {
 
 		let icon;

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

@@ -0,0 +1,128 @@
+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.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 ) );
+
+	}
+
+}
+
+export { Memory };

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

@@ -2,7 +2,7 @@ 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 { ValueString, ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor, ValueButton } from '../ui/Values.js';
 
 class ParametersGroup {
 
@@ -13,6 +13,8 @@ class ParametersGroup {
 
 		this.paramList = new Item( name );
 
+		this.objects = [];
+
 	}
 
 	close() {
@@ -50,6 +52,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 );
@@ -93,6 +99,43 @@ class ParametersGroup {
 
 		};
 
+
+		this._registerParameter( object, property, editor, subItem );
+
+	}
+
+	_registerParameter( object, property, editor, subItem ) {
+
+		this.objects.push( { object: object, key: property, editor: editor, subItem: subItem } );
+
+	}
+
+	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 ) {
@@ -291,6 +334,8 @@ class ParametersGroup {
 
 		};
 
+		this._registerParameter( object, property, editor, subItem );
+
 		return editor;
 
 	}
@@ -299,9 +344,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 +360,8 @@ class Parameters extends Tab {
 
 		this.paramList = paramList;
 
+		this.groups = [];
+
 	}
 
 	createGroup( name ) {
@@ -322,6 +369,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,8 @@ 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( 'gpu', 'var( --color-yellow )' );
 		graphContainer.append( graph.domElement );
 
 		//