/Demo/benchmarks.html
HTML | 191 lines | 160 code | 31 blank | 0 comment | 0 complexity | 6a7f833609dc251c3dcefd478fcb64b1 MD5 | raw file
Possible License(s): BSD-3-Clause
- <!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>