@unikia/upe-renderer 0.186.110 → 0.187.11

package/examples/jsm/inspector/Inspector.js

@@ -9,6 +9,7 @@ import { Settings } from './tabs/Settings.js';
 import { Viewer } from './tabs/Viewer.js';
 import { Timeline } from './tabs/Timeline.js';
 import { setText } from './ui/utils.js';
+import { getItem, setItem } from './Storage.js';
 
 import { setConsoleFunction, getConsoleFunction, REVISION } from 'three/webgpu';
 
@@ -467,9 +468,9 @@ class Inspector extends RendererInspector {
 
 		data.cpu = this.getAverageDeltaTime( data, 'cpu' );
 		data.gpu = this.getAverageDeltaTime( data, 'gpu' );
-		data.total = data.cpu + data.gpu;
 
-		// children
+		// children: the CPU time of a render or compute call includes the calls nested in it, the GPU time of each
+		// pass is measured separately
 
 		for ( const child of stats.children ) {
 
@@ -477,12 +478,12 @@ class Inspector extends RendererInspector {
 
 			const childData = this.getStatsData( child.cid );
 
-			data.cpu += childData.cpu;
 			data.gpu += childData.gpu;
-			data.total += childData.total;
 
 		}
 
+		data.total = data.cpu + data.gpu;
+
 	}
 
 	getNodes() {
@@ -566,9 +567,8 @@ class Inspector extends RendererInspector {
 
 		}
 
-		// improve stats using previous frame
+		// the time since the last frame which rendered, see RendererInspector.finish()
 
-		frame.deltaTime = frame.startTime - previousFrame.startTime;
 		frame.miscellaneous = frame.deltaTime - frame.total;
 
 		if ( frame.miscellaneous < 0 ) {
@@ -641,44 +641,4 @@ class Inspector extends RendererInspector {
 
 }
 
-function getItem( id ) {
-
-	const data = JSON.parse( localStorage.getItem( 'threejs-inspector' ) || '{}' );
-
-	if ( data.version !== REVISION ||
-		 data.settings && ( data.settings.storage === 'url' && data.settings.url !== location.href ) ) {
-
-		localStorage.removeItem( 'threejs-inspector' );
-
-		return {};
-
-	}
-
-	return data[ id ] || {};
-
-}
-
-function setItem( id, state ) {
-
-	const data = JSON.parse( localStorage.getItem( 'threejs-inspector' ) || '{}' );
-
-	if ( state === null ) {
-
-		delete data[ id ];
-
-	} else {
-
-		data[ id ] = state;
-
-	}
-
-	data.settings = data.settings || {};
-	data.settings.url = data.settings.url || location.href;
-	data.settings.storage = data.settings.storage || 'url';
-	data.version = REVISION;
-
-	localStorage.setItem( 'threejs-inspector', JSON.stringify( data ) );
-
-}
-
 export { Inspector, getItem, setItem };

package/examples/jsm/inspector/RendererInspector.js

@@ -69,6 +69,14 @@ class ComputeStats extends ObjectStats {
 
 }
 
+// returns true if the frame of the animation loop rendered or computed
+
+function isRenderedFrame( frame ) {
+
+	return frame.renders.length > 0 || frame.computes.length > 0;
+
+}
+
 export class RendererInspector extends InspectorBase {
 
 	constructor() {
@@ -87,11 +95,13 @@ export class RendererInspector extends InspectorBase {
 		this.maxFrames = 512;
 
 		this._lastFinishTime = 0;
+		this._lastRenderedFinishTime = 0;
 		this._resolveTimestampPromise = null;
 		this._rAFId = null;
 
 		this.overdraw = false;
 		this._overdrawMaterial = null;
+		this._renderingOverdraw = false;
 
 		this.isRendererInspector = true;
 
@@ -123,7 +133,22 @@ export class RendererInspector extends InspectorBase {
 
 		const frame = this.currentFrame;
 		frame.finishTime = now;
-		frame.deltaTime = now - ( this._lastFinishTime > 0 ? this._lastFinishTime : now );
+
+		// frames of the animation loop which didn't render or compute, like frames skipped by the application
+		// while the GPU is busy, are not frames of the application: the time is measured since the last frame
+		// which rendered
+
+		if ( isRenderedFrame( frame ) ) {
+
+			frame.deltaTime = now - ( this._lastRenderedFinishTime > 0 ? this._lastRenderedFinishTime : now );
+
+			this._lastRenderedFinishTime = now;
+
+		} else {
+
+			frame.deltaTime = now - ( this._lastFinishTime > 0 ? this._lastFinishTime : now );
+
+		}
 
 		this.addFrame( frame );
 
@@ -139,12 +164,6 @@ export class RendererInspector extends InspectorBase {
 
 		this._lastFinishTime = now;
 
-		if ( this.overdraw === true ) {
-
-			this._renderOverdraw();
-
-		}
-
 	}
 
 	_renderOverdraw() {
@@ -179,14 +198,20 @@ export class RendererInspector extends InspectorBase {
 
 		scene.overrideMaterial = this._overdrawMaterial;
 
+		this._renderingOverdraw = true;
+
 		renderer.render( scene, camera );
 
+		this._renderingOverdraw = false;
+
 		RendererUtils.restoreRendererAndSceneState( renderer, scene, state );
 
 	}
 
 	_getFPS() {
 
+		// only the frames which rendered or computed are counted, within the last second
+
 		let frameSum = 0;
 		let timeSum = 0;
 
@@ -194,6 +219,8 @@ export class RendererInspector extends InspectorBase {
 
 			const frame = this.frames[ i ];
 
+			if ( isRenderedFrame( frame ) === false ) continue;
+
 			frameSum ++;
 			timeSum += frame.deltaTime;
 
@@ -201,7 +228,7 @@ export class RendererInspector extends InspectorBase {
 
 		}
 
-		return ( frameSum * 1000 ) / timeSum;
+		return timeSum > 0 ? ( frameSum * 1000 ) / timeSum : 0;
 
 	}
 
@@ -562,6 +589,14 @@ export class RendererInspector extends InspectorBase {
 		this.currentContext = currentRender.parent;
 		this.currentRender = currentRender.parent && currentRender.parent.isRenderStats ? currentRender.parent : null;
 
+		// draw over each top-level render to the canvas, the frame finishes only at the start of the next one
+
+		if ( this.overdraw === true && this._renderingOverdraw === false && currentRender.parent === frame && this.getRenderer().getRenderTarget() === null ) {
+
+			this._renderOverdraw();
+
+		}
+
 	}
 
 	dispose() {

package/examples/jsm/inspector/Storage.js

@@ -0,0 +1,49 @@
+import { REVISION } from 'three/webgpu';
+
+const STORAGE_KEY = 'threejs-inspector';
+
+function getItem( id ) {
+
+	if ( typeof localStorage === 'undefined' ) return {};
+
+	const data = JSON.parse( localStorage.getItem( STORAGE_KEY ) || '{}' );
+
+	if ( data.version !== REVISION ||
+		 data.settings && ( data.settings.storage === 'url' && data.settings.url !== location.href ) ) {
+
+		localStorage.removeItem( STORAGE_KEY );
+
+		return {};
+
+	}
+
+	return data[ id ] || {};
+
+}
+
+function setItem( id, state ) {
+
+	if ( typeof localStorage === 'undefined' ) return;
+
+	const data = JSON.parse( localStorage.getItem( STORAGE_KEY ) || '{}' );
+
+	if ( state === null ) {
+
+		delete data[ id ];
+
+	} else {
+
+		data[ id ] = state;
+
+	}
+
+	data.settings = data.settings || {};
+	data.settings.url = data.settings.url || location.href;
+	data.settings.storage = data.settings.storage || 'url';
+	data.version = REVISION;
+
+	localStorage.setItem( STORAGE_KEY, JSON.stringify( data ) );
+
+}
+
+export { getItem, setItem };

package/examples/jsm/inspector/extensions/color-grading/ColorGrading.js

@@ -521,13 +521,6 @@ export class ColorGrading extends Extension {
 				this.selectedToneMapping = comp.params.toneMapping;
 				if ( this.sceneGradingEnabled ) {
 
-					const renderer = this.inspector ? this.inspector.getRenderer() : null;
-					if ( renderer ) {
-
-						renderer.toneMappingExposure = comp.params.exposure;
-
-					}
-
 					this._applyLiveGrading();
 
 				}
@@ -1616,7 +1609,7 @@ export class ColorGrading extends Extension {
 
 	generate3DLUTData( size = this.lutSize, buffer = null ) {
 
-		if ( buffer === null ) {
+		if ( buffer === null || buffer.length !== size * size * size * 4 ) {
 
 			buffer = new Float32Array( size * size * size * 4 );
 
@@ -1656,9 +1649,10 @@ export class ColorGrading extends Extension {
 
 					}
 
-					buffer[ idx ++ ] = _pixel[ 0 ];
-					buffer[ idx ++ ] = _pixel[ 1 ];
-					buffer[ idx ++ ] = _pixel[ 2 ];
+					// Share the same output range with the 8-bit PNG export.
+					buffer[ idx ++ ] = Math.max( 0, Math.min( 1, _pixel[ 0 ] ) );
+					buffer[ idx ++ ] = Math.max( 0, Math.min( 1, _pixel[ 1 ] ) );
+					buffer[ idx ++ ] = Math.max( 0, Math.min( 1, _pixel[ 2 ] ) );
 					buffer[ idx ++ ] = 1.0;
 
 				}
@@ -1785,6 +1779,7 @@ export class ColorGrading extends Extension {
 			modulesData[ id ] = {
 				type: modType,
 				mode: mode,
+				enabled: comp.enabled,
 				params: JSON.parse( JSON.stringify( comp.params ) )
 			};
 
@@ -1926,6 +1921,7 @@ export class ColorGrading extends Extension {
 
 		if ( typeof json.lutSize === 'number' ) {
 
+			this._lutSizeChanged = this._lutSizeChanged || this.lutSize !== json.lutSize;
 			this.lutSize = json.lutSize;
 			if ( this.lutSizeSelect ) {
 
@@ -1956,6 +1952,8 @@ export class ColorGrading extends Extension {
 
 		if ( json.modules && typeof json.modules === 'object' ) {
 
+			const pipelineOrder = [ ...this.pipelineOrder ];
+
 			this.modulesMap.forEach( ( comp, id ) => {
 
 				if ( id !== 'renderer' && id !== 'output' && ! this.pipelineOrder.includes( id ) ) {
@@ -2008,8 +2006,14 @@ export class ColorGrading extends Extension {
 
 				}
 
+				const comp = this.modulesMap.get( id );
+				if ( comp ) comp.enabled = mData.enabled !== false;
+
 			} );
 
+			// Creating missing cards must not append duplicate or inactive steps.
+			this.pipelineOrder = pipelineOrder;
+
 		} else if ( params ) {
 
 			const isWBActive = ( params.temperature !== undefined && params.temperature !== 0 ) || ( params.tint !== undefined && params.tint !== 0 );
@@ -2297,8 +2301,6 @@ export class ColorGrading extends Extension {
 
 	init( inspector ) {
 
-		super.init( inspector );
-
 		LUT3DStyle.init( inspector.nonce );
 
 		const renderer = inspector.getRenderer();
@@ -2313,10 +2315,14 @@ export class ColorGrading extends Extension {
 			rendererComp.defaultExposure = defaultExp;
 			rendererComp.params.toneMapping = defaultTM;
 			rendererComp.params.exposure = defaultExp;
+			this.selectedToneMapping = defaultTM;
 			rendererComp.updateUI();
 
 		}
 
+		// Restore saved settings after initializing the renderer defaults.
+		super.init( inspector );
+
 		this.onOrientationChange();
 		this.onLayoutChange();
 
@@ -2403,6 +2409,8 @@ export class ColorGrading extends Extension {
 
 	_applyLiveGrading() {
 
+		this._lutSizeChanged = this._lutSizeChanged || ( this.lutTexture !== null && this.lutTexture.image.width !== this.lutSize );
+
 		if ( ! this.lutTexture || this._lutSizeChanged || this._lutNeedsUpdate ) {
 
 			const buffer = ( this.lutTexture && this.lutTexture.image && ! this._lutSizeChanged ) ? this.lutTexture.image.data : null;
@@ -2485,24 +2493,15 @@ export class ColorGrading extends Extension {
 			this._originalPipelineSettings = {
 				outputNode: renderPipeline.outputNode,
 				outputColorTransform: renderPipeline.outputColorTransform,
-				rendererToneMapping: renderer.toneMapping
+				rendererToneMapping: renderer.toneMapping,
+				rendererExposure: renderer.toneMappingExposure
 			};
 
-			if ( renderer.toneMapping !== undefined ) {
-
-				this.selectedToneMapping = renderer.toneMapping;
-				const rendererComp = this.modulesMap.get( 'renderer' );
-				if ( rendererComp ) {
-
-					rendererComp.fromJSON( { params: { toneMapping: this.selectedToneMapping } } );
-
-				}
-
-			}
-
 		}
 
 		renderer.toneMapping = this.selectedToneMapping;
+		const rendererComp = this.modulesMap.get( 'renderer' );
+		if ( rendererComp ) renderer.toneMappingExposure = rendererComp.params.exposure;
 		renderPipeline.outputColorTransform = false;
 
 		let inputNode = this._originalPipelineSettings.outputNode;
@@ -2515,7 +2514,7 @@ export class ColorGrading extends Extension {
 
 		if ( inputNode ) {
 
-			const outputPass = renderOutput( inputNode, this.selectedToneMapping );
+			const outputPass = this._originalPipelineSettings.outputColorTransform ? renderOutput( inputNode, this.selectedToneMapping ) : inputNode;
 			this.lutPassNode = lut3D( outputPass, texture3D( this.lutTexture ), this.lutSize, 1.0 );
 
 			renderPipeline.outputNode = this.lutPassNode;
@@ -2546,6 +2545,12 @@ export class ColorGrading extends Extension {
 
 			}
 
+			if ( renderer && this._originalPipelineSettings.rendererExposure !== undefined ) {
+
+				renderer.toneMappingExposure = this._originalPipelineSettings.rendererExposure;
+
+			}
+
 			this._originalPipelineSettings = null;
 
 		}

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

@@ -103,8 +103,12 @@ class ParametersGroup {
 
 	_addParameter( object, property, editor, subItem ) {
 
+		subItem.data[ 0 ].title = property;
+
 		editor.name = ( name ) => {
 
+			subItem.data[ 0 ].title = name;
+
 			if ( subItem.data[ 0 ].childNodes.length > 0 && subItem.data[ 0 ].firstChild.nodeType === 3 /* Node.TEXT_NODE */ ) {
 
 				subItem.data[ 0 ].firstChild.textContent = name;
@@ -410,7 +414,7 @@ class Parameters extends Tab {
 
 		const paramList = new List( 'Property', 'Value' );
 		paramList.domElement.classList.add( 'parameters' );
-		paramList.setGridStyle( '.5fr 1fr' );
+		paramList.setGridStyle( 'minmax(0, .5fr) minmax(0, 1fr)' );
 		paramList.domElement.style.minWidth = '300px';
 
 		const scrollWrapper = document.createElement( 'div' );

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

@@ -80,7 +80,7 @@ class Performance extends Tab {
 
 	}
 
-	resolveStats( inspector, stats ) {
+	resolveStats( inspector, stats, budget = Infinity ) {
 
 		const data = inspector.getStatsData( stats.cid );
 
@@ -139,10 +139,15 @@ class Performance extends Tab {
 
 		}
 
+		// A row never shows more GPU time than its parent, see updateText()
+
+		const displayGpu = stats.gpuNotAvailable === true ? 0 : Math.min( data.gpu, budget );
+		const displayTotal = data.cpu + displayGpu;
+
 		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 ) );
+		setText( item.data[ 2 ], stats.gpuNotAvailable === true ? '-' : displayGpu.toFixed( 2 ) );
+		setText( item.data[ 3 ], displayTotal.toFixed( 2 ) );
 
 		//
 
@@ -150,9 +155,11 @@ class Performance extends Tab {
 
 		this.currentItem = item;
 
+		const childBudget = stats.gpuNotAvailable === true ? budget : displayGpu;
+
 		for ( const child of stats.children ) {
 
-			this.resolveStats( inspector, child );
+			this.resolveStats( inspector, child, childBudget );
 
 		}
 
@@ -226,11 +233,19 @@ class Performance extends Tab {
 		const oldFrameItems = new Map( this.frameItems );
 
 		this.frameItems.clear();
+
+		// GPU timestamps can sum to more than the frame time when the GPU overlaps passes, so cap the display at
+		// the frame time, and cap each row at its parent's value
+
+		const hasTimestamp = inspector.getRenderer().backend.hasTimestamp;
+		const gpuBudget = hasTimestamp ? Math.min( frame.gpu, frame.deltaTime ) : 0;
+		const totalDisplay = frame.cpu + gpuBudget;
+
 		this.currentItem = this.frameStats;
 
 		for ( const child of frame.children ) {
 
-			this.resolveStats( inspector, child );
+			this.resolveStats( inspector, child, gpuBudget );
 
 		}
 
@@ -263,8 +278,8 @@ class Performance extends Tab {
 		//
 
 		setText( this.frameStats.data[ 1 ], frame.cpu.toFixed( 2 ) );
-		setText( this.frameStats.data[ 2 ], inspector.getRenderer().backend.hasTimestamp ? frame.gpu.toFixed( 2 ) : '-' );
-		setText( this.frameStats.data[ 3 ], frame.total.toFixed( 2 ) );
+		setText( this.frameStats.data[ 2 ], hasTimestamp ? gpuBudget.toFixed( 2 ) : '-' );
+		setText( this.frameStats.data[ 3 ], totalDisplay.toFixed( 2 ) );
 
 		//
 

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

@@ -1,6 +1,6 @@
 import { Parameters } from './Parameters.js';
 import { WebGPURenderer, WebGLBackend, Node } from 'three/webgpu';
-import { getItem, setItem } from '../Inspector.js';
+import { getItem, setItem } from '../Storage.js';
 
 const _extensions = [
 	{

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

@@ -1,6 +1,6 @@
 import { Tab } from '../ui/Tab.js';
 import { Graph } from '../ui/Graph.js';
-import { getItem, setItem } from '../Inspector.js';
+import { getItem, setItem } from '../Storage.js';
 import { info } from '../ui/utils.js';
 import {
 	ByteType,
@@ -618,6 +618,8 @@ class Timeline extends Tab {
 
 						if ( this.currentFrame ) {
 
+							this.resolveIndirectTriangles( this.currentFrame );
+
 							this.currentFrame.fps = this.renderer.inspector ? this.renderer.inspector.fps : 0;
 
 							if ( ! isFinite( this.currentFrame.fps ) ) {
@@ -657,7 +659,7 @@ class Timeline extends Tab {
 
 						}
 
-						this.currentFrame = { id: frameNumber, calls: [], fps: 0, triangles: 0 };
+						this.currentFrame = { id: frameNumber, calls: [], fps: 0, triangles: 0, indirectDraws: [] };
 						this.frames.push( this.currentFrame );
 
 						if ( this.frames.length > LIMIT ) {
@@ -681,6 +683,16 @@ class Timeline extends Tab {
 
 							this.currentFrame.triangles += details.triangles;
 
+						} else if ( details.indirect === true ) {
+
+							const renderObject = args[ 0 ];
+
+							this.currentFrame.indirectDraws.push( {
+								details,
+								attribute: renderObject.getIndirect(),
+								offset: renderObject.getIndirectOffset()
+							} );
+
 						}
 
 					}
@@ -713,6 +725,8 @@ class Timeline extends Tab {
 
 			if ( this.currentFrame ) {
 
+				this.resolveIndirectTriangles( this.currentFrame );
+
 				this.currentFrame.fps = this.renderer.inspector ? this.renderer.inspector.fps : 0;
 
 			}
@@ -721,6 +735,58 @@ class Timeline extends Tab {
 
 	}
 
+	resolveIndirectTriangles( frame ) {
+
+		const draws = frame.indirectDraws;
+
+		if ( ! draws || draws.length === 0 ) return;
+
+		frame.indirectDraws = null;
+
+		// the draw arguments live on the GPU: [ vertexCount | indexCount, instanceCount, ... ]. the buffer is read
+		// once per frame, after the frame was submitted and before the next one changes it
+
+		const readbacks = new Map();
+
+		for ( const draw of draws ) {
+
+			if ( readbacks.has( draw.attribute ) === false ) {
+
+				readbacks.set( draw.attribute, this.renderer.getArrayBufferAsync( draw.attribute ) );
+
+			}
+
+		}
+
+		Promise.all( draws.map( ( draw ) => readbacks.get( draw.attribute ) ) ).then( ( buffers ) => {
+
+			for ( let i = 0; i < draws.length; i ++ ) {
+
+				const draw = draws[ i ];
+				const data = new Uint32Array( buffers[ i ] );
+				const offsets = Array.isArray( draw.offset ) ? draw.offset : [ draw.offset ];
+
+				let triangles = 0;
+
+				for ( const offset of offsets ) {
+
+					const index = offset / 4;
+
+					triangles += Math.floor( data[ index ] / 3 ) * data[ index + 1 ];
+
+				}
+
+				draw.details.triangles = triangles;
+				frame.triangles += triangles;
+
+			}
+
+			if ( this.isRecording === false && this.frames.includes( frame ) ) this.renderSlider();
+
+		} );
+
+	}
+
 	clear() {
 
 		this.frames = [];
@@ -871,14 +937,24 @@ class Timeline extends Tab {
 
 						if ( renderObject.object.isMesh || renderObject.object.isSprite ) {
 
-							details.triangles = drawParams.vertexCount / 3;
+							// the WebGL backend doesn't support indirect draws, it draws with the parameters of the geometry
+
+							if ( this.renderer.backend.isWebGPUBackend === true && renderObject.getIndirect() !== null ) {
 
-							if ( renderObject.object.count > 1 ) {
+								details.indirect = true;
 
-								details.instance = renderObject.object.count;
+							} else {
 
-								details[ 'triangles per instance' ] = details.triangles;
-								details.triangles *= details.instance;
+								details.triangles = drawParams.vertexCount / 3;
+
+								if ( renderObject.object.count > 1 ) {
+
+									details.instance = renderObject.object.count;
+
+									details[ 'triangles per instance' ] = details.triangles;
+									details.triangles *= details.instance;
+
+								}
 
 							}