@plastic-software/three 0.180.0 → 0.181.2

package/examples/jsm/inspector/RendererInspector.js

@@ -0,0 +1,415 @@
+
+import { InspectorBase, TimestampQuery } from 'three/webgpu';
+
+class ObjectStats {
+
+	constructor( uid, name ) {
+
+		this.uid = uid;
+		this.cid = uid.match( /^(.*):f(\d+)$/ )[ 1 ]; // call id
+		this.name = name;
+		this.timestamp = 0;
+		this.cpu = 0;
+		this.gpu = 0;
+		this.fps = 0;
+
+		this.children = [];
+		this.parent = null;
+
+	}
+
+}
+
+class RenderStats extends ObjectStats {
+
+	constructor( uid, scene, camera, renderTarget ) {
+
+		let name = scene.name;
+
+		if ( name === '' ) {
+
+			if ( scene.isScene ) {
+
+				name = 'Scene';
+
+			} else if ( scene.isQuadMesh ) {
+
+				name = 'QuadMesh';
+
+			}
+
+		}
+
+		super( uid, name );
+
+		this.scene = scene;
+		this.camera = camera;
+		this.renderTarget = renderTarget;
+
+		this.isRenderStats = true;
+
+	}
+
+}
+
+class ComputeStats extends ObjectStats {
+
+	constructor( uid, computeNode ) {
+
+		super( uid, computeNode.name );
+
+		this.computeNode = computeNode;
+
+		this.isComputeStats = true;
+
+	}
+
+}
+
+export class RendererInspector extends InspectorBase {
+
+	constructor() {
+
+		super();
+
+		this.currentFrame = null;
+		this.currentRender = null;
+		this.currentNodes = null;
+		this.lastFrame = null;
+
+		this.frames = [];
+		this.framesLib = {};
+		this.maxFrames = 512;
+
+		this._lastFinishTime = 0;
+		this._resolveTimestampPromise = null;
+
+		this.isRendererInspector = true;
+
+	}
+
+	getParent() {
+
+		return this.currentRender || this.getFrame();
+
+	}
+
+	begin() {
+
+		this.currentFrame = this._createFrame();
+		this.currentRender = this.currentFrame;
+		this.currentNodes = [];
+
+	}
+
+	finish() {
+
+		const now = performance.now();
+
+		const frame = this.currentFrame;
+		frame.finishTime = now;
+		frame.deltaTime = now - ( this._lastFinishTime > 0 ? this._lastFinishTime : now );
+
+		this.addFrame( frame );
+
+		this.fps = this._getFPS();
+
+		this.lastFrame = frame;
+
+		this.currentFrame = null;
+		this.currentRender = null;
+		this.currentNodes = null;
+
+		this._lastFinishTime = now;
+
+	}
+
+	_getFPS() {
+
+		let frameSum = 0;
+		let timeSum = 0;
+
+		for ( let i = this.frames.length - 1; i >= 0; i -- ) {
+
+			const frame = this.frames[ i ];
+
+			frameSum ++;
+			timeSum += frame.deltaTime;
+
+			if ( timeSum >= 1000 ) break;
+
+		}
+
+		return ( frameSum * 1000 ) / timeSum;
+
+	}
+
+	_createFrame() {
+
+		return {
+			frameId: this.nodeFrame.frameId,
+			resolvedCompute: false,
+			resolvedRender: false,
+			deltaTime: 0,
+			startTime: performance.now(),
+			finishTime: 0,
+			miscellaneous: 0,
+			children: [],
+			renders: [],
+			computes: []
+		};
+
+	}
+
+	getFrame() {
+
+		return this.currentFrame || this.lastFrame;
+
+	}
+
+	getFrameById( frameId ) {
+
+		return this.framesLib[ frameId ] || null;
+
+	}
+
+	resolveViewer() { }
+
+	resolveFrame( /*frame*/ ) { }
+
+	async resolveTimestamp() {
+
+		if ( this._resolveTimestampPromise !== null ) {
+
+			return this._resolveTimestampPromise;
+
+		}
+
+		this._resolveTimestampPromise = new Promise( ( resolve ) => {
+
+			requestAnimationFrame( async () => {
+
+				const renderer = this.getRenderer();
+
+				await renderer.resolveTimestampsAsync( TimestampQuery.COMPUTE );
+				await renderer.resolveTimestampsAsync( TimestampQuery.RENDER );
+
+				const computeFrames = renderer.backend.getTimestampFrames( TimestampQuery.COMPUTE );
+				const renderFrames = renderer.backend.getTimestampFrames( TimestampQuery.RENDER );
+
+				const frameIds = [ ...new Set( [ ...computeFrames, ...renderFrames ] ) ];
+
+				for ( const frameId of frameIds ) {
+
+					const frame = this.getFrameById( frameId );
+
+					if ( frame !== null ) {
+
+						// resolve compute timestamps
+
+						if ( frame.resolvedCompute === false ) {
+
+							if ( frame.computes.length > 0 ) {
+
+								if ( computeFrames.includes( frameId ) ) {
+
+									for ( const stats of frame.computes ) {
+
+										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+
+											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+
+										} else {
+
+											stats.gpu = 0;
+											stats.gpuNotAvailable = true;
+
+										}
+
+									}
+
+									frame.resolvedCompute = true;
+
+								}
+
+							} else {
+
+								frame.resolvedCompute = true;
+
+							}
+
+						}
+
+						// resolve render timestamps
+
+						if ( frame.resolvedRender === false ) {
+
+							if ( frame.renders.length > 0 ) {
+
+								if ( renderFrames.includes( frameId ) ) {
+
+									for ( const stats of frame.renders ) {
+
+										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+
+											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+
+										} else {
+
+											stats.gpu = 0;
+											stats.gpuNotAvailable = true;
+
+										}
+
+									}
+
+									frame.resolvedRender = true;
+
+								}
+
+							} else {
+
+								frame.resolvedRender = true;
+
+							}
+
+						}
+
+						if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {
+
+							this.resolveFrame( frame );
+
+						}
+
+					}
+
+				}
+
+				this._resolveTimestampPromise = null;
+
+				resolve();
+
+			} );
+
+		} );
+
+		return this._resolveTimestampPromise;
+
+	}
+
+	get isAvailable() {
+
+		const renderer = this.getRenderer();
+
+		return renderer !== null;
+
+	}
+
+	addFrame( frame ) {
+
+		// Limit to max frames.
+
+		if ( this.frames.length >= this.maxFrames ) {
+
+			const removedFrame = this.frames.shift();
+			delete this.framesLib[ removedFrame.frameId ];
+
+		}
+
+		this.frames.push( frame );
+		this.framesLib[ frame.frameId ] = frame;
+
+		if ( this.isAvailable ) {
+
+			this.resolveViewer();
+			this.resolveTimestamp();
+
+		}
+
+	}
+
+	inspect( node ) {
+
+		this.currentNodes.push( node );
+
+	}
+
+	beginCompute( uid, computeNode ) {
+
+		const frame = this.getFrame();
+
+		if ( ! frame ) return;
+
+		const currentCompute = new ComputeStats( uid, computeNode );
+		currentCompute.timestamp = performance.now();
+		currentCompute.parent = this.currentCompute || this.getParent();
+
+		frame.computes.push( currentCompute );
+
+		if ( this.currentRender !== null ) {
+
+			this.currentRender.children.push( currentCompute );
+
+		} else {
+
+			frame.children.push( currentCompute );
+
+		}
+
+		this.currentCompute = currentCompute;
+
+	}
+
+	finishCompute() {
+
+		const frame = this.getFrame();
+
+		if ( ! frame ) return;
+
+		const currentCompute = this.currentCompute;
+		currentCompute.cpu = performance.now() - currentCompute.timestamp;
+
+		this.currentCompute = currentCompute.parent.isComputeStats ? currentCompute.parent : null;
+
+	}
+
+	beginRender( uid, scene, camera, renderTarget ) {
+
+		const frame = this.getFrame();
+
+		if ( ! frame ) return;
+
+		const currentRender = new RenderStats( uid, scene, camera, renderTarget );
+		currentRender.timestamp = performance.now();
+		currentRender.parent = this.getParent();
+
+		frame.renders.push( currentRender );
+
+		if ( this.currentRender !== null ) {
+
+			this.currentRender.children.push( currentRender );
+
+		} else {
+
+			frame.children.push( currentRender );
+
+		}
+
+		this.currentRender = currentRender;
+
+	}
+
+	finishRender() {
+
+		const frame = this.getFrame();
+
+		if ( ! frame ) return;
+
+		const currentRender = this.currentRender;
+		currentRender.cpu = performance.now() - currentRender.timestamp;
+
+		this.currentRender = currentRender.parent;
+
+	}
+
+}

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

@@ -0,0 +1,204 @@
+import { Tab } from '../ui/Tab.js';
+
+class Console extends Tab {
+
+	constructor() {
+
+		super( 'Console' );
+
+		this.filters = { info: true, warn: true, error: true };
+		this.filterText = '';
+
+		this.buildHeader();
+
+		this.logContainer = document.createElement( 'div' );
+		this.logContainer.id = 'console-log';
+		this.content.appendChild( this.logContainer );
+
+	}
+
+	buildHeader() {
+
+		const header = document.createElement( 'div' );
+		header.className = 'console-header';
+
+		const filterInput = document.createElement( 'input' );
+		filterInput.type = 'text';
+		filterInput.className = 'console-filter-input';
+		filterInput.placeholder = 'Filter...';
+		filterInput.addEventListener( 'input', ( e ) => {
+
+			this.filterText = e.target.value.toLowerCase();
+			this.applyFilters();
+
+		} );
+
+		const filtersGroup = document.createElement( 'div' );
+		filtersGroup.className = 'console-filters-group';
+
+		Object.keys( this.filters ).forEach( type => {
+
+			const label = document.createElement( 'label' );
+			label.className = 'custom-checkbox';
+			label.style.color = `var(--${type === 'info' ? 'text-primary' : 'color-' + ( type === 'warn' ? 'yellow' : 'red' )})`;
+
+			const checkbox = document.createElement( 'input' );
+			checkbox.type = 'checkbox';
+			checkbox.checked = this.filters[ type ];
+			checkbox.dataset.type = type;
+
+			const checkmark = document.createElement( 'span' );
+			checkmark.className = 'checkmark';
+
+			label.appendChild( checkbox );
+			label.appendChild( checkmark );
+			label.append( type.charAt( 0 ).toUpperCase() + type.slice( 1 ) );
+			filtersGroup.appendChild( label );
+
+		} );
+
+		filtersGroup.addEventListener( 'change', ( e ) => {
+
+			const type = e.target.dataset.type;
+			if ( type in this.filters ) {
+
+				this.filters[ type ] = e.target.checked;
+				this.applyFilters();
+
+			}
+
+		} );
+
+		header.appendChild( filterInput );
+		header.appendChild( filtersGroup );
+		this.content.appendChild( header );
+
+	}
+
+	applyFilters() {
+
+		const messages = this.logContainer.querySelectorAll( '.log-message' );
+		messages.forEach( msg => {
+
+			const type = msg.dataset.type;
+			const text = msg.dataset.rawText.toLowerCase();
+
+			const showByType = this.filters[ type ];
+			const showByText = text.includes( this.filterText );
+
+			msg.classList.toggle( 'hidden', ! ( showByType && showByText ) );
+
+		} );
+
+	}
+
+	_getIcon( type, subType ) {
+
+		let icon;
+
+		if ( subType === 'tip' ) {
+
+			icon = '💭';
+
+		} else if ( subType === 'tsl' ) {
+
+			icon = '✨';
+
+		} else if ( subType === 'webgpurenderer' ) {
+
+			icon = '🎨';
+
+		} else if ( type === 'warn' ) {
+
+			icon = '⚠️';
+
+		} else if ( type === 'error' ) {
+
+			icon = '🔴';
+
+		} else if ( type === 'info' ) {
+
+			icon = 'ℹ️';
+
+		}
+
+		return icon;
+
+	}
+
+	_formatMessage( type, text ) {
+
+		const fragment = document.createDocumentFragment();
+		const prefixMatch = text.match( /^([\w\.]+:\s)/ );
+		let content = text;
+
+		if ( prefixMatch ) {
+
+			const fullPrefix = prefixMatch[ 0 ];
+			const parts = fullPrefix.slice( 0, - 2 ).split( '.' );
+			const shortPrefix = ( parts.length > 1 ? parts[ parts.length - 1 ] : parts[ 0 ] ) + ':';
+
+			const icon = this._getIcon( type, shortPrefix.split( ':' )[ 0 ].toLowerCase() );
+
+			fragment.appendChild( document.createTextNode( icon + ' ' ) );
+
+			const prefixSpan = document.createElement( 'span' );
+			prefixSpan.className = 'log-prefix';
+			prefixSpan.textContent = shortPrefix;
+			fragment.appendChild( prefixSpan );
+			content = text.substring( fullPrefix.length );
+
+		}
+
+		const parts = content.split( /(".*?"|'.*?'|`.*?`)/g ).map( p => p.trim() ).filter( Boolean );
+
+		parts.forEach( ( part, index ) => {
+
+			if ( /^("|'|`)/.test( part ) ) {
+
+				const codeSpan = document.createElement( 'span' );
+				codeSpan.className = 'log-code';
+				codeSpan.textContent = part.slice( 1, - 1 );
+				fragment.appendChild( codeSpan );
+
+			} else {
+
+				if ( index > 0 ) part = ' ' + part; // add space before parts except the first
+				if ( index < parts.length - 1 ) part += ' '; // add space between parts
+
+				fragment.appendChild( document.createTextNode( part ) );
+
+			}
+
+		} );
+
+		return fragment;
+
+	}
+
+	addMessage( type, text ) {
+
+		const msg = document.createElement( 'div' );
+		msg.className = `log-message ${type}`;
+		msg.dataset.type = type;
+		msg.dataset.rawText = text;
+
+		msg.appendChild( this._formatMessage( type, text ) );
+
+		const showByType = this.filters[ type ];
+		const showByText = text.toLowerCase().includes( this.filterText );
+		msg.classList.toggle( 'hidden', ! ( showByType && showByText ) );
+
+		this.logContainer.appendChild( msg );
+		this.logContainer.scrollTop = this.logContainer.scrollHeight;
+		if ( this.logContainer.children.length > 200 ) {
+
+			this.logContainer.removeChild( this.logContainer.firstChild );
+
+		}
+
+	}
+
+}
+
+export { Console };