@gnsx/three 0.184.0

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

@@ -0,0 +1,380 @@
+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 { 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.objects = [];
+
+	}
+
+	close() {
+
+		this.paramList.close();
+
+		return this;
+
+	}
+
+	add( object, property, ...params ) {
+
+		const value = object[ property ];
+		const type = typeof value;
+
+		let item = null;
+
+		if ( typeof params[ 0 ] === 'object' ) {
+
+			item = this.addSelect( object, property, params[ 0 ] );
+
+		} else if ( type === 'number' ) {
+
+			if ( params.length >= 2 ) {
+
+				item = this.addSlider( object, property, ...params );
+
+			} else {
+
+				item = this.addNumber( object, property, ...params );
+
+			}
+
+		} else if ( type === 'boolean' ) {
+
+			item = this.addBoolean( object, property );
+
+		} else if ( type === 'string' ) {
+
+			item = this.addString( object, property );
+
+		} else if ( type === 'function' ) {
+
+			item = this.addButton( object, property, ...params );
+
+		}
+
+		return item;
+
+	}
+
+	_addParameter( object, property, editor, subItem ) {
+
+		editor.name = ( name ) => {
+
+			subItem.data[ 0 ].textContent = name;
+
+			return editor;
+
+		};
+
+		editor.listen = () => {
+
+			const update = () => {
+
+				const value = editor.getValue();
+				const propertyValue = object[ property ];
+
+				if ( value !== propertyValue ) {
+
+					editor.setValue( propertyValue );
+
+				}
+
+				requestAnimationFrame( update );
+
+			};
+
+			requestAnimationFrame( update );
+
+			return editor;
+
+		};
+
+
+		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 ) {
+
+		const group = new ParametersGroup( this.parameters, name );
+
+		this.paramList.add( group.paramList );
+
+		return group;
+
+	}
+
+	addBoolean( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueCheckbox( { 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 );
+
+		// extends logic to toggle checkbox when clicking on the row
+
+		const itemRow = subItem.domElement.firstChild;
+
+		itemRow.classList.add( 'actionable' );
+		itemRow.addEventListener( 'click', ( e ) => {
+
+			if ( e.target.closest( 'label' ) ) return;
+
+			const checkbox = itemRow.querySelector( 'input[type="checkbox"]' );
+
+			if ( checkbox ) {
+
+				checkbox.checked = ! checkbox.checked;
+				checkbox.dispatchEvent( new Event( 'change' ) );
+
+			}
+
+		} );
+
+		// extend object property
+
+		this._addParameter( object, property, editor, subItem );
+
+		return editor;
+
+	}
+
+	addSelect( object, property, options ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueSelect( { options, 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;
+
+	}
+
+	addColor( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueColor( { 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;
+
+	}
+
+	addSlider( object, property, min = 0, max = 1, step = 0.01 ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueSlider( { value, min, max, step } );
+		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;
+
+	}
+
+	addNumber( object, property, ...params ) {
+
+		const value = object[ property ];
+		const [ min, max ] = params;
+
+		const editor = new ValueNumber( { value, min, max } );
+		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;
+
+	}
+
+	addButton( object, property ) {
+
+		const value = object[ property ];
+
+		const editor = new ValueButton( { text: property, value } );
+		editor.addEventListener( 'change', ( { value } ) => {
+
+			object[ property ] = value;
+
+		} );
+
+		const subItem = new Item( editor.domElement );
+		subItem.itemRow.childNodes[ 0 ].style.gridColumn = '1 / -1';
+		this.paramList.add( subItem );
+
+		const itemRow = subItem.domElement.firstChild;
+		itemRow.classList.add( 'actionable' );
+
+		// extend object property
+
+		editor.name = ( name ) => {
+
+			editor.domElement.childNodes[ 0 ].textContent = name;
+
+			return editor;
+
+		};
+
+		this._registerParameter( object, property, editor, subItem );
+
+		return editor;
+
+	}
+
+}
+
+class Parameters extends Tab {
+
+	constructor( options = {} ) {
+
+		super( options.name || 'Parameters', options );
+
+		const paramList = new List( 'Property', 'Value' );
+		paramList.domElement.classList.add( 'parameters' );
+		paramList.setGridStyle( '.5fr 1fr' );
+		paramList.domElement.style.minWidth = '300px';
+
+		const scrollWrapper = document.createElement( 'div' );
+		scrollWrapper.className = 'list-scroll-wrapper';
+		scrollWrapper.appendChild( paramList.domElement );
+		this.content.appendChild( scrollWrapper );
+
+		this.paramList = paramList;
+
+		this.groups = [];
+
+	}
+
+	createGroup( name ) {
+
+		const group = new ParametersGroup( this, name );
+
+		this.paramList.add( group.paramList );
+		this.groups.push( group );
+
+		return group;
+
+	}
+
+}
+
+export { Parameters };

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

@@ -0,0 +1,268 @@
+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 } from '../ui/utils.js';
+
+class Performance extends Tab {
+
+	constructor( options = {} ) {
+
+		super( 'Performance', options );
+
+		const perfList = new List( 'Name', 'CPU', 'GPU', 'Total' );
+		perfList.setGridStyle( 'minmax(200px, 2fr) 80px 80px 80px' );
+		perfList.domElement.style.minWidth = '600px';
+
+		const scrollWrapper = document.createElement( 'div' );
+		scrollWrapper.className = 'list-scroll-wrapper';
+		scrollWrapper.appendChild( perfList.domElement );
+		this.content.appendChild( scrollWrapper );
+
+		//
+
+		const graphContainer = document.createElement( 'div' );
+		graphContainer.className = 'graph-container';
+
+		const graph = new Graph();
+		graph.addLine( 'fps', 'var( --color-fps )' );
+		//graph.addLine( 'gpu', 'var( --color-yellow )' );
+		graphContainer.append( graph.domElement );
+
+		//
+
+		/*
+		const label = document.createElement( 'label' );
+		label.className = 'custom-checkbox';
+
+		const checkbox = document.createElement( 'input' );
+		checkbox.type = 'checkbox';
+
+		const checkmark = document.createElement( 'span' );
+		checkmark.className = 'checkmark';
+
+		label.appendChild( checkbox );
+		label.appendChild( checkmark );
+		*/
+
+		const graphStats = new Item( 'Graph Stats', createValueSpan(), createValueSpan(), createValueSpan( 'graph-fps-counter' ) );
+		perfList.add( graphStats );
+
+		const graphItem = new Item( graphContainer );
+		graphItem.itemRow.childNodes[ 0 ].style.gridColumn = '1 / -1';
+		graphStats.add( graphItem );
+
+		//
+
+		const frameStats = new Item( 'Frame Stats', createValueSpan(), createValueSpan(), createValueSpan() );
+		perfList.add( frameStats );
+
+		const miscellaneous = new Item( 'Miscellaneous & Idle', createValueSpan(), createValueSpan(), createValueSpan() );
+		miscellaneous.domElement.firstChild.style.backgroundColor = '#00ff0b1a';
+		miscellaneous.domElement.firstChild.classList.add( 'no-hover' );
+		frameStats.add( miscellaneous );
+
+		//
+
+		this.notInUse = new Map();
+		this.frameStats = frameStats;
+		this.graphStats = graphStats;
+		this.graph = graph;
+		this.miscellaneous = miscellaneous;
+
+		//
+
+		this.currentRender = null;
+		this.currentItem = null;
+		this.frameItems = new Map();
+
+	}
+
+	resolveStats( inspector, stats ) {
+
+		const data = inspector.getStatsData( stats.cid );
+
+		let item = data.item;
+
+		if ( item === undefined ) {
+
+			item = new Item( createValueSpan(), createValueSpan(), createValueSpan(), createValueSpan() );
+
+			if ( stats.name ) {
+
+				if ( stats.isComputeStats === true ) {
+
+					stats.name = `${ stats.name } [ Compute ]`;
+
+				}
+
+			} else {
+
+				stats.name = `Unnamed ${ stats.cid }`;
+
+			}
+
+			item.userData.name = stats.name;
+
+			this.currentItem.add( item );
+			data.item = item;
+
+		} else {
+
+			item.userData.name = stats.name;
+
+			if ( this.notInUse.has( stats.cid ) ) {
+
+				item.domElement.firstElementChild.classList.remove( 'alert' );
+
+				this.notInUse.delete( stats.cid );
+
+			}
+
+			const statsIndex = stats.parent.children.indexOf( stats );
+
+			if ( item.parent === null || item.parent.children.indexOf( item ) !== statsIndex ) {
+
+				this.currentItem.add( item, statsIndex );
+
+			}
+
+		}
+
+		let name = item.userData.name;
+
+		if ( stats.isComputeStats ) {
+
+			name += ' [ Compute ]';
+
+		}
+
+		setText( item.data[ 0 ], name );
+		setText( item.data[ 1 ], data.cpu.toFixed( 2 ) );
+		setText( item.data[ 2 ], stats.gpuNotAvailable === true ? '-' : data.gpu.toFixed( 2 ) );
+		setText( item.data[ 3 ], data.total.toFixed( 2 ) );
+
+		//
+
+		const previousItem = this.currentItem;
+
+		this.currentItem = item;
+
+		for ( const child of stats.children ) {
+
+			this.resolveStats( inspector, child );
+
+		}
+
+		this.currentItem = previousItem;
+
+		this.frameItems.set( stats.cid, item );
+
+	}
+
+	updateGraph( inspector/*, frame*/ ) {
+
+		this.graph.addPoint( 'fps', inspector.fps );
+		this.graph.update();
+
+	}
+
+	addNotInUse( cid, item ) {
+
+		item.domElement.firstElementChild.classList.add( 'alert' );
+
+		this.notInUse.set( cid, {
+			item,
+			time: performance.now()
+		} );
+
+		this.updateNotInUse( cid );
+
+	}
+
+	updateNotInUse( cid ) {
+
+		const { item, time } = this.notInUse.get( cid );
+
+		const current = performance.now();
+		const duration = 5;
+		const remaining = duration - Math.floor( ( current - time ) / 1000 );
+
+		if ( remaining >= 0 ) {
+
+			const counter = '*'.repeat( Math.max( 0, remaining ) );
+			const element = item.domElement.querySelector( '.list-item-cell .value' );
+
+			setText( element, item.userData.name + ' (not in use) ' + counter );
+
+		} else {
+
+			item.domElement.firstElementChild.classList.remove( 'alert' );
+			item.parent.remove( item );
+
+			this.notInUse.delete( cid );
+
+		}
+
+	}
+
+	updateText( inspector, frame ) {
+
+		const oldFrameItems = new Map( this.frameItems );
+
+		this.frameItems.clear();
+		this.currentItem = this.frameStats;
+
+		for ( const child of frame.children ) {
+
+			this.resolveStats( inspector, child );
+
+		}
+
+		// remove unused frame items
+
+		for ( const [ cid, item ] of oldFrameItems ) {
+
+			if ( ! this.frameItems.has( cid ) ) {
+
+				this.addNotInUse( cid, item );
+
+				oldFrameItems.delete( cid );
+
+			}
+
+		}
+
+		// update not in use items
+
+		for ( const cid of this.notInUse.keys() ) {
+
+			this.updateNotInUse( cid );
+
+		}
+
+		//
+
+		setText( 'graph-fps-counter', 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[ 3 ], frame.total.toFixed( 2 ) );
+
+		//
+
+		setText( this.miscellaneous.data[ 1 ], frame.miscellaneous.toFixed( 2 ) );
+		setText( this.miscellaneous.data[ 2 ], '-' );
+		setText( this.miscellaneous.data[ 3 ], frame.miscellaneous.toFixed( 2 ) );
+
+		//
+
+		this.currentItem = null;
+
+	}
+
+}
+
+export { Performance };