stats.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. var Stats = function () {
  5. var startTime = Date.now(), prevTime = startTime;
  6. var ms = 0, msMin = Infinity, msMax = 0;
  7. var fps = 0, fpsMin = Infinity, fpsMax = 0;
  8. var frames = 0, mode = 0;
  9. var container = document.createElement( 'div' );
  10. container.id = 'stats';
  11. container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
  12. container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
  13. var fpsDiv = document.createElement( 'div' );
  14. fpsDiv.id = 'fps';
  15. fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
  16. container.appendChild( fpsDiv );
  17. var fpsText = document.createElement( 'div' );
  18. fpsText.id = 'fpsText';
  19. fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
  20. fpsText.innerHTML = 'FPS';
  21. fpsDiv.appendChild( fpsText );
  22. var fpsGraph = document.createElement( 'div' );
  23. fpsGraph.id = 'fpsGraph';
  24. fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
  25. fpsDiv.appendChild( fpsGraph );
  26. while ( fpsGraph.children.length < 74 ) {
  27. var bar = document.createElement( 'span' );
  28. bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
  29. fpsGraph.appendChild( bar );
  30. }
  31. var msDiv = document.createElement( 'div' );
  32. msDiv.id = 'ms';
  33. msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
  34. container.appendChild( msDiv );
  35. var msText = document.createElement( 'div' );
  36. msText.id = 'msText';
  37. msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
  38. msText.innerHTML = 'MS';
  39. msDiv.appendChild( msText );
  40. var msGraph = document.createElement( 'div' );
  41. msGraph.id = 'msGraph';
  42. msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
  43. msDiv.appendChild( msGraph );
  44. while ( msGraph.children.length < 74 ) {
  45. var bar = document.createElement( 'span' );
  46. bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
  47. msGraph.appendChild( bar );
  48. }
  49. var setMode = function ( value ) {
  50. mode = value;
  51. switch ( mode ) {
  52. case 0:
  53. fpsDiv.style.display = 'block';
  54. msDiv.style.display = 'none';
  55. break;
  56. case 1:
  57. fpsDiv.style.display = 'none';
  58. msDiv.style.display = 'block';
  59. break;
  60. }
  61. };
  62. var updateGraph = function ( dom, value ) {
  63. var child = dom.appendChild( dom.firstChild );
  64. child.style.height = value + 'px';
  65. };
  66. return {
  67. REVISION: 12,
  68. domElement: container,
  69. setMode: setMode,
  70. begin: function () {
  71. startTime = Date.now();
  72. },
  73. end: function () {
  74. var time = Date.now();
  75. ms = time - startTime;
  76. msMin = Math.min( msMin, ms );
  77. msMax = Math.max( msMax, ms );
  78. msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
  79. updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
  80. frames ++;
  81. if ( time > prevTime + 1000 ) {
  82. fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
  83. fpsMin = Math.min( fpsMin, fps );
  84. fpsMax = Math.max( fpsMax, fps );
  85. fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
  86. updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
  87. prevTime = time;
  88. frames = 0;
  89. }
  90. return time;
  91. },
  92. update: function () {
  93. startTime = this.end();
  94. }
  95. }
  96. };
  97. if ( typeof module === 'object' ) {
  98. module.exports = Stats;
  99. }