Inspector: Fix FPS counter freeze when `WebGLBackend` query is unavailable (#33755)

examples/jsm/inspector/RendererInspector.js

@@ -191,88 +191,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.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.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 {
 
-								frame.resolvedRender = true;
+					for ( const frame of this.frames ) {
+
+						if ( frame.resolvedCompute === true && frame.resolvedRender === true ) {
+
+							continue;
+
+						}
+
+						const nextFrame = this.getFrameById( frame.frameId + 1 );
+
+						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 ) {

examples/jsm/inspector/tabs/Performance.js

@@ -249,7 +249,7 @@ class Performance extends Tab {
 		//
 
 		setText( this.frameStats.data[ 1 ], frame.cpu.toFixed( 2 ) );
-		setText( this.frameStats.data[ 2 ], frame.gpu.toFixed( 2 ) );
+		setText( this.frameStats.data[ 2 ], inspector.getRenderer().backend.hasTimestamp ? frame.gpu.toFixed( 2 ) : '-' );
 		setText( this.frameStats.data[ 3 ], frame.total.toFixed( 2 ) );
 
 		//

src/renderers/common/Backend.js

@@ -541,17 +541,29 @@ class Backend {
 
 	}
 
+	/**
+	 * Whether the backend supports query timestamps or not.
+	 *
+	 * @type {boolean}
+	 * @readonly
+	 */
+	get hasTimestamp() {
+
+		return false;
+
+	}
+
 	/**
 	 * Returns `true` if a timestamp for the given uid is available.
 	 *
 	 * @param {string} uid - The unique identifier.
 	 * @return {boolean} Whether the timestamp is available or not.
 	 */
-	hasTimestamp( uid ) {
+	hasTimestampQuery( uid ) {
 
 		const queryPool = this._getQueryPool( uid );
 
-		return queryPool.hasTimestamp( uid );
+		return queryPool.hasTimestampQuery( uid );
 
 	}
 

src/renderers/common/TimestampQueryPool.js

@@ -126,7 +126,7 @@ class TimestampQueryPool {
 	 * @param {string} uid - A unique identifier for the render context.
 	 * @return {boolean} True if a timestamp is available, false otherwise.
 	 */
-	hasTimestamp( uid ) {
+	hasTimestampQuery( uid ) {
 
 		return this.timestamps.has( uid );
 

src/renderers/webgl-fallback/WebGLBackend.js

@@ -307,6 +307,18 @@ class WebGLBackend extends Backend {
 
 	}
 
+	/**
+	 * Whether the backend supports query timestamps or not.
+	 *
+	 * @type {boolean}
+	 * @readonly
+	 */
+	get hasTimestamp() {
+
+		return this.disjoint !== null;
+
+	}
+
 	/**
 	 * This method performs a readback operation by moving buffer data from
 	 * a storage buffer attribute from the GPU to the CPU. ReadbackBuffer can

src/renderers/webgpu/WebGPUBackend.js

@@ -380,6 +380,18 @@ class WebGPUBackend extends Backend {
 
 	}
 
+	/**
+	 * Whether the backend supports query timestamps or not.
+	 *
+	 * @type {boolean}
+	 * @readonly
+	 */
+	get hasTimestamp() {
+
+		return true;
+
+	}
+
 	/**
 	 * This method performs a readback operation by moving buffer data from
 	 * a storage buffer attribute from the GPU to the CPU. ReadbackBuffer can