JAVASCRIPT   72

Stats.js

Guest on 25th July 2021 09:40:04 AM

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

Raw Paste


Login or Register to edit or fork this paste. It's free.