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 );
 | 
						|
 | 
						|
		};
 | 
						|
 | 
						|
	}
 | 
						|
 | 
						|
}
 |