@plastic-software/three 0.183.4 → 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/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 {
 
@@ -52,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 );
@@ -106,6 +110,34 @@ class ParametersGroup {
 
 	}
 
+	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 ) {
 
 		const group = new ParametersGroup( this.parameters, name );
@@ -314,7 +346,7 @@ class Parameters extends Tab {
 
 	constructor( options = {} ) {
 
-		super( 'Parameters', options );
+		super( options.name || 'Parameters', options );
 
 		const paramList = new List( 'Property', 'Value' );
 		paramList.domElement.classList.add( 'parameters' );

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

@@ -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 );
 
 		//