test/index.html

203 lines
8.1 KiB
HTML
Raw Normal View History

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;
//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 = true;
2019-07-04 11:12:53 +00:00
setTimeout(function() {
let $canvas = document.getElementById("#canvas");
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,
});
if (DISPATCH_ON_CANVAS) {
$canvas.dispatchEvent(ev);
} else {
document.dispatchEvent(ev);
}
}
//$canvas.addEventListener('mousedown', function(event) {
// console.log(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>