stats.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. // stats.js -
  2. // @author mrdoob http://github.com/mrdoob/stats.js
  3. // The MIT License
  4. //
  5. // Copyright (c) 2009-2016 stats.js author mrdoob / http://mrdoob.com/
  6. //
  7. // Permission is hereby granted, free of charge, to any person obtaining a copy
  8. // of this software and associated documentation files (the "Software"), to deal
  9. // in the Software without restriction, including without limitation the rights
  10. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  11. // copies of the Software, and to permit persons to whom the Software is
  12. // furnished to do so, subject to the following conditions:
  13. //
  14. // The above copyright notice and this permission notice shall be included in
  15. // all copies or substantial portions of the Software.
  16. //
  17. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  20. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  22. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  23. // THE SOFTWARE.
  24. var Stats = function () {
  25. this.fps = 0;
  26. var mode = 0;
  27. var container = document.createElement( 'div' );
  28. container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
  29. container.addEventListener( 'click', function ( event ) {
  30. event.preventDefault();
  31. showPanel( ++ mode % container.children.length );
  32. }, false );
  33. //
  34. function addPanel( panel ) {
  35. container.appendChild( panel.dom );
  36. return panel;
  37. }
  38. function showPanel( id ) {
  39. for ( var i = 0; i < container.children.length; i ++ ) {
  40. container.children[ i ].style.display = i === id ? 'block' : 'none';
  41. }
  42. mode = id;
  43. }
  44. //
  45. var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
  46. var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
  47. var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
  48. if ( self.performance && self.performance.memory ) {
  49. var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
  50. }
  51. showPanel( 0 );
  52. return {
  53. REVISION: 16,
  54. dom: container,
  55. addPanel: addPanel,
  56. showPanel: showPanel,
  57. begin: function () {
  58. beginTime = ( performance || Date ).now();
  59. },
  60. end: function () {
  61. frames ++;
  62. var time = ( performance || Date ).now();
  63. msPanel.update( time - beginTime, 200 );
  64. if ( time > prevTime + 3000 ) {
  65. this.fps = ( frames * 1000 ) / ( time - prevTime );
  66. fpsPanel.update( this.fps, 100 );
  67. prevTime = time;
  68. frames = 0;
  69. if ( memPanel ) {
  70. var memory = performance.memory;
  71. memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
  72. }
  73. }
  74. return time;
  75. },
  76. update: function () {
  77. beginTime = this.end();
  78. },
  79. // Backwards Compatibility
  80. domElement: container,
  81. setMode: showPanel
  82. };
  83. };
  84. Stats.Panel = function ( name, fg, bg ) {
  85. var min = Infinity, max = 0, round = Math.round;
  86. var PR = round( window.devicePixelRatio || 1 );
  87. var WIDTH = 80 * PR, HEIGHT = 48 * PR,
  88. TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
  89. GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
  90. GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
  91. var canvas = document.createElement( 'canvas' );
  92. canvas.width = WIDTH;
  93. canvas.height = HEIGHT;
  94. canvas.style.cssText = 'width:80px;height:48px';
  95. var context = canvas.getContext( '2d' );
  96. context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
  97. context.textBaseline = 'top';
  98. context.fillStyle = bg;
  99. context.fillRect( 0, 0, WIDTH, HEIGHT );
  100. context.fillStyle = fg;
  101. context.fillText( name, TEXT_X, TEXT_Y );
  102. context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
  103. context.fillStyle = bg;
  104. context.globalAlpha = 0.9;
  105. context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
  106. return {
  107. dom: canvas,
  108. update: function ( value, maxValue ) {
  109. min = Math.min( min, value );
  110. max = Math.max( max, value );
  111. context.fillStyle = bg;
  112. context.globalAlpha = 1;
  113. context.fillRect( 0, 0, WIDTH, GRAPH_Y );
  114. context.fillStyle = fg;
  115. context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
  116. context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
  117. context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
  118. context.fillStyle = bg;
  119. context.globalAlpha = 0.9;
  120. context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
  121. }
  122. };
  123. };
  124. if ( typeof module === 'object' ) {
  125. module.exports = Stats;
  126. }