281 lines
12 KiB
JavaScript
281 lines
12 KiB
JavaScript
var unityDiagnostics = (function () {
|
|
var overlayOpen = false;
|
|
var intervalId = 0;
|
|
var graph_stats;
|
|
function openDiagnosticsDiv(GetMetricsInfoFunc) {
|
|
// if not open, open!
|
|
if (!overlayOpen) {
|
|
var diagnostics_div = document.getElementById('diagnostics-overlay');
|
|
if (!diagnostics_div) {
|
|
createDiagnosticsLayout();
|
|
}
|
|
|
|
var totalJSMemDiv = document.getElementById("jsTotalMem");
|
|
var usedJSMemDiv = document.getElementById("jsUsedMem");
|
|
var totalWASMHeapDiv = document.getElementById("wasmTotalMem");
|
|
var usedWASMHeapDiv = document.getElementById("wasmUsedMem");
|
|
var pageLoadTimeDiv = document.getElementById("pageLoadTime");
|
|
var pageLoadTimeToFrame1Div = document.getElementById("pageLoadTimeToFrame1");
|
|
var movingAverageFpsDiv = document.getElementById("movingAverageFps");
|
|
var fpsDiv = document.getElementById("fps");
|
|
var numJankedFramesDiv = document.getElementById("numJankedFrames");
|
|
var webAssemblyStartupTimeDiv = document.getElementById("webAssemblyStartupTime");
|
|
var codeDownloadTimeDiv = document.getElementById("codeDownloadTime");
|
|
var gameStartupTimeDiv = document.getElementById("gameStartupTime");
|
|
var assetLoadTimeDiv = document.getElementById("assetLoadTime");
|
|
|
|
intervalId = setInterval(updateWebMetricInfo, 1000);
|
|
document.getElementById("diagnostics-overlay").style.height = "20%";
|
|
diagnostics_icon.style.filter = "grayscale(1)";
|
|
overlayOpen = true;
|
|
}
|
|
|
|
function createDiagnosticsLayout() {
|
|
diagnostics_div = document.createElement("div");
|
|
diagnostics_div.id = "diagnostics-overlay";
|
|
|
|
document.body.appendChild(diagnostics_div);
|
|
|
|
var diagnostics_btn = document.createElement("div");
|
|
diagnostics_btn.id = "diagnostics-btn";
|
|
diagnostics_btn.innerHTML = "X";
|
|
diagnostics_btn.addEventListener("click", closeOverlay);
|
|
|
|
diagnostics_div.appendChild(diagnostics_btn);
|
|
|
|
var diagnostics_summary = document.createElement("div");
|
|
diagnostics_summary.id = "diagnostics-summary";
|
|
|
|
var diagnostics_graph = document.createElement("div");
|
|
diagnostics_graph.id = "diagnostics-graph";
|
|
|
|
diagnostics_div.appendChild(diagnostics_summary);
|
|
diagnostics_div.appendChild(diagnostics_graph);
|
|
|
|
createDiagnosticsRow(diagnostics_summary, "Total JS Memory", "jsTotalMem", false);
|
|
createDiagnosticsRow(diagnostics_summary, "Used JS Memory", "jsUsedMem", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Total WASM Heap", "wasmTotalMem", false);
|
|
createDiagnosticsRow(diagnostics_summary, "Used WASM Heap", "wasmUsedMem", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Page Load Time To First Frame", "pageLoadTimeToFrame1", false);
|
|
createDiagnosticsRow(diagnostics_summary, "Page Load Time", "pageLoadTime", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Code Download Time", "codeDownloadTime", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Load time of asset file(.data)", "assetLoadTime", true);
|
|
createDiagnosticsRow(diagnostics_summary, "WebAssembly Startup Time", "webAssemblyStartupTime", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Game Startup Time", "gameStartupTime", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Average FPS (10 seconds)", "movingAverageFps", false);
|
|
createDiagnosticsRow(diagnostics_summary, "Current frames per second", "fps", true);
|
|
createDiagnosticsRow(diagnostics_summary, "Number of Frame Stalls", "numJankedFrames", false);
|
|
|
|
graph_stats = new createGraph();
|
|
diagnostics_graph.appendChild(graph_stats.graph_dom);
|
|
}
|
|
|
|
function createDiagnosticsRow(diagnostics_summary, labelInnerHtml, spanId, indent) {
|
|
var data_row = document.createElement("div");
|
|
data_row.className = "data-row";
|
|
diagnostics_summary.appendChild(data_row);
|
|
|
|
var label = document.createElement("div");
|
|
label.className = "label";
|
|
|
|
var data = document.createElement("div");
|
|
data.className = "data";
|
|
data_row.appendChild(data);
|
|
|
|
var span = document.createElement("span");
|
|
data.appendChild(span);
|
|
|
|
label.innerHTML = labelInnerHtml;
|
|
span.id = spanId;
|
|
if (indent) {
|
|
var indent = document.createElement("div");
|
|
indent.className = "indented";
|
|
data_row.appendChild(indent);
|
|
indent.appendChild(label);
|
|
} else {
|
|
data_row.append(label);
|
|
}
|
|
data_row.append(data);
|
|
}
|
|
|
|
function updateWebMetricInfo(){
|
|
var metricsInfo = GetMetricsInfoFunc();
|
|
if (isNaN(metricsInfo.totalJSHeapSize) && isNaN(metricsInfo.usedJSHeapSize)) {
|
|
totalJSMemDiv.textContent = "N/A";
|
|
usedJSMemDiv.textContent = "N/A";
|
|
} else {
|
|
totalJSMemDiv.textContent = formatBytes(metricsInfo.totalJSHeapSize);
|
|
usedJSMemDiv.textContent = formatBytes(metricsInfo.usedJSHeapSize);
|
|
}
|
|
totalWASMHeapDiv.textContent = formatBytes(metricsInfo.totalWASMHeapSize);
|
|
usedWASMHeapDiv.textContent = formatBytes(metricsInfo.usedWASMHeapSize);
|
|
pageLoadTimeDiv.textContent = (metricsInfo.pageLoadTime/1000).toFixed(2) + ' sec';
|
|
pageLoadTimeToFrame1Div.textContent = (metricsInfo.pageLoadTimeToFrame1/1000).toFixed(2) + ' sec';
|
|
assetLoadTimeDiv.textContent = (metricsInfo.assetLoadTime/1000).toFixed(2) + ' sec';
|
|
webAssemblyStartupTimeDiv.textContent = (metricsInfo.webAssemblyStartupTime/1000).toFixed(2) + ' sec';
|
|
codeDownloadTimeDiv.textContent = (metricsInfo.codeDownloadTime/1000).toFixed(2) + ' sec';
|
|
gameStartupTimeDiv.textContent = (metricsInfo.gameStartupTime/1000).toFixed(2) + ' sec';
|
|
movingAverageFpsDiv.textContent = (metricsInfo.movingAverageFps).toFixed(2);
|
|
fpsDiv.textContent = (metricsInfo.fps).toFixed(2);
|
|
numJankedFramesDiv.textContent = metricsInfo.numJankedFrames;
|
|
|
|
graph_stats.plotGraph(metricsInfo, true);
|
|
}
|
|
|
|
function closeOverlay() {
|
|
clearInterval(intervalId);
|
|
intervalId = 0;
|
|
document.getElementById("diagnostics-overlay").style.height = "0px";
|
|
diagnostics_icon.style.filter = "grayscale(0)";
|
|
overlayOpen = false;
|
|
}
|
|
|
|
function formatNumber(num) {
|
|
num = num || 0;
|
|
var num_str = num.toString();
|
|
if (num >= 1000) return num_str.substr(0, 4);
|
|
else return num_str.substr(0, 5);
|
|
}
|
|
|
|
function formatBytes(bytes) {
|
|
if (bytes >= 1024 * 1024 * 1024) return formatNumber(bytes / (1024 * 1024 * 1024)) + '\xa0GB';
|
|
else if (bytes >= 1024 * 1024) return formatNumber(bytes / (1024 * 1024)) + '\xa0MB';
|
|
else if (bytes >= 1024) return formatNumber(bytes / 1024) + '\xa0KB';
|
|
else return formatNumber(bytes) + ' B';
|
|
}
|
|
|
|
function formatBytesInfo(bytes) {
|
|
if (bytes >= 1024 * 1024 * 1024) return {
|
|
bytesValue: formatNumber(bytes / (1024 * 1024 * 1024)),
|
|
unitMeasure: 'GB'
|
|
};
|
|
else if (bytes >= 1024 * 1024) return {
|
|
bytesValue: formatNumber(bytes / (1024 * 1024)),
|
|
unitMeasure: 'MB'
|
|
};
|
|
else if (bytes >= 1024) return {
|
|
bytesValue: formatNumber(bytes / 1024),
|
|
unitMeasure: 'KB'
|
|
};
|
|
else return {
|
|
bytesValue: formatNumber(bytes),
|
|
unitMeasure: 'B'
|
|
};
|
|
}
|
|
|
|
function GraphPanel(name, fontColor, backgroundColor) {
|
|
var min = Infinity, max = 0, round = Math.round;
|
|
|
|
var pixel_ratio = round( window.devicePixelRatio || 1);
|
|
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
|
pixel_ratio = 1;
|
|
}
|
|
|
|
var canvas_width = 250 * pixel_ratio, canvas_height = 180 * pixel_ratio,
|
|
textname_xpos = 6 * pixel_ratio, textname_ypos = 6 * pixel_ratio,
|
|
graph_area_xpos = 8 * pixel_ratio, graph_area_ypos = 30 * pixel_ratio,
|
|
graph_area_width = 234 * pixel_ratio, graph_area_height = 140 * pixel_ratio;
|
|
|
|
var graph_canvas = document.createElement('canvas');
|
|
graph_canvas.id = "diagnostics-graph-canvas";
|
|
graph_canvas.width = canvas_width;
|
|
graph_canvas.height = canvas_height;
|
|
|
|
var graph_ctx = graph_canvas.getContext('2d');
|
|
graph_ctx.font = 'bold ' + ( 16 * pixel_ratio) + 'px Helvetica,Arial,sans-serif';
|
|
graph_ctx.textBaseline = 'top';
|
|
|
|
graph_ctx.fillStyle = backgroundColor;
|
|
graph_ctx.fillRect( 0, 0, canvas_width, canvas_height);
|
|
|
|
graph_ctx.fillStyle = fontColor;
|
|
graph_ctx.fillText( name, textname_xpos, textname_ypos);
|
|
graph_ctx.fillRect( graph_area_xpos, graph_area_ypos, graph_area_width, graph_area_height);
|
|
|
|
|
|
graph_ctx.fillStyle = backgroundColor;
|
|
graph_ctx.globalAlpha = 0.5;
|
|
graph_ctx.fillRect( graph_area_xpos, graph_area_ypos, graph_area_width, graph_area_height);
|
|
|
|
return {
|
|
graph_dom: graph_canvas,
|
|
update: function (value, unitMeasure) {
|
|
min = Math.min(min, value);
|
|
max = Math.max(max, value);
|
|
|
|
graph_ctx.fillStyle = backgroundColor;
|
|
graph_ctx.globalAlpha = 1;
|
|
graph_ctx.fillRect(0, 0, canvas_width, graph_area_ypos);
|
|
|
|
graph_ctx.fillStyle = fontColor;
|
|
graph_ctx.textAlign = 'left';
|
|
graph_ctx.fillText(name, textname_xpos, textname_ypos);
|
|
|
|
graph_ctx.textAlign = 'right';
|
|
if(unitMeasure){
|
|
graph_ctx.fillText(formatNumber(value) + unitMeasure + ' (' + round( min ) + '-' + round( max ) + ')', canvas_width-10, textname_ypos);
|
|
}
|
|
else{
|
|
graph_ctx.fillText(formatNumber(value) + ' (' + round( min ) + '-' + round( max ) + ')', canvas_width-10, textname_ypos);
|
|
}
|
|
|
|
graph_ctx.drawImage(graph_canvas, graph_area_xpos + pixel_ratio, graph_area_ypos, graph_area_width - pixel_ratio, graph_area_height, graph_area_xpos, graph_area_ypos, graph_area_width - pixel_ratio, graph_area_height);
|
|
|
|
graph_ctx.fillRect(graph_area_xpos + graph_area_width - pixel_ratio, graph_area_ypos, pixel_ratio, graph_area_height);
|
|
|
|
graph_ctx.fillStyle = backgroundColor;
|
|
graph_ctx.globalAlpha = 0.5;
|
|
graph_ctx.fillRect(graph_area_xpos + graph_area_width - pixel_ratio, graph_area_ypos, pixel_ratio, round((1 - (value / max)) * graph_area_height));
|
|
}
|
|
};
|
|
}
|
|
|
|
function createGraph(){
|
|
var numGraphPanel = 4;
|
|
var graphContainer = document.createElement('div');
|
|
if(graphContainer === undefined) return;
|
|
|
|
graphContainer.style.cssText = 'cursor:pointer;';
|
|
graphContainer.style.display = 'contents';
|
|
|
|
|
|
function addGraphPanel(graph_panel) {
|
|
graphContainer.appendChild(graph_panel.graph_dom);
|
|
return graph_panel;
|
|
}
|
|
|
|
function showGraphPanel(id) {
|
|
graphContainer.children[id].style.margin = '1em';
|
|
}
|
|
var fpsGraphPanel = addGraphPanel(new GraphPanel('FPS', '#0ff', '#002'));
|
|
var movingAvgFpsGraphPanel = addGraphPanel(new GraphPanel('Average FPS', '#0f0', '#020'));
|
|
var usedJsMemGraphPanel = addGraphPanel(new GraphPanel('Used JS Mem', '#f60', '#201'));
|
|
var usedWasmMemGraphPanel = addGraphPanel(new GraphPanel('Used Wasm', '#ff0', '#020'));
|
|
|
|
for(var i=0;i<numGraphPanel;i++){
|
|
showGraphPanel(i);
|
|
}
|
|
|
|
return {
|
|
graph_dom: graphContainer,
|
|
plotGraph: function (metrics) {
|
|
fpsGraphPanel.update(metrics.fps);
|
|
movingAvgFpsGraphPanel.update(metrics.movingAverageFps);
|
|
|
|
var formattedBytesInfo = formatBytesInfo(metrics.usedWASMHeapSize);
|
|
usedWasmMemGraphPanel.update(formattedBytesInfo.bytesValue, formattedBytesInfo.unitMeasure);
|
|
if(!isNaN(metrics.usedJSHeapSize)){
|
|
formattedBytesInfo = formatBytesInfo(metrics.usedJSHeapSize);
|
|
usedJsMemGraphPanel.update(formattedBytesInfo.bytesValue, formattedBytesInfo.unitMeasure);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
return {
|
|
openDiagnosticsDiv: openDiagnosticsDiv
|
|
};
|
|
|
|
})();
|