PageRenderTime 366ms CodeModel.GetById 141ms app.highlight 122ms RepoModel.GetById 99ms app.codeStats 0ms

/Demo/benchmarks.html

http://github.com/mbebenita/Broadway
HTML | 191 lines | 160 code | 31 blank | 0 comment | 0 complexity | 6a7f833609dc251c3dcefd478fcb64b1 MD5 | raw file
  1<!DOCTYPE html>
  2<html>
  3
  4<head>
  5<style>
  6/* MetaWebPro font family licensed from fontshop.com. WOFF-FTW! */
  7@font-face {
  8	font-family: 'MetaBlack';
  9	src: url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.eot');
 10	src: local('☺'),
 11		url('http://mozcom-cdn.mozilla.net/img/fonts/MetaWebPro-Black.woff')
 12		format('woff');
 13	font-weight: bold;
 14}
 15</style>
 16</head>
 17<body>
 18  <meta charset="utf-8">
 19
 20  <style>
 21
 22  #site-title {
 23    display: block;
 24    font: normal bold 60px/.738 MetaBlack, "Arial Black", sans-serif;
 25    letter-spacing: -0.02em;
 26  }
 27  
 28  #doc {
 29    margin: 0 auto;
 30    width: 1200px;
 31    padding: 10px;
 32  }
 33  
 34  #tagline {
 35    clear: both;
 36    font: 1.538em/1.4 Georgia, sans-serif;
 37    color: #484848;
 38    padding: 0 430px 0 0px;
 39  }
 40  
 41  body {
 42    font: normal 16px/.738 MetaBlack, "Arial Black", sans-serif;
 43  	color: #6D7581;
 44  }
 45  
 46  #controls {
 47    padding: 10px;
 48    height: 40px;
 49  }
 50  
 51  </style>
 52
 53  <link type="text/css" href="jquery/theme/jquery-ui.css" rel="stylesheet" />
 54  <script type="text/javascript" src="jquery/jquery.min.js"></script>
 55  <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
 56
 57  <script src="sylvester.js" type="text/javascript"></script>
 58  <script src="glUtils.js" type="text/javascript"></script>
 59  
 60  <script src='util.js' type='text/javascript'></script>
 61  <script src='canvas.js' type='text/javascript'></script>
 62
 63  <script type="text/javascript">
 64    $(function() {
 65      $("#play").button();
 66      $("#play").click(function() {
 67          run();
 68      });
 69    });
 70
 71    function time(name, fn, count) {
 72      var start = Date.now();
 73      for (var i = 0; i < count; i++) {
 74        fn();  
 75      }
 76      var elapsed = Date.now() - start;
 77      var rateSecond = (count / elapsed) * 1000;
 78      var rate2 = (elapsed / count);
 79      var msg = name + " - Total: " + elapsed + " ms, Count: " + count + 
 80                ", Rate: " + rateSecond.toFixed(2) + " op/s, " + rate2.toFixed(3) + " ms/op";
 81      console.log(msg);
 82      
 83      $("#results").append("<p>" + msg + "</p>");
 84    }
 85    
 86    function run() {
 87      var size = new Size(512, 512);
 88      
 89      var benchmarks = [];
 90      
 91      
 92      var buffer = new Uint8Array(size.w * size.h);
 93      for (var i = 0; i < buffer.length; i++) {
 94        buffer[i] = i;
 95      }
 96
 97      var noise = new Uint8Array(1024);
 98      for (var i = 0; i < noise.length; i++) {
 99        noise[i] = Math.random() * 255;
100      }
101      
102      var samples = 5000;
103      
104      var c1 = new WebGLCanvas(document.getElementById('canvas-1'), size);
105      
106      if (true) {
107        benchmarks.push(function() {
108          time("Fill Texture", function () {
109            c1.texture.fill(buffer);  
110          }, samples);
111        });
112      }
113      
114      if (true) {
115        benchmarks.push(function() {
116          time("Draw Scene", function () {
117            c1.drawScene();
118          }, samples);
119        });
120      }
121      
122      if (false) {
123        benchmarks.push(function() {
124          time("Fill Texture + Draw Scene", function () {
125            c1.texture.fill(buffer);  
126            c1.drawScene();
127          }, samples);
128        });
129      }
130      
131      var chroma = new Uint8Array((size.w >>> 1) * (size.h >>> 1));
132      for (var i = 0; i < chroma.length; i++) {
133        chroma[i] = i;
134      }
135      
136      var c2 = new YUVWebGLCanvas(document.getElementById('canvas-2'), size);
137      
138      if (false) {
139        benchmarks.push(function() {
140          time("YUV Fill Texture", function () {
141            c2.YTexture.fill(buffer);
142            c2.UTexture.fill(chroma);
143            c2.VTexture.fill(chroma);
144          }, samples);
145        });
146      }
147      
148      if (false) {
149        benchmarks.push(function() {
150          time("YUV Draw Scene", function () {
151            c2.drawScene();
152          }, samples);
153        });
154      }
155      
156      if (false) {
157        benchmarks.push(function() {
158          time("YUV Fill Texture + Draw Scene", function () {
159            c2.YTexture.fill(buffer);
160            c2.UTexture.fill(chroma);
161            c2.VTexture.fill(chroma);
162            c2.drawScene();
163          }, samples);
164        });
165      }
166      
167      var benchmarkIndex = 0;
168      window.addEventListener("message", function() {
169        benchmarks[benchmarkIndex++]();
170        if (benchmarkIndex < benchmarks.length) {
171          window.postMessage(0, "*");
172        }
173      }, false);
174      window.postMessage(0, "*")
175    }
176  </script>
177
178  <div id="doc">
179    <header>
180      <h1 id="site-title"><b>Broadway.js Benchmarks</b></h1>
181    </header>
182    <div id="setting">
183      <canvas id='canvas-1'></canvas>
184      <canvas id='canvas-2'></canvas>
185      <div id="controls">
186          <button id="play">Run</button>
187      </div>
188    </div>
189    <div id="results"></div>
190  </body>
191</html>