GPUStatsPanel.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import Stats from '../libs/stats.module.js';
  2. // https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query/
  3. // https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/
  4. export class GPUStatsPanel extends Stats.Panel {
  5. constructor( context, name = 'GPU MS' ) {
  6. super( name, '#f90', '#210' );
  7. let isWebGL2 = true;
  8. let extension = context.getExtension( 'EXT_disjoint_timer_query_webgl2' );
  9. if ( extension === null ) {
  10. isWebGL2 = false;
  11. extension = context.getExtension( 'EXT_disjoint_timer_query' );
  12. if ( extension === null ) {
  13. console.warn( 'GPUStatsPanel: disjoint_time_query extension not available.' );
  14. }
  15. }
  16. this.context = context;
  17. this.extension = extension;
  18. this.maxTime = 30;
  19. this.activeQueries = 0;
  20. this.startQuery = function () {
  21. const gl = this.context;
  22. const ext = this.extension;
  23. if ( ext === null ) {
  24. return;
  25. }
  26. // create the query object
  27. let query;
  28. if ( isWebGL2 ) {
  29. query = gl.createQuery();
  30. gl.beginQuery( ext.TIME_ELAPSED_EXT, query );
  31. } else {
  32. query = ext.createQueryEXT();
  33. ext.beginQueryEXT( ext.TIME_ELAPSED_EXT, query );
  34. }
  35. this.activeQueries ++;
  36. const checkQuery = () => {
  37. // check if the query is available and valid
  38. let available, disjoint, ns;
  39. if ( isWebGL2 ) {
  40. available = gl.getQueryParameter( query, gl.QUERY_RESULT_AVAILABLE );
  41. disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT );
  42. ns = gl.getQueryParameter( query, gl.QUERY_RESULT );
  43. } else {
  44. available = ext.getQueryObjectEXT( query, ext.QUERY_RESULT_AVAILABLE_EXT );
  45. disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT );
  46. ns = ext.getQueryObjectEXT( query, ext.QUERY_RESULT_EXT );
  47. }
  48. const ms = ns * 1e-6;
  49. if ( available ) {
  50. // update the display if it is valid
  51. if ( ! disjoint ) {
  52. this.update( ms, this.maxTime );
  53. }
  54. this.activeQueries --;
  55. } else {
  56. // otherwise try again the next frame
  57. requestAnimationFrame( checkQuery );
  58. }
  59. };
  60. requestAnimationFrame( checkQuery );
  61. };
  62. this.endQuery = function () {
  63. // finish the query measurement
  64. const ext = this.extension;
  65. const gl = this.context;
  66. if ( ext === null ) {
  67. return;
  68. }
  69. if ( isWebGL2 ) {
  70. gl.endQuery( ext.TIME_ELAPSED_EXT );
  71. } else {
  72. ext.endQueryEXT( ext.TIME_ELAPSED_EXT );
  73. }
  74. };
  75. }
  76. }