GPUStatsPanel.js 2.4 KB

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