stats.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. (function (global, factory) {
  2. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  3. typeof define === 'function' && define.amd ? define(factory) :
  4. (global.Stats = factory());
  5. }(this, (function () { 'use strict';
  6. /**
  7. * @author mrdoob / http://mrdoob.com/
  8. */
  9. var Stats = function () {
  10. var mode = 0;
  11. var container = document.createElement( 'div' );
  12. container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
  13. container.addEventListener( 'click', function ( event ) {
  14. event.preventDefault();
  15. showPanel( ++ mode % container.children.length );
  16. }, false );
  17. //
  18. function addPanel( panel ) {
  19. container.appendChild( panel.dom );
  20. return panel;
  21. }
  22. function showPanel( id ) {
  23. for ( var i = 0; i < container.children.length; i ++ ) {
  24. container.children[ i ].style.display = i === id ? 'block' : 'none';
  25. }
  26. mode = id;
  27. }
  28. //
  29. var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
  30. var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
  31. var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
  32. if ( self.performance && self.performance.memory ) {
  33. var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
  34. }
  35. showPanel( 0 );
  36. return {
  37. REVISION: 16,
  38. dom: container,
  39. addPanel: addPanel,
  40. showPanel: showPanel,
  41. begin: function () {
  42. beginTime = ( performance || Date ).now();
  43. },
  44. end: function () {
  45. frames ++;
  46. var time = ( performance || Date ).now();
  47. msPanel.update( time - beginTime, 200 );
  48. if ( time >= prevTime + 1000 ) {
  49. fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
  50. prevTime = time;
  51. frames = 0;
  52. if ( memPanel ) {
  53. var memory = performance.memory;
  54. memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
  55. }
  56. }
  57. return time;
  58. },
  59. update: function () {
  60. beginTime = this.end();
  61. },
  62. // Backwards Compatibility
  63. domElement: container,
  64. setMode: showPanel
  65. };
  66. };
  67. Stats.Panel = function ( name, fg, bg ) {
  68. var min = Infinity, max = 0, round = Math.round;
  69. var PR = round( window.devicePixelRatio || 1 );
  70. var WIDTH = 80 * PR, HEIGHT = 48 * PR,
  71. TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
  72. GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
  73. GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
  74. var canvas = document.createElement( 'canvas' );
  75. canvas.width = WIDTH;
  76. canvas.height = HEIGHT;
  77. canvas.style.cssText = 'width:80px;height:48px';
  78. var context = canvas.getContext( '2d' );
  79. context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
  80. context.textBaseline = 'top';
  81. context.fillStyle = bg;
  82. context.fillRect( 0, 0, WIDTH, HEIGHT );
  83. context.fillStyle = fg;
  84. context.fillText( name, TEXT_X, TEXT_Y );
  85. context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
  86. context.fillStyle = bg;
  87. context.globalAlpha = 0.9;
  88. context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
  89. return {
  90. dom: canvas,
  91. update: function ( value, maxValue ) {
  92. min = Math.min( min, value );
  93. max = Math.max( max, value );
  94. context.fillStyle = bg;
  95. context.globalAlpha = 1;
  96. context.fillRect( 0, 0, WIDTH, GRAPH_Y );
  97. context.fillStyle = fg;
  98. context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
  99. context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
  100. context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
  101. context.fillStyle = bg;
  102. context.globalAlpha = 0.9;
  103. context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
  104. }
  105. };
  106. };
  107. return Stats;
  108. })));