Addons: Remove `GPUStatsPanel`. (#29317)

* Addons: Remove GPUStatsPanel.

* Examples: Update wide lines demos to use `stats-gl`.

examples/jsm/Addons.js

@@ -271,7 +271,6 @@ export * from './textures/FlakesTexture.js';
 
 export * as BufferGeometryUtils from './utils/BufferGeometryUtils.js';
 export * as CameraUtils from './utils/CameraUtils.js';
-export * from './utils/GPUStatsPanel.js';
 export * as GeometryCompressionUtils from './utils/GeometryCompressionUtils.js';
 export * as GeometryUtils from './utils/GeometryUtils.js';
 export * from './utils/LDrawUtils.js';

examples/jsm/utils/GPUStatsPanel.js

@@ -1,95 +0,0 @@
-import Stats from '../libs/stats.module.js';
-
-// https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
-export class GPUStatsPanel extends Stats.Panel {
-
-	constructor( context, name = 'GPU MS' ) {
-
-		super( name, '#f90', '#210' );
-
-		const extension = context.getExtension( 'EXT_disjoint_timer_query_webgl2' );
-
-		if ( extension === null ) {
-
-			console.warn( 'GPUStatsPanel: disjoint_time_query extension not available.' );
-
-		}
-
-		this.context = context;
-		this.extension = extension;
-		this.maxTime = 30;
-		this.activeQueries = 0;
-
-		this.startQuery = function () {
-
-			const gl = this.context;
-			const ext = this.extension;
-
-			if ( ext === null ) {
-
-				return;
-
-			}
-
-			// create the query object
-			const query = gl.createQuery();
-			gl.beginQuery( ext.TIME_ELAPSED_EXT, query );
-
-			this.activeQueries ++;
-
-			const checkQuery = () => {
-
-				// check if the query is available and valid
-
-				const available = gl.getQueryParameter( query, gl.QUERY_RESULT_AVAILABLE );
-				const disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT );
-				const ns = gl.getQueryParameter( query, gl.QUERY_RESULT );
-
-				const ms = ns * 1e-6;
-
-				if ( available ) {
-
-					// update the display if it is valid
-					if ( ! disjoint ) {
-
-						this.update( ms, this.maxTime );
-
-					}
-
-					gl.deleteQuery( query );
-
-					this.activeQueries --;
-
-
-				} else if ( gl.isContextLost() === false ) {
-
-					// otherwise try again the next frame
-					requestAnimationFrame( checkQuery );
-
-				}
-
-			};
-
-			requestAnimationFrame( checkQuery );
-
-		};
-
-		this.endQuery = function () {
-
-			// finish the query measurement
-			const ext = this.extension;
-			const gl = this.context;
-
-			if ( ext === null ) {
-
-				return;
-
-			}
-
-			gl.endQuery( ext.TIME_ELAPSED_EXT );
-
-		};
-
-	}
-
-}

examples/webgl_lines_fat.html

@@ -17,7 +17,8 @@
 			{
 				"imports": {
 					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/"
+					"three/addons/": "./jsm/",
+					"stats-gl": "https://cdn.jsdelivr.net/npm/stats-gl@2.2.8/dist/main.js"
 				}
 			}
 		</script>
@@ -26,8 +27,7 @@
 
 			import * as THREE from 'three';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
+			import Stats from 'stats-gl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -39,7 +39,7 @@
 			let line, renderer, scene, camera, camera2, controls;
 			let line1;
 			let matLine, matLineBasic, matLineDashed;
-			let stats, gpuPanel;
+			let stats;
 			let gui;
 
 			// viewport
@@ -138,13 +138,10 @@
 				window.addEventListener( 'resize', onWindowResize );
 				onWindowResize();
 
-				stats = new Stats();
+				stats = new Stats( { horizontal: false } );
+				stats.init( renderer );
 				document.body.appendChild( stats.dom );
 
-				gpuPanel = new GPUStatsPanel( renderer.getContext() );
-				stats.addPanel( gpuPanel );
-				stats.showPanel( 0 );
-
 				initGui();
 
 			}
@@ -174,9 +171,7 @@
 
 				controls.update();
 
-				gpuPanel.startQuery();
 				renderer.render( scene, camera );
-				gpuPanel.endQuery();
 
 				// inset scene
 

examples/webgl_lines_fat_raycasting.html

@@ -17,7 +17,8 @@
 			{
 				"imports": {
 					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/"
+					"three/addons/": "./jsm/",
+					"stats-gl": "https://cdn.jsdelivr.net/npm/stats-gl@2.2.8/dist/main.js"
 				}
 			}
 		</script>
@@ -26,8 +27,7 @@
 
 			import * as THREE from 'three';
 
-			import Stats from 'three/addons/libs/stats.module.js';
-			import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
+			import Stats from 'stats-gl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -40,7 +40,7 @@
 			let line, thresholdLine, segments, thresholdSegments;
 			let renderer, scene, camera, controls;
 			let sphereInter, sphereOnLine;
-			let stats, gpuPanel;
+			let stats;
 			let gui;
 			let clock;
 
@@ -194,12 +194,10 @@
 				window.addEventListener( 'resize', onWindowResize );
 				onWindowResize();
 
-				stats = new Stats();
+				stats = new Stats( { horizontal: false } );
+				stats.init( renderer );
 				document.body.appendChild( stats.dom );
-
-				gpuPanel = new GPUStatsPanel( renderer.getContext() );
-				stats.addPanel( gpuPanel );
-				stats.showPanel( 0 );
+			
 				initGui();
 
 			}
@@ -268,9 +266,7 @@
 
 				}
 
-				gpuPanel.startQuery();
 				renderer.render( scene, camera );
-				gpuPanel.endQuery();
 
 				stats.update();