You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

202 lines
8.1 KiB

2 years ago
2 years ago
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Unity WebGL Player | Benchmarks</title>
  7. <link rel="shortcut icon" href="TemplateData/favicon.ico">
  8. <link rel="stylesheet" href="TemplateData/style.css">
  9. <script src="TemplateData/UnityProgress.js"></script>
  10. <!-- <script src="Build/04cfd823429f9d23bbb0a65451607432.js"></script> -->
  11. <script src="TemplateData/UnityLoader.js"></script>
  12. <script src="TemplateData/Timer.js"></script>
  13. <script src="TemplateData/UI.js"></script>
  14. <script src="TemplateData/Stats.js"></script>
  15. <script>
  16. var timeToScreen = new Timer("Time to Screen");
  17. var timeToInteractive = new Timer("Time to Interactive");
  18. Stats.Loading.timers.push(timeToScreen, timeToInteractive);
  19. var gameInstance = UnityLoader.instantiate("gameContainer", "Build/b902fbf38adfeb66aff351adf71388a1.json", {
  20. onProgress: UnityProgress,
  21. compatibilityCheck: function (gameInstance, onsuccess, onerror) {
  22. if (!UnityLoader.SystemInfo.hasWebGL) {
  23. gameInstance.popup("Your browser does not support WebGL",
  24. [{text: "OK", callback: onerror}]);
  25. } else if (["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
  26. gameInstance.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.",
  27. [{text: "OK", callback: onsuccess}]);
  28. } else {
  29. UI.init(document.body, function(){
  30. Stats.Loading.term();
  31. });
  32. Stats.Loading.init(gameInstance.Module);
  33. onsuccess();
  34. }
  35. },
  36. Module : {
  37. cacheControl: {"default": "immutable"},
  38. wasmRequest: function (wasmInstantiate, callback) {
  39. var wasmInstantiation = null;
  40. if (this.wasmCache) {
  41. this.wasmCache.request = {
  42. wasmInstantiate: function(moduleOrBinary){
  43. return new Promise(function(success){
  44. wasmInstantiation = new Timer("WebAssembly Instantiation");
  45. Stats.Loading.timers.push(wasmInstantiation);
  46. wasmInstantiate(moduleOrBinary).then(function(result){
  47. wasmInstantiation.stop();
  48. success(result);
  49. });
  50. });
  51. },
  52. callback: callback
  53. };
  54. this.wasmCache.update();
  55. } else {
  56. wasmInstantiation = new Timer("WebAssembly Instantiation");
  57. Stats.Loading.timers.push(wasmInstantiation);
  58. wasmInstantiate(this.wasmBinary).then(function (result) {
  59. wasmInstantiation.stop();
  60. callback(result.instance);
  61. });
  62. }
  63. },
  64. onRuntimeInitialized: function () {
  65. Module = this;
  66. var engineInitialization = new Timer("Engine Initialization");
  67. Stats.Loading.timers.push(engineInitialization);
  68. Stats.Memory.init(Module.TOTAL_MEMORY);
  69. Module.postRun.unshift(function () {
  70. var savedReallocBuffer = Module.reallocBuffer;
  71. Module.reallocBuffer = function(size) {
  72. var retValue = savedReallocBuffer(size);
  73. // TODO: notify runtime about heap resize
  74. return retValue;
  75. }
  76. engineInitialization.stop();
  77. });
  78. }
  79. }
  80. });
  81. </script>
  82. </head>
  83. <body style="background-color: black">
  84. <div class="webgl-content">
  85. <div id="gameContainer" style="width: 1280px; height: 720px"></div>
  86. </div>
  87. <script>
  88. var startLoadingTime = Date.now();
  89. var timeToLoad = 0;
  90. var timeToStableFPS = 0;
  91. var lastFrame = 0;
  92. function SampleFrame() {
  93. var curTime = Date.now();
  94. if (timeToLoad == 0) {
  95. timeToLoad = curTime - startLoadingTime;
  96. timeToScreen.stop();
  97. console.log ("Loading took " + timeToLoad + "ms");
  98. // LoadingTimes.element.innerText += "\nTime to first frame: " + (curTime - LoadingTimes.wasmDownloadEndTime);
  99. }
  100. if (timeToStableFPS == 0) {
  101. var frameTime = curTime - lastFrame;
  102. if (frameTime < 55) {
  103. timeToStableFPS = curTime - startLoadingTime - timeToLoad;
  104. timeToInteractive.stop();
  105. Stats.Loading.term();
  106. console.log ("Stabilizing took " + timeToStableFPS + "ms");
  107. // LoadingTimes.element.innerText += "\nTime to interactive: " + (curTime - LoadingTimes.wasmDownloadEndTime);
  108. }
  109. lastFrame = curTime;
  110. }
  111. }
  112. </script>
  113. <script>
  114. document.addEventListener('DOMContentLoaded', function() {
  115. // x=0 ---->
  116. // y=0
  117. // |
  118. // |
  119. // v
  120. // Experimentally found by tracking mouse positions with document.onmousemove.
  121. // Values in pixels.
  122. const START_BUTTON_HEIGHT = 100;
  123. const START_BUTTON_WIDTH = 300;
  124. const BOX_WIDTH = 500;
  125. const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
  126. //document.addEventListener('mousedown', function(event) {
  127. // console.log('document', event);
  128. //});
  129. // Parameters that can be tweaked.
  130. const WAIT_TIMEOUT = 8000;
  131. const DISPATCH_ON_CANVAS = true;
  132. const TEST_MODE = true;
  133. setTimeout(function() {
  134. let $canvas = document.getElementById("#canvas");
  135. function dispatchOne(eventName, x, y) {
  136. let ev = new MouseEvent(eventName, {
  137. clientX: x,
  138. clientY: y,
  139. screenX: x,
  140. screenY: y,
  141. button: 0,
  142. buttons: 1,
  143. bubbles: true,
  144. });
  145. if (DISPATCH_ON_CANVAS) {
  146. $canvas.dispatchEvent(ev);
  147. } else {
  148. document.dispatchEvent(ev);
  149. }
  150. }
  151. //$canvas.addEventListener('mousedown', function(event) {
  152. // console.log(event);
  153. //});
  154. let x, y;
  155. if (DISPATCH_ON_CANVAS) {
  156. x = ($canvas.width - BOX_WIDTH) / 2; // box x offset
  157. y = $canvas.height;
  158. } else {
  159. x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
  160. x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
  161. y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
  162. y = y + $canvas.height; // $canvas bottom
  163. }
  164. x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
  165. x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
  166. y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
  167. y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
  168. if (TEST_MODE) {
  169. for (let eventName of ['mousedown', 'mousemove', 'mouseup', 'click']) {
  170. for (let x = 0; x < $canvas.width; x += 10) {
  171. for (let y = 0; y < $canvas.height; y += 10) {
  172. dispatchOne(eventName, x, y);
  173. }
  174. }
  175. console.log(`done with ${eventName}!`);
  176. }
  177. console.log('done with all click types')
  178. } else {
  179. console.warn(`clicking x=${x}, y=${y}!`);
  180. dispatchOne('mousedown', x, y);
  181. }
  182. }, WAIT_TIMEOUT);
  183. });
  184. </script>
  185. </body>
  186. </html>