Build/b902fbf38adfeb66aff351adf71388a1.json

@@ -0,0 +1,14 @@
+{
+"companyName": "Unity Technologies",
+"productName": "Benchmarks",
+"dataUrl": "5d7d8a22aba8714f900eedb51af8471f.unityweb",
+"wasmCodeUrl": "16170859095e774f917b593ba59e6169.unityweb",
+"wasmFrameworkUrl": "0a1ea651b285098b5a58d26de84082ff.unityweb",
+"wasmSymbolsUrl": "173a0070d0d48013ba9f0e0a9b62ab5f.unityweb",
+"TOTAL_MEMORY": 16777216,
+"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
+"webglContextAttributes": {"preserveDrawingBuffer": false},
+"splashScreenStyle": "Dark",
+"backgroundColor": "#231F20",
+"cacheControl": {"default": "must-revalidate"}
+}

README.md

@@ -1 +0,0 @@
-It worked!

TemplateData/Stats.js

@@ -0,0 +1,48 @@
+var Stats= {
+  Memory: {
+    init: function(initialHeapSize){
+      this.element = UI.createSection("Memory (mb)");
+      this.initialHeapSize = this.heapSize = initialHeapSize;
+      this.updateInterval = setInterval(() => {
+        Stats.Memory.updateText();
+      }, 1000);
+
+      this.updateText();
+    },
+    updateText: function(){
+      Stats.Memory.element.innerText = "Initial Heap Size: " + (Stats.Memory.initialHeapSize / 1024 / 1024);
+      Stats.Memory.element.innerText += "\nHeap Size: " + (gameInstance.Module.asmLibraryArg.getTotalMemory() / 1024 / 1024);
+      Stats.Memory.element.innerText += "\nHigh Watermark: " + (gameInstance.Module.HEAP32[gameInstance.Module.asmLibraryArg.DYNAMICTOP_PTR>> 2] / 1024 / 1024).toFixed(0);
+    }
+  },
+  Loading: {
+    timers: [],
+    init: function(Module){
+      this.element = UI.createSection("Load Times (ms)");
+      this.updateInterval = setInterval(function(){
+        Stats.Loading.updateText();
+      }, 500);
+
+      // UnityLoader.Job.schedule(Module, "wasmFrameworkDownloadFinished", ["downloadWasmFramework"], downloadFinishedJob.bind(null, "WebAssembly Framwork"));
+      UnityLoader.Job.schedule(Module, "downloadFinished", ["downloadWasmCode", "downloadData", "downloadWasmFramework"], this.downloadFinishedJob);
+    },
+    term: function(){
+        Stats.Loading.updateText();
+        clearInterval(Stats.Loading.updateInterval);
+    },
+    updateText: function(){
+      Stats.Loading.element.innerText = "";
+      Stats.Loading.timers.forEach(function(timer) {
+        Stats.Loading.element.innerText += timer.toString();
+        Stats.Loading.element.innerText += "\n";
+      });
+    },
+    downloadFinishedJob: function (Module, job) {
+      Stats.Loading.timers.unshift(
+        new Timer("Data", Module.Jobs["downloadData"]),
+        new Timer("Code", Module.Jobs["downloadWasmCode"]),
+        new Timer("Framework", Module.Jobs["downloadWasmFramework"])
+      );
+    }
+  }
+};

TemplateData/Timer.js

@@ -0,0 +1,44 @@
+var Timer = /** @class */ (function () {
+    function Timer(label, job) {
+        this.label = label;
+        if (job == null) {
+          this.startTime = performance.now();
+        }
+        else {
+          this.job = job;
+          this.set(job.starttime, job.endtime);
+        }
+    }
+    Timer.prototype.start = function () {
+        this.startTime = performance.now();
+    };
+    Timer.prototype.stop = function () {
+        this.endTime = performance.now();
+    };
+    Timer.prototype.set = function (startTime, endTime) {
+        this.startTime = startTime;
+        this.endTime = endTime;
+    };
+    Timer.prototype.isDone = function () {
+        return typeof this.endTime != "undefined";
+    };
+    Timer.prototype.toString = function () {
+        var text = this.label + ": ";
+        if (this.isDone()) {
+          // text += (this.endTime - this.startTime).toFixed(2);
+          text += (this.endTime - this.startTime).toFixed(0);
+          if ((typeof this.job !== "undefined") && this.job.result.value.cached) {
+            text += " (from cache)";
+          }
+        }
+        else {
+          var progress = ((performance.now() - this.startTime).toFixed(2) / 1000) % 3;
+          text += "in progress ";
+          for (i = 0; i < progress; i++) {
+              text += ".";
+          }
+        }
+        return text;
+    };
+    return Timer;
+}());

TemplateData/UI.js

@@ -0,0 +1,40 @@
+var UI= {
+  init: function(container, onQuit){
+    this.container = container;
+    this.main = document.createElement("div");
+    this.main.id = "overlay";
+
+    this.main.style.bottom = "0px";
+    this.container.appendChild(this.main);
+    // this.createButton("Reload with #no-cache");
+    this.createButton("X", function() {
+      onQuit();
+      UI.container.removeChild(UI.main);
+    });
+    if (!UnityLoader.SystemInfo.mobile)
+      this.createButton("Enable Fullscreen", function(){
+        gameInstance.SetFullscreen(1);
+      });
+  },
+  createButton: function (text, callback) {
+    var button = document.createElement("button");
+    button.className = "button";
+    var t = document.createTextNode(text);
+    button.appendChild(t);
+    button.addEventListener("click", callback);
+    this.main.appendChild(button);
+  },
+  createSection: function(title) {
+    var section = document.createElement("p");
+    section.id = "section";
+    section.innerText = title;
+
+    var content = document.createElement("p");
+    content.id = "section-content";
+
+    section.appendChild(content);
+    this.main.appendChild(section);
+
+    return content;
+  }
+}

TemplateData/UnityProgress.js

@@ -0,0 +1,24 @@
+function UnityProgress(gameObject, progress) {
+  if (!gameObject.Module)
+    return;
+  if (!gameObject.logo) {
+    gameObject.logo = document.createElement("div");
+    gameObject.logo.className = "logo " + gameObject.Module.splashScreenStyle;
+    gameObject.container.appendChild(gameObject.logo);
+  }
+  if (!gameObject.progress) {    
+    gameObject.progress = document.createElement("div");
+    gameObject.progress.className = "progress " + gameObject.Module.splashScreenStyle;
+    gameObject.progress.empty = document.createElement("div");
+    gameObject.progress.empty.className = "empty";
+    gameObject.progress.appendChild(gameObject.progress.empty);
+    gameObject.progress.full = document.createElement("div");
+    gameObject.progress.full.className = "full";
+    gameObject.progress.appendChild(gameObject.progress.full);
+    gameObject.container.appendChild(gameObject.progress);
+  }
+  gameObject.progress.full.style.width = (100 * progress) + "%";
+  gameObject.progress.empty.style.width = (100 * (1 - progress)) + "%";
+  if (progress == 1)
+    gameObject.logo.style.display = gameObject.progress.style.display = "none";
+}

TemplateData/style.css

@@ -0,0 +1,48 @@
+.webgl-content * {border: 0; margin: 0; padding: 0}
+.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
+
+.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
+.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
+.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
+.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
+.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
+
+.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
+.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
+.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
+
+.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;} 
+.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;} 
+.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
+.webgl-content .footer .title {margin-right: 10px; float: right;}
+.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
+
+#overlay {
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    background-color: #ababab80;
+    font-family: Helvetica, Verdana, Arial;
+}
+
+#section {
+    color: #202050;
+    background-color: #7d7d7d80;
+    font-weight: bold;
+    margin: 6px;
+    padding: 4px;
+}
+
+#section-content {
+    font-weight: normal;
+}
+
+.webgl-content .button {
+    /*border: 10px; margin: 10px; padding: 10px*/
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    padding: 5px;
+    color: #202050;
+    background-color: #7d7d7d;
+}

index.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Unity WebGL Player | Benchmarks</title>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico">
+    <link rel="stylesheet" href="TemplateData/style.css">
+    <script src="TemplateData/UnityProgress.js"></script>  
+    <!-- <script src="Build/04cfd823429f9d23bbb0a65451607432.js"></script> -->
+    <script src="TemplateData/UnityLoader.js"></script>
+    <script src="TemplateData/Timer.js"></script>
+    <script src="TemplateData/UI.js"></script>
+    <script src="TemplateData/Stats.js"></script>
+    <script>
+      var timeToScreen = new Timer("Time to Screen");
+      var timeToInteractive = new Timer("Time to Interactive");
+      Stats.Loading.timers.push(timeToScreen, timeToInteractive);
+      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/b902fbf38adfeb66aff351adf71388a1.json", {
+        onProgress: UnityProgress,
+        compatibilityCheck: function (gameInstance, onsuccess, onerror) {
+          if (!UnityLoader.SystemInfo.hasWebGL) {
+            gameInstance.popup("Your browser does not support WebGL",
+              [{text: "OK", callback: onerror}]);
+          } else if (["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1) {
+            gameInstance.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.",
+              [{text: "OK", callback: onsuccess}]);
+          } else {
+            UI.init(document.body, function(){
+              Stats.Loading.term();
+            });
+            Stats.Loading.init(gameInstance.Module);
+            onsuccess();
+          }
+        },
+        Module : {
+          cacheControl: {"default": "immutable"},
+          wasmRequest: function (wasmInstantiate, callback) {
+            var wasmInstantiation = null;
+            if (this.wasmCache) {
+              this.wasmCache.request = {
+                wasmInstantiate: function(moduleOrBinary){
+                  return new Promise(function(success){
+                    wasmInstantiation = new Timer("WebAssembly Instantiation");
+                    Stats.Loading.timers.push(wasmInstantiation);
+                    wasmInstantiate(moduleOrBinary).then(function(result){
+                      wasmInstantiation.stop();
+                      success(result);
+                    });
+                  });
+                },
+                callback: callback
+              };
+              this.wasmCache.update();
+            } else {
+              wasmInstantiation = new Timer("WebAssembly Instantiation");
+              Stats.Loading.timers.push(wasmInstantiation);
+              wasmInstantiate(this.wasmBinary).then(function (result) {
+                wasmInstantiation.stop();
+                callback(result.instance);
+              });
+            }
+          },
+          onRuntimeInitialized: function () {
+            Module = this;
+            var engineInitialization = new Timer("Engine Initialization");
+            Stats.Loading.timers.push(engineInitialization);
+            Stats.Memory.init(Module.TOTAL_MEMORY);
+            Module.postRun.unshift(function () {
+              var savedReallocBuffer = Module.reallocBuffer;
+              Module.reallocBuffer = function(size) {
+                var retValue = savedReallocBuffer(size);
+                // TODO: notify runtime about heap resize
+                return retValue;
+              }
+              engineInitialization.stop();
+            });
+          }
+        }
+      });
+    </script>
+  </head>
+  <body style="background-color: black">
+    <div class="webgl-content">
+      <div id="gameContainer" style="width: 1280px; height: 720px"></div>
+    </div>
+    <script>
+    var startLoadingTime = Date.now();
+    var timeToLoad = 0;
+    var timeToStableFPS = 0;
+    var lastFrame = 0;
+    function SampleFrame() {
+      var curTime = Date.now();
+      if (timeToLoad == 0) {
+        timeToLoad = curTime - startLoadingTime;
+        timeToScreen.stop();
+        console.log ("Loading took " + timeToLoad + "ms");
+
+        // LoadingTimes.element.innerText += "\nTime to first frame: " + (curTime - LoadingTimes.wasmDownloadEndTime);
+      }
+      if (timeToStableFPS == 0) {
+        var frameTime = curTime - lastFrame;
+        if (frameTime < 55) {
+          timeToStableFPS = curTime - startLoadingTime - timeToLoad;
+          timeToInteractive.stop();
+          Stats.Loading.term();
+          console.log ("Stabilizing took " + timeToStableFPS + "ms");
+          // LoadingTimes.element.innerText += "\nTime to interactive: " + (curTime - LoadingTimes.wasmDownloadEndTime);
+        }
+        lastFrame = curTime;
+      }      
+    }
+    </script>        
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const WAIT_TIMEOUT = 3000;
+
+            //     x=0 ---->
+            // y=0
+            // |
+            // |
+            // v
+
+
+            // Experimentally found by tracking mouse positions with document.onmousemove.
+            // Values in pixels.
+            const START_BUTTON_HEIGHT = 100;
+            const START_BUTTON_WIDTH = 300;
+
+            const BOX_WIDTH = 500;
+
+            const BUTTON_Y_OFFSET_FROM_BOTTOM = 60;
+
+            //document.onmousemove = function(event) {
+            //    console.log(`x=${event.pageX}, y=${event.pageY}`);
+            //}
+
+            setTimeout(function() {
+                let $canvas = document.getElementById("#canvas");
+
+                document.addEventListener('mousedown', function(event) {
+                    console.log(`onmousedown client x=${event.clientX}, y=${event.clientY}`);
+                    console.log(`onmousedown page x=${event.pageX}, y=${event.pageY}`);
+                    console.log(event);
+                });
+
+                //let x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
+                //x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
+                let x = ($canvas.width - BOX_WIDTH) / 2;
+                x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
+                x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
+
+                //let y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
+                //y = y + $canvas.height; // $canvas bottom
+                let y = $canvas.height;
+                y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
+                y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
+
+                console.warn(`clicking x=${x}, y=${y}!`);
+
+                for (let name of ['mousedown', 'click']) {
+                    let click = new MouseEvent(name, {
+                        clientX: x,
+                        clientY: y,
+                        screenX: x,
+                        screenY: y,
+                        button: 0,
+                        buttons: 1,
+                        bubbles: true,
+                    });
+
+                    document.dispatchEvent(click);
+                    //$canvas.dispatchEvent(click);
+                    console.warn('click done');
+                }
+            }, WAIT_TIMEOUT);
+        });
+    </script>
+
+  </body>
+</html>