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