Inspector: WebGL2 backend version (#31982)

* inspector webgl

* Update clean-page.js

* update

* update

* Update webgpu_instance_mesh.jpg

* puppeteer: add exception `webgpu_volume_lighting`, `webgpu_volume_lighting_rectarea`

examples/jsm/inspector/Inspector.js

@@ -27,6 +27,7 @@ class Inspector extends RendererInspector {
 		profiler.addTab( parameters );
 
 		const viewer = new Viewer();
+		viewer.hide();
 		profiler.addTab( viewer );
 
 		const performance = new Performance();
@@ -79,7 +80,7 @@ class Inspector extends RendererInspector {
 
 		if ( renderer.info.frame > 1 && animationLoop !== null ) {
 
-			this.resolveConsoleOnce( 'info', 'TIP: "computeAsync()" was called while a "setAnimationLoop()" is active. This is probably not necessary, use "compute()" instead.' );
+			this.resolveConsoleOnce( 'log', 'TIP: "computeAsync()" was called while a "setAnimationLoop()" is active. This is probably not necessary, use "compute()" instead.' );
 
 		}
 
@@ -91,7 +92,7 @@ class Inspector extends RendererInspector {
 
 		if ( this.once[ key ] !== true ) {
 
-			this.resolveConsole( 'log', message );
+			this.resolveConsole( type, message );
 			this.once[ key ] = true;
 
 		}
@@ -303,8 +304,26 @@ class Inspector extends RendererInspector {
 	resolveViewer() {
 
 		const nodes = this.currentNodes;
-
 		const renderer = this.getRenderer();
+
+		if ( nodes.length === 0 ) return;
+
+		if ( ! renderer.backend.isWebGPUBackend ) {
+
+			this.resolveConsoleOnce( 'warn', 'Inspector: Viewer is only available with WebGPU.' );
+
+			return;
+
+		}
+
+		//
+
+		if ( ! this.viewer.isVisible ) {
+
+			this.viewer.show();
+
+		}
+
 		const canvasDataList = nodes.map( node => this.getCanvasDataByNode( node ) );
 
 		this.viewer.update( renderer, canvasDataList );

examples/jsm/inspector/RendererInspector.js

@@ -186,7 +186,16 @@ export class RendererInspector extends InspectorBase {
 
 									for ( const stats of frame.computes ) {
 
-										stats.gpu = renderer.backend.getTimestamp( stats.uid );
+										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+
+											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+
+										} else {
+
+											stats.gpu = 0;
+											stats.gpuNotAvailable = true;
+
+										}
 
 									}
 
@@ -212,7 +221,16 @@ export class RendererInspector extends InspectorBase {
 
 									for ( const stats of frame.renders ) {
 
-										stats.gpu = renderer.backend.getTimestamp( stats.uid );
+										if ( renderer.backend.hasTimestamp( stats.uid ) ) {
+
+											stats.gpu = renderer.backend.getTimestamp( stats.uid );
+
+										} else {
+
+											stats.gpu = 0;
+											stats.gpuNotAvailable = true;
+
+										}
 
 									}
 
@@ -254,7 +272,7 @@ export class RendererInspector extends InspectorBase {
 
 		const renderer = this.getRenderer();
 
-		return renderer !== null && renderer.backend.isWebGPUBackend;
+		return renderer !== null;
 
 	}
 

examples/jsm/inspector/tabs/Performance.js

@@ -131,7 +131,7 @@ class Performance extends Tab {
 
 		setText( item.data[ 0 ], item.userData.name );
 		setText( item.data[ 1 ], data.cpu.toFixed( 2 ) );
-		setText( item.data[ 2 ], data.gpu.toFixed( 2 ) );
+		setText( item.data[ 2 ], stats.gpuNotAvailable === true ? '-' : data.gpu.toFixed( 2 ) );
 		setText( item.data[ 3 ], data.total.toFixed( 2 ) );
 
 		//

src/nodes/core/InspectorNode.js

@@ -1,6 +1,8 @@
 import Node from './Node.js';
+import InspectorBase from '../../renderers/common/InspectorBase.js';
 import { addMethodChaining, nodeObject } from '../tsl/TSLCore.js';
 import { NodeUpdateType } from './constants.js';
+import { warnOnce } from '../../utils.js';
 
 /**
  * InspectorNode is a wrapper node that allows inspection of node values during rendering.
@@ -92,6 +94,12 @@ class InspectorNode extends Node {
 
 		}
 
+		if ( builder.renderer.backend.isWebGPUBackend !== true && builder.renderer.inspector.constructor !== InspectorBase ) {
+
+			warnOnce( 'TSL: ".toInspector()" is only available with WebGPU.' );
+
+		}
+
 		return node;
 
 	}

src/renderers/common/Backend.js

@@ -473,6 +473,12 @@ class Backend {
 
 	}
 
+	/**
+	 * Returns all timestamp frames for the given type.
+	 *
+	 * @param {string} type - The type of the time stamp.
+	 * @return {Array<number>} The timestamp frames.
+	 */
 	getTimestampFrames( type ) {
 
 		const queryPool = this.timestampQueryPool[ type ];
@@ -481,15 +487,49 @@ class Backend {
 
 	}
 
-	getTimestamp( uid ) {
+	/**
+	 * Returns the query pool for the given uid.
+	 *
+	 * @param {string} uid - The unique identifier.
+	 * @return {TimestampQueryPool} The query pool.
+	 */
+	_getQueryPool( uid ) {
 
 		const type = uid.startsWith( 'c:' ) ? TimestampQuery.COMPUTE : TimestampQuery.RENDER;
 		const queryPool = this.timestampQueryPool[ type ];
 
+		return queryPool;
+
+	}
+
+	/**
+	 * Returns the timestamp for the given uid.
+	 *
+	 * @param {string} uid - The unique identifier.
+	 * @return {number} The timestamp.
+	 */
+	getTimestamp( uid ) {
+
+		const queryPool = this._getQueryPool( uid );
+
 		return queryPool.getTimestamp( uid );
 
 	}
 
+	/**
+	 * 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 ) {
+
+		const queryPool = this._getQueryPool( uid );
+
+		return queryPool.hasTimestamp( uid );
+
+	}
+
 	/**
 	 * Returns `true` if the given 3D object is fully occluded by other
 	 * 3D objects in the scene. Backends must implement this method by using

src/renderers/common/TimestampQueryPool.js

@@ -118,6 +118,18 @@ class TimestampQueryPool {
 
 	}
 
+	/**
+	 * Returns whether a timestamp is available for a given render context.
+	 *
+	 * @param {string} uid - A unique identifier for the render context.
+	 * @return {boolean} True if a timestamp is available, false otherwise.
+	 */
+	hasTimestamp( uid ) {
+
+		return this.timestamps.has( uid );
+
+	}
+
 	/**
 	 * Allocate queries for a specific uid.
 	 *

test/e2e/clean-page.js

@@ -9,7 +9,7 @@
 
 	const style = document.createElement( 'style' );
 	style.type = 'text/css';
-	style.innerHTML = '#info, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }';
+	style.innerHTML = '#info, #profiler-shell, button, input, body > div.lil-gui, body > div.lbl { display: none !important; }';
 
 	document.querySelector( 'head' ).appendChild( style );
 

test/e2e/puppeteer.js

@@ -185,6 +185,8 @@ const exceptionList = [
 	'webgpu_postprocessing_ssgi',
 	'webgpu_xr_native_layers',
 	'webgpu_volume_caustics',
+	'webgpu_volume_lighting',
+	'webgpu_volume_lighting_rectarea',
 
 	// WebGPU idleTime and parseTime too low
 	'webgpu_compute_cloth',