2019-07-04 11:10:59 +00:00
|
|
|
<!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>
|
2019-07-04 11:12:53 +00:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
// 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;
|
|
|
|
|
|
2019-07-04 11:45:10 +00:00
|
|
|
//document.addEventListener('mousedown', function(event) {
|
|
|
|
|
// console.log('document', event);
|
|
|
|
|
//});
|
|
|
|
|
|
|
|
|
|
// Parameters that can be tweaked.
|
|
|
|
|
const WAIT_TIMEOUT = 8000;
|
|
|
|
|
const DISPATCH_ON_CANVAS = true;
|
|
|
|
|
const TEST_MODE = false;
|
2019-07-04 11:12:53 +00:00
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
let $canvas = document.getElementById("#canvas");
|
|
|
|
|
|
2019-07-04 11:45:10 +00:00
|
|
|
function dispatchOne(eventName, x, y) {
|
|
|
|
|
let ev = new MouseEvent(eventName, {
|
2019-07-04 11:12:53 +00:00
|
|
|
clientX: x,
|
|
|
|
|
clientY: y,
|
|
|
|
|
screenX: x,
|
|
|
|
|
screenY: y,
|
|
|
|
|
button: 0,
|
|
|
|
|
buttons: 1,
|
|
|
|
|
bubbles: true,
|
|
|
|
|
});
|
|
|
|
|
|
2019-07-04 11:45:10 +00:00
|
|
|
if (DISPATCH_ON_CANVAS) {
|
|
|
|
|
$canvas.dispatchEvent(ev);
|
|
|
|
|
} else {
|
|
|
|
|
document.dispatchEvent(ev);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for (let name of ['mousemove', 'mousedown', 'mouseup', 'click']) {
|
|
|
|
|
$canvas.addEventListener(name, function(event) {
|
|
|
|
|
console.log(name, event);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let x, y;
|
|
|
|
|
if (DISPATCH_ON_CANVAS) {
|
|
|
|
|
x = ($canvas.width - BOX_WIDTH) / 2; // box x offset
|
|
|
|
|
y = $canvas.height;
|
|
|
|
|
} else {
|
|
|
|
|
x = Math.max(0, (window.innerWidth - $canvas.width) / 2); // $canvas x offset
|
|
|
|
|
x = x + ($canvas.width - BOX_WIDTH) / 2; // box x offset
|
|
|
|
|
|
|
|
|
|
y = (window.innerHeight - $canvas.height) / 2; // $canvas y offset
|
|
|
|
|
y = y + $canvas.height; // $canvas bottom
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
x = x + (BOX_WIDTH - START_BUTTON_WIDTH) / 2; // left of start button
|
|
|
|
|
x = x + START_BUTTON_WIDTH / 2; // ~ middle of start button x
|
|
|
|
|
|
|
|
|
|
y = y - BUTTON_Y_OFFSET_FROM_BOTTOM; // start button bottom
|
|
|
|
|
y = y - START_BUTTON_HEIGHT / 2; // ~ middle of start button y
|
|
|
|
|
|
|
|
|
|
if (TEST_MODE) {
|
|
|
|
|
for (let eventName of ['mousedown', 'mousemove', 'mouseup', 'click']) {
|
|
|
|
|
for (let x = 0; x < $canvas.width; x += 10) {
|
|
|
|
|
for (let y = 0; y < $canvas.height; y += 10) {
|
|
|
|
|
dispatchOne(eventName, x, y);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
console.log(`done with ${eventName}!`);
|
|
|
|
|
}
|
|
|
|
|
console.log('done with all click types')
|
|
|
|
|
} else {
|
|
|
|
|
console.warn(`clicking x=${x}, y=${y}!`);
|
|
|
|
|
dispatchOne('mousedown', x, y);
|
2019-07-04 11:12:53 +00:00
|
|
|
}
|
|
|
|
|
}, WAIT_TIMEOUT);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
2019-07-04 11:10:59 +00:00
|
|
|
</body>
|
2019-07-04 11:12:53 +00:00
|
|
|
</html>
|
