benchmarks.html - This HTML code outputs a web page that ru…

/Demo/benchmarks.html

http://github.com/mbebenita/Broadway · HTML · 191 lines · 160 code · 31 blank · 0 comment · 0 complexity · 6a7f833609dc251c3dcefd478fcb64b1 MD5 · raw file


<!DOCTYPE html>
<html>

<head>
<style>
/* MetaWebPro font family licensed from fontshop.com. WOFF-FTW! */
@font-face {
	font-family: 'MetaBlack';
	src: url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.eot');
	src: local('âş'),
		url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.woff')
		format('woff');
	font-weight: bold;
}
</style>
</head>
<body>
  <meta charset="utf-8">

  <style>

  #site-title {
    display: block;
    font: normal bold 60px/.738 MetaBlack, "Arial Black", sans-serif;
    letter-spacing: -0.02em;
  }
  
  #doc {
    margin: 0 auto;
    width: 1200px;
    padding: 10px;
  }
  
  #tagline {
    clear: both;
    font: 1.538em/1.4 Georgia, sans-serif;
    color: #484848;
    padding: 0 430px 0 0px;
  }
  
  body {
    font: normal 16px/.738 MetaBlack, "Arial Black", sans-serif;
  	color: #6D7581;
  }
  
  #controls {
    padding: 10px;
    height: 40px;
  }
  
  </style>

  <link type="text/css" href="jquery/theme/jquery-ui.css" rel="stylesheet" />
  <script type="text/javascript" src="jquery/jquery.min.js"></script>
  <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>

  <script src="sylvester.js" type="text/javascript"></script>
  <script src="glUtils.js" type="text/javascript"></script>
  
  <script src='util.js' type='text/javascript'></script>
  <script src='canvas.js' type='text/javascript'></script>

  <script type="text/javascript">
    $(function() {
      $("#play").button();
      $("#play").click(function() {
          run();
      });
    });

    function time(name, fn, count) {
      var start = Date.now();
      for (var i = 0; i < count; i++) {
        fn();  
      }
      var elapsed = Date.now() - start;
      var rateSecond = (count / elapsed) * 1000;
      var rate2 = (elapsed / count);
      var msg = name + " - Total: " + elapsed + " ms, Count: " + count + 
                ", Rate: " + rateSecond.toFixed(2) + " op/s, " + rate2.toFixed(3) + " ms/op";
      console.log(msg);
      
      $("#results").append("<p>" + msg + "</p>");
    }
    
    function run() {
      var size = new Size(512, 512);
      
      var benchmarks = [];
      
      
      var buffer = new Uint8Array(size.w * size.h);
      for (var i = 0; i < buffer.length; i++) {
        buffer[i] = i;
      }

      var noise = new Uint8Array(1024);
      for (var i = 0; i < noise.length; i++) {
        noise[i] = Math.random() * 255;
      }
      
      var samples = 5000;
      
      var c1 = new WebGLCanvas(document.getElementById('canvas-1'), size);
      
      if (true) {
        benchmarks.push(function() {
          time("Fill Texture", function () {
            c1.texture.fill(buffer);  
          }, samples);
        });
      }
      
      if (true) {
        benchmarks.push(function() {
          time("Draw Scene", function () {
            c1.drawScene();
          }, samples);
        });
      }
      
      if (false) {
        benchmarks.push(function() {
          time("Fill Texture + Draw Scene", function () {
            c1.texture.fill(buffer);  
            c1.drawScene();
          }, samples);
        });
      }
      
      var chroma = new Uint8Array((size.w >>> 1) * (size.h >>> 1));
      for (var i = 0; i < chroma.length; i++) {
        chroma[i] = i;
      }
      
      var c2 = new YUVWebGLCanvas(document.getElementById('canvas-2'), size);
      
      if (false) {
        benchmarks.push(function() {
          time("YUV Fill Texture", function () {
            c2.YTexture.fill(buffer);
            c2.UTexture.fill(chroma);
            c2.VTexture.fill(chroma);
          }, samples);
        });
      }
      
      if (false) {
        benchmarks.push(function() {
          time("YUV Draw Scene", function () {
            c2.drawScene();
          }, samples);
        });
      }
      
      if (false) {
        benchmarks.push(function() {
          time("YUV Fill Texture + Draw Scene", function () {
            c2.YTexture.fill(buffer);
            c2.UTexture.fill(chroma);
            c2.VTexture.fill(chroma);
            c2.drawScene();
          }, samples);
        });
      }
      
      var benchmarkIndex = 0;
      window.addEventListener("message", function() {
        benchmarks[benchmarkIndex++]();
        if (benchmarkIndex < benchmarks.length) {
          window.postMessage(0, "*");
        }
      }, false);
      window.postMessage(0, "*")
    }
  </script>

  <div id="doc">
    <header>
      <h1 id="site-title"><b>Broadway.js Benchmarks</b></h1>
    </header>
    <div id="setting">
      <canvas id='canvas-1'></canvas>
      <canvas id='canvas-2'></canvas>
      <div id="controls">
          <button id="play">Run</button>
      </div>
    </div>
    <div id="results"></div>
  </body>
</html>

Summary ✨

This HTML code outputs a web page that runs benchmarks for two different WebGL canvas implementations: WebGLCanvas and YUVWebGLCanvas. The page displays the results of these benchmarks, including timing data and statistics, in real-time as they are run. A “Run” button triggers the benchmarking process, which can be repeated multiple times to compare performance.

Alerts (4)

'<style>' Inline CSS detected; use external stylesheets for maintainability and performance
5 20
'http://' Insecure HTTP link detected; use HTTPS for encrypted connections
9 11