94 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			94 lines
		
	
	
		
			1.7 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| 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 );
 | |
| 
 | |
| 					}
 | |
| 
 | |
| 					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 );
 | |
| 
 | |
| 		};
 | |
| 
 | |
| 	}
 | |
| 
 | |
| }
 |