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