super-three 0.184.0 → 0.185.0

package/examples/jsm/inspector/RendererInspector.js

@@ -1,5 +1,6 @@
 
-import { InspectorBase, TimestampQuery, warnOnce } from 'three/webgpu';
+import { InspectorBase, TimestampQuery, warnOnce, RendererUtils, MeshBasicNodeMaterial, AdditiveBlending, NoToneMapping, LinearSRGBColorSpace } from 'three/webgpu';
+import { vec3 } from 'three/tsl';
 
 class ObjectStats {
 
@@ -84,6 +85,9 @@ export class RendererInspector extends InspectorBase {
 		this._lastFinishTime = 0;
 		this._resolveTimestampPromise = null;
 
+		this.overdraw = false;
+		this._overdrawMaterial = null;
+
 		this.isRendererInspector = true;
 
 	}
@@ -122,6 +126,66 @@ export class RendererInspector extends InspectorBase {
 
 		this._lastFinishTime = now;
 
+		if ( this.overdraw === true ) {
+
+			this._renderOverdraw( frame );
+
+		}
+
+	}
+
+	_renderOverdraw( frame ) {
+
+		const renderer = this.getRenderer();
+
+		if ( renderer === null ) return;
+
+		// first scene render of the frame; nested shadow / RTT passes come after
+
+		let primary = null;
+
+		for ( const render of frame.renders ) {
+
+			if ( render.scene.isScene === true ) {
+
+				primary = render;
+				break;
+
+			}
+
+		}
+
+		if ( primary === null ) return;
+
+		if ( this._overdrawMaterial === null ) {
+
+			// additive constant, so each pixel sums the depth-passing fragments it shaded
+
+			this._overdrawMaterial = new MeshBasicNodeMaterial( {
+				colorNode: vec3( 0.25 ),
+				blending: AdditiveBlending,
+				depthTest: true,
+				depthWrite: true,
+				toneMapped: false
+			} );
+
+		}
+
+		const { scene, camera } = primary;
+
+		// raw render against black with no tone mapping, so the count stays linear
+
+		const state = RendererUtils.resetRendererAndSceneState( renderer, scene );
+
+		renderer.toneMapping = NoToneMapping;
+		renderer.outputColorSpace = LinearSRGBColorSpace;
+
+		scene.overrideMaterial = this._overdrawMaterial;
+
+		renderer.render( scene, camera );
+
+		RendererUtils.restoreRendererAndSceneState( renderer, scene, state );
+
 	}
 
 	_getFPS() {
@@ -191,88 +255,140 @@ export class RendererInspector extends InspectorBase {
 
 				const renderer = this.getRenderer();
 
-				await renderer.resolveTimestampsAsync( TimestampQuery.COMPUTE );
-				await renderer.resolveTimestampsAsync( TimestampQuery.RENDER );
+				if ( renderer.backend.hasTimestamp ) {
 
-				const computeFrames = renderer.backend.getTimestampFrames( TimestampQuery.COMPUTE );
-				const renderFrames = renderer.backend.getTimestampFrames( TimestampQuery.RENDER );
+					await renderer.resolveTimestampsAsync( TimestampQuery.COMPUTE );
+					await renderer.resolveTimestampsAsync( TimestampQuery.RENDER );
 
-				const frameIds = [ ...new Set( [ ...computeFrames, ...renderFrames ] ) ];
+					const computeFrames = renderer.backend.getTimestampFrames( TimestampQuery.COMPUTE );
+					const renderFrames = renderer.backend.getTimestampFrames( TimestampQuery.RENDER );
 
-				for ( const frameId of frameIds ) {
+					const frameIds = [ ...new Set( [ ...computeFrames, ...renderFrames ] ) ];
 
-					const frame = this.getFrameById( frameId );
+					for ( const frameId of frameIds ) {
 
-					if ( frame !== null ) {
+						const frame = this.getFrameById( frameId );
 
-						// resolve compute timestamps
+						if ( frame !== null ) {
 
-						if ( frame.resolvedCompute === false ) {
+							// resolve compute timestamps
+
+							if ( frame.resolvedCompute === false ) {
 
-							if ( frame.computes.length > 0 ) {
+								if ( frame.computes.length > 0 ) {
 
-								if ( computeFrames.includes( frameId ) ) {
+									if ( computeFrames.includes( frameId ) ) {
 
-									for ( const stats of frame.computes ) {
+										for ( const stats of frame.computes ) {
 
-										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+											if ( renderer.backend.hasTimestampQuery( stats.uid ) ) {
 
-											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+												stats.gpu = renderer.backend.getTimestamp( stats.uid );
 
-										} else {
+											} else {
 
-											stats.gpu = 0;
-											stats.gpuNotAvailable = true;
+												stats.gpu = 0;
+												stats.gpuNotAvailable = true;
+
+											}
 
 										}
 
+										frame.resolvedCompute = true;
+
 									}
 
+								} else {
+
 									frame.resolvedCompute = true;
 
 								}
 
-							} else {
-
-								frame.resolvedCompute = true;
-
 							}
 
-						}
+							// resolve render timestamps
 
-						// resolve render timestamps
+							if ( frame.resolvedRender === false ) {
 
-						if ( frame.resolvedRender === false ) {
+								if ( frame.renders.length > 0 ) {
 
-							if ( frame.renders.length > 0 ) {
+									if ( renderFrames.includes( frameId ) ) {
 
-								if ( renderFrames.includes( frameId ) ) {
+										for ( const stats of frame.renders ) {
 
-									for ( const stats of frame.renders ) {
+											if ( renderer.backend.hasTimestampQuery( stats.uid ) ) {
 
-										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+												stats.gpu = renderer.backend.getTimestamp( stats.uid );
 
-											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+											} else {
 
-										} else {
+												stats.gpu = 0;
+												stats.gpuNotAvailable = true;
 
-											stats.gpu = 0;
-											stats.gpuNotAvailable = true;
+											}
 
 										}
 
+										frame.resolvedRender = true;
+
 									}
 
+								} else {
+
 									frame.resolvedRender = true;
 
 								}
 
-							} else {
+							}
+
+							if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {
+
+								this.resolveFrame( frame );
+
+							}
+
+						}
+
+					}
+
+				} else {
+
+					for ( const frame of this.frames ) {
+
+						if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {
+
+							continue;
+
+						}
+
+						const nextFrame = this.getFrameById( frame.frameId + 1 );
 
-								frame.resolvedRender = true;
+						if ( nextFrame === null ) continue;
+
+						if ( frame.resolvedCompute === false ) {
+
+							for ( const stats of frame.computes ) {
+
+								stats.gpu = 0;
+								stats.gpuNotAvailable = true;
 
 							}
 
+							frame.resolvedCompute = true;
+
+						}
+
+						if ( frame.resolvedRender === false ) {
+
+							for ( const stats of frame.renders ) {
+
+								stats.gpu = 0;
+								stats.gpuNotAvailable = true;
+
+							}
+
+							frame.resolvedRender = true;
+
 						}
 
 						if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {

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

@@ -306,7 +306,7 @@ class TSLGraphEditor extends Extension {
 
 				if ( ! this._pending.has( requestId ) ) return;
 				this._pending.delete( requestId );
-				reject( new Error( `Timeout for ${type}` ) );
+				reject( new Error( `THREE.TSLGraphEditor: Timeout for ${type}` ) );
 
 			}, 5000 );
 

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

@@ -236,7 +236,7 @@ export class TSLGraphLoader extends FileLoader {
 
 		if ( ! json.codes || ! json.graphs ) {
 
-			throw new Error( 'TSLGraph: Invalid import file structure.' );
+			throw new Error( 'TSLGraphLoader: Invalid import file structure.' );
 
 		}
 

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

@@ -9,18 +9,38 @@ class Console extends Tab {
 		this.filters = { info: true, warn: true, error: true };
 		this.filterText = '';
 
+		this.unreadErrors = 0;
+		this.unreadWarns = 0;
+
+		this.tabBadgeContainer = document.createElement( 'span' );
+		this.tabBadgeContainer.className = 'tab-badge-container';
+
+		this.tabErrorBadge = document.createElement( 'span' );
+		this.tabErrorBadge.className = 'tab-badge error';
+		this.tabErrorBadge.style.display = 'none';
+
+		this.tabWarnBadge = document.createElement( 'span' );
+		this.tabWarnBadge.className = 'tab-badge warn';
+		this.tabWarnBadge.style.display = 'none';
+
+		this.tabBadgeContainer.appendChild( this.tabErrorBadge );
+		this.tabBadgeContainer.appendChild( this.tabWarnBadge );
+		this.button.appendChild( this.tabBadgeContainer );
+
 		this.buildHeader();
 
 		this.logContainer = document.createElement( 'div' );
-		this.logContainer.id = 'console-log';
+		this.logContainer.classList.add( 'console-log' );
 		this.content.appendChild( this.logContainer );
 
+		this.lastMessage = null;
+
 	}
 
 	buildHeader() {
 
 		const header = document.createElement( 'div' );
-		header.className = 'console-header';
+		header.className = 'toolbar';
 
 		const filterInput = document.createElement( 'input' );
 		filterInput.type = 'text';
@@ -56,9 +76,13 @@ class Console extends Tab {
 			const checkmark = document.createElement( 'span' );
 			checkmark.className = 'checkmark';
 
+			const labelText = document.createElement( 'span' );
+			labelText.className = 'checkbox-text';
+			labelText.textContent = type.charAt( 0 ).toUpperCase() + type.slice( 1 );
+
 			label.appendChild( checkbox );
 			label.appendChild( checkmark );
-			label.append( type.charAt( 0 ).toUpperCase() + type.slice( 1 ) );
+			label.appendChild( labelText );
 			buttonsGroup.appendChild( label );
 
 		} );
@@ -172,10 +196,6 @@ class Console extends Tab {
 			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;
@@ -210,24 +230,186 @@ class Console extends Tab {
 
 	}
 
+	setActive( isActive ) {
+
+		super.setActive( isActive );
+
+		if ( isActive ) {
+
+			this.clearUnread();
+
+		}
+
+	}
+
+	clearUnread() {
+
+		this.unreadErrors = 0;
+		this.unreadWarns = 0;
+		this.updateBadges();
+
+	}
+
+	updateBadges() {
+
+		if ( ! this.profiler ) return;
+
+		const errorBadge = this.profiler.toggleButton.querySelector( '.console-badge.error' );
+		const warnBadge = this.profiler.toggleButton.querySelector( '.console-badge.warn' );
+
+		if ( errorBadge ) {
+
+			if ( this.unreadErrors > 0 ) {
+
+				errorBadge.textContent = this.unreadErrors > 99 ? '+99' : this.unreadErrors;
+				errorBadge.style.display = '';
+
+			} else {
+
+				errorBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( warnBadge ) {
+
+			if ( this.unreadWarns > 0 ) {
+
+				warnBadge.textContent = this.unreadWarns > 99 ? '+99' : this.unreadWarns;
+				warnBadge.style.display = '';
+
+			} else {
+
+				warnBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( this.tabErrorBadge ) {
+
+			if ( this.unreadErrors > 0 ) {
+
+				this.tabErrorBadge.textContent = this.unreadErrors > 99 ? '+99' : this.unreadErrors;
+				this.tabErrorBadge.style.display = '';
+
+			} else {
+
+				this.tabErrorBadge.style.display = 'none';
+
+			}
+
+		}
+
+		if ( this.tabWarnBadge ) {
+
+			if ( this.unreadWarns > 0 ) {
+
+				this.tabWarnBadge.textContent = this.unreadWarns > 99 ? '+99' : this.unreadWarns;
+				this.tabWarnBadge.style.display = '';
+
+			} else {
+
+				this.tabWarnBadge.style.display = 'none';
+
+			}
+
+		}
+
+	}
+
 	addMessage( type, text ) {
 
-		const msg = document.createElement( 'div' );
-		msg.className = `log-message ${type}`;
-		msg.dataset.type = type;
-		msg.dataset.rawText = text;
+		if ( this.lastMessage && this.lastMessage.type === type && this.lastMessage.text === text ) {
+
+			this.lastMessage.count ++;
+			this.lastMessage.countBadge.textContent = this.lastMessage.count;
+			this.lastMessage.countBadge.style.display = '';
+
+		} else {
+
+			const msg = document.createElement( 'div' );
+			msg.className = `log-message ${type}`;
+			msg.dataset.type = type;
+			msg.dataset.rawText = text;
+
+			const countBadge = document.createElement( 'span' );
+			countBadge.className = 'log-count-badge';
+			countBadge.style.display = 'none';
+			msg.appendChild( countBadge );
 
-		msg.appendChild( this._formatMessage( type, text ) );
+			let icon = null;
+			const prefixMatch = text.match( /^([\w\.]+:\s)/ );
+			if ( prefixMatch ) {
+
+				const fullPrefix = prefixMatch[ 0 ];
+				const parts = fullPrefix.slice( 0, - 2 ).split( '.' );
+				const shortPrefix = ( parts.length > 1 ? parts[ parts.length - 1 ] : parts[ 0 ] ) + ':';
+				icon = this._getIcon( type, shortPrefix.split( ':' )[ 0 ].toLowerCase() );
+
+			}
 
-		const showByType = this.filters[ type ];
-		const showByText = text.toLowerCase().includes( this.filterText );
-		msg.classList.toggle( 'hidden', ! ( showByType && showByText ) );
+			if ( icon ) {
+
+				const iconSpan = document.createElement( 'span' );
+				iconSpan.className = 'log-icon';
+				iconSpan.textContent = icon;
+				msg.appendChild( iconSpan );
+
+			}
+
+			const body = document.createElement( 'span' );
+			body.className = 'log-body';
+			body.appendChild( this._formatMessage( type, text ) );
+			msg.appendChild( body );
+
+			const showByType = this.filters[ type ];
+			const showByText = text.toLowerCase().includes( this.filterText );
+			msg.classList.toggle( 'hidden', ! ( showByType && showByText ) );
+
+			this.logContainer.appendChild( msg );
+
+			if ( this.logContainer.children.length > 200 ) {
+
+				const firstChild = this.logContainer.firstChild;
+				this.logContainer.removeChild( firstChild );
+				if ( this.lastMessage && this.lastMessage.element === firstChild ) {
+
+					this.lastMessage = null;
+
+				}
+
+			}
+
+			this.lastMessage = {
+				type,
+				text,
+				count: 1,
+				element: msg,
+				countBadge
+			};
+
+		}
 
-		this.logContainer.appendChild( msg );
 		this.logContainer.scrollTop = this.logContainer.scrollHeight;
-		if ( this.logContainer.children.length > 200 ) {
 
-			this.logContainer.removeChild( this.logContainer.firstChild );
+		// Update unread counts if the console is not active/visible
+		const isUnread = ! this.isActive;
+
+		if ( isUnread ) {
+
+			if ( type === 'error' ) {
+
+				this.unreadErrors ++;
+				this.updateBadges();
+
+			} else if ( type === 'warn' ) {
+
+				this.unreadWarns ++;
+				this.updateBadges();
+
+			}
 
 		}
 

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

@@ -70,6 +70,9 @@ class Memory extends Tab {
 		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;
 
 	}
@@ -100,6 +103,7 @@ class Memory extends Tab {
 
 		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() );
@@ -118,9 +122,13 @@ class Memory extends Tab {
 
 		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 ) );
+
 	}
 
 }

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

@@ -1,7 +1,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 { createValueSpan, info } from '../ui/utils.js';
 import { ValueString, ValueNumber, ValueSlider, ValueSelect, ValueCheckbox, ValueColor, ValueButton } from '../ui/Values.js';
 
 class ParametersGroup {
@@ -9,9 +9,9 @@ class ParametersGroup {
 	constructor( parameters, name ) {
 
 		this.parameters = parameters;
-		this.name = name;
 
 		this.paramList = new Item( name );
+		this.paramList.setCollapsible( true );
 
 		this.objects = [];
 
@@ -25,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 ];
@@ -66,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 = () => {
@@ -108,6 +153,9 @@ class ParametersGroup {
 
 		this.objects.push( { object: object, key: property, editor: editor, subItem: subItem } );
 
+		editor.addEventListener( 'show', () => subItem.show() );
+		editor.addEventListener( 'hide', () => subItem.hide() );
+
 	}
 
 	addString( object, property ) {
@@ -328,12 +376,24 @@ 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;