/Demo/benchmarks.html
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>