123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 |
- import Stats from '../libs/stats.module.js';
- // https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query/
- // 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' );
- let isWebGL2 = true;
- let extension = context.getExtension( 'EXT_disjoint_timer_query_webgl2' );
- if ( extension === null ) {
- isWebGL2 = false;
- extension = context.getExtension( 'EXT_disjoint_timer_query' );
- 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
- let query;
- if ( isWebGL2 ) {
- query = gl.createQuery();
- gl.beginQuery( ext.TIME_ELAPSED_EXT, query );
- } else {
- query = ext.createQueryEXT();
- ext.beginQueryEXT( ext.TIME_ELAPSED_EXT, query );
- }
- this.activeQueries ++;
- const checkQuery = () => {
- // check if the query is available and valid
- let available, disjoint, ns;
- if ( isWebGL2 ) {
- available = gl.getQueryParameter( query, gl.QUERY_RESULT_AVAILABLE );
- disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT );
- ns = gl.getQueryParameter( query, gl.QUERY_RESULT );
- } else {
- available = ext.getQueryObjectEXT( query, ext.QUERY_RESULT_AVAILABLE_EXT );
- disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT );
- ns = ext.getQueryObjectEXT( query, ext.QUERY_RESULT_EXT );
- }
- const ms = ns * 1e-6;
- if ( available ) {
- // update the display if it is valid
- if ( ! disjoint ) {
- this.update( ms, this.maxTime );
- }
- this.activeQueries --;
- } else {
- // 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;
- }
- if ( isWebGL2 ) {
- gl.endQuery( ext.TIME_ELAPSED_EXT );
- } else {
- ext.endQueryEXT( ext.TIME_ELAPSED_EXT );
- }
- };
- }
- }
|