");
- $('#timelines').append(g_canvas.canvas_zoom);
- $('#timelines').append(g_canvas.text_output);
-}
-
-function update_display(report, range)
-{
- let data = report.data();
- let raw_data = report.raw_data();
- let main_data = data.threads[g_main_thread];
-
- rebuild_canvases(raw_data);
-
- if (range.seconds)
- {
- range.tmax = main_data.frames[main_data.frames.length-1].t1;
- range.tmin = main_data.frames[main_data.frames.length-1].t1-range.seconds;
- }
- else if (range.frames)
- {
- range.tmax = main_data.frames[main_data.frames.length-1].t1;
- range.tmin = main_data.frames[main_data.frames.length-1-range.frames].t0;
- }
-
- $(g_canvas.text_output).empty();
-
- display_frames(data.threads[g_main_thread], g_canvas.canvas_frames, range);
- display_events(data.threads[g_main_thread], g_canvas.canvas_frames, range);
-
- set_frames_zoom_handlers(report, g_canvas.canvas_frames);
- set_tooltip_handlers(g_canvas.canvas_frames);
-
- $(g_canvas.canvas_zoom).unbind();
-
- set_zoom_handlers(data.threads[g_main_thread], data.threads[g_main_thread], g_canvas.threads[g_main_thread], g_canvas.canvas_zoom);
- set_tooltip_handlers(data.canvas_zoom);
-
- for (var i = 0; i < data.threads.length; i++)
- {
- $(g_canvas.threads[i]).unbind();
-
- let events = slice_intervals(data.threads[i], range);
-
- display_hierarchy(data.threads[i], events, g_canvas.threads[i], {});
- set_zoom_handlers(data.threads[i], events, g_canvas.threads[i], g_canvas.canvas_zoom);
- set_tooltip_handlers(g_canvas.threads[i]);
- };
-}
-outInterface.update_display = update_display;
-
-function display_frames(data, canvas, range)
-{
- canvas._tooltips = [];
-
- var ctx = canvas.getContext('2d');
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.save();
-
- var xpadding = 8;
- var padding_top = 40;
- var width = canvas.width - xpadding*2;
- var height = canvas.height - padding_top - 4;
-
- var tmin = data.tmin;
- var tmax = data.tmax;
- var dx = width / (tmax-tmin);
-
- canvas._zoomData = {
- 'x_to_t': x => tmin + (x - xpadding) / dx,
- 't_to_x': t => (t - tmin) * dx + xpadding
- };
-
- // log 100 scale, skip < 15 ms (60fps)
- var scale = x => 1 - Math.max(0, Math.log(1 + (x-15)/10) / Math.log(100));
-
- ctx.strokeStyle = 'rgb(0, 0, 0)';
- ctx.fillStyle = 'rgb(255, 255, 255)';
- for (var i = 0; i < data.frames.length; ++i)
- {
- var frame = data.frames[i];
-
- var duration = frame.t1 - frame.t0;
- var x0 = xpadding + dx*(frame.t0 - tmin);
- var x1 = x0 + dx*duration;
- var y1 = canvas.height;
- var y0 = y1 * scale(duration*1000);
-
- ctx.beginPath();
- ctx.rect(x0, y0, x1-x0, y1-y0);
- ctx.stroke();
-
- canvas._tooltips.push({
- 'x0': x0, 'x1': x1,
- 'y0': y0, 'y1': y1,
- 'text': function(frame, duration) { return function() {
- var t = 'Frame ';
- t += 'Length: ' + time_label(duration) + ' ';
- if (frame.attrs)
- {
- frame.attrs.forEach(function(attr)
- {
- t += attr + ' ';
- });
- }
- return t;
- }} (frame, duration)
- });
- }
-
- [16, 33, 200, 500].forEach(function(t)
- {
- var y1 = canvas.height;
- var y0 = y1 * scale(t);
- var y = Math.floor(y0) + 0.5;
-
- ctx.beginPath();
- ctx.moveTo(xpadding, y);
- ctx.lineTo(canvas.width - xpadding, y);
- ctx.strokeStyle = 'rgb(255, 0, 0)';
- ctx.stroke();
- ctx.fillStyle = 'rgb(255, 0, 0)';
- ctx.fillText(t+'ms', 0, y-2);
- });
-
- ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
- ctx.fillStyle = 'rgba(128, 128, 255, 0.2)';
- ctx.beginPath();
- ctx.rect(xpadding + dx*(range.tmin - tmin), 0, dx*(range.tmax - range.tmin), canvas.height);
- ctx.fill();
- ctx.stroke();
-
- ctx.restore();
-}
-outInterface.display_frames = display_frames;
-
-function display_events(data, canvas)
-{
- var ctx = canvas.getContext('2d');
- ctx.save();
-
- var x_to_time = canvas._zoomData.x_to_t;
- var time_to_x = canvas._zoomData.t_to_x;
-
- for (var i = 0; i < data.events.length; ++i)
- {
- var event = data.events[i];
-
- if (event.id == '__framestart')
- continue;
-
- if (event.id == 'gui event' && event.attrs && event.attrs[0] == 'type: mousemove')
- continue;
-
- var x = time_to_x(event.t);
- var y = 32;
-
- if (x < 2)
- continue;
-
- var x0 = x;
- var x1 = x;
- var y0 = y-4;
- var y1 = y+4;
-
- ctx.strokeStyle = 'rgb(255, 0, 0)';
- ctx.beginPath();
- ctx.moveTo(x0, y0);
- ctx.lineTo(x1, y1);
- ctx.stroke();
- canvas._tooltips.push({
- 'x0': x0, 'x1': x1,
- 'y0': y0, 'y1': y1,
- 'text': function(event) { return function() {
- var t = '' + event.id + ' ';
- if (event.attrs)
- {
- event.attrs.forEach(function(attr) {
- t += attr + ' ';
- });
- }
- return t;
- }} (event)
- });
- }
-
- ctx.restore();
-}
-outInterface.display_events = display_events;
-
-function display_hierarchy(main_data, data, canvas, range, zoom)
-{
- canvas._tooltips = [];
-
- var ctx = canvas.getContext('2d');
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- ctx.save();
-
- ctx.font = '12px sans-serif';
-
- var xpadding = 8;
- var padding_top = 40;
- var width = canvas.width - xpadding*2;
- var height = canvas.height - padding_top - 4;
-
- var tmin, tmax, start, end;
-
- if (range.tmin)
- {
- tmin = range.tmin;
- tmax = range.tmax;
- }
- else
- {
- tmin = data.tmin;
- tmax = data.tmax;
- }
-
- canvas._hierarchyData = { 'range': range, 'tmin': tmin, 'tmax': tmax };
-
- function time_to_x(t)
- {
- return xpadding + (t - tmin) / (tmax - tmin) * width;
- }
-
- function x_to_time(x)
- {
- return tmin + (x - xpadding) * (tmax - tmin) / width;
- }
-
- ctx.save();
- ctx.textAlign = 'center';
- ctx.strokeStyle = 'rgb(192, 192, 192)';
- ctx.beginPath();
- var precision = -3;
- while ((tmax-tmin)*Math.pow(10, 3+precision) < 25)
- ++precision;
- if (precision > 10)
- precision = 10;
- if (precision < 0)
- precision = 0;
- var ticks_per_sec = Math.pow(10, 3+precision);
- var major_tick_interval = 5;
-
- for (var i = 0; i < (tmax-tmin)*ticks_per_sec; ++i)
- {
- var major = (i % major_tick_interval == 0);
- var x = Math.floor(time_to_x(tmin + i/ticks_per_sec));
- ctx.moveTo(x-0.5, padding_top - (major ? 4 : 2));
- ctx.lineTo(x-0.5, padding_top + height);
- if (major)
- ctx.fillText((i*1000/ticks_per_sec).toFixed(precision), x, padding_top - 8);
- }
- ctx.stroke();
- ctx.restore();
-
- var BAR_SPACING = 16;
-
- for (var i = 0; i < data.intervals.length; ++i)
- {
- var interval = data.intervals[i];
-
- if (interval.tmax <= tmin || interval.tmin > tmax)
- continue;
-
- var x0 = Math.floor(time_to_x(interval.t0));
- var x1 = Math.floor(time_to_x(interval.t1));
-
- if (x1-x0 < 1)
- continue;
-
- var y0 = padding_top + interval.depth * BAR_SPACING;
- var y1 = y0 + BAR_SPACING;
-
- var label = interval.id;
- if (interval.attrs)
- {
- if (/^\d+$/.exec(interval.attrs[0]))
- label += ' ' + interval.attrs[0];
- else
- label += ' [...]';
- }
-
- ctx.fillStyle = interval.colour;
- ctx.strokeStyle = 'black';
- ctx.beginPath();
- ctx.rect(x0-0.5, y0-0.5, x1-x0, y1-y0);
- ctx.fill();
- ctx.stroke();
- ctx.fillStyle = 'black';
- ctx.fillText(label, x0+2, y0+BAR_SPACING-4, Math.max(1, x1-x0-4));
-
- canvas._tooltips.push({
- 'x0': x0, 'x1': x1,
- 'y0': y0, 'y1': y1,
- 'text': function(interval) { return function() {
- var t = '' + interval.id + ' ';
- t += 'Length: ' + time_label(interval.duration) + ' ';
- if (interval.attrs)
- {
- interval.attrs.forEach(function(attr) {
- t += attr + ' ';
- });
- }
- return t;
- }} (interval)
- });
-
- }
-
- for (var i = 0; i < main_data.frames.length; ++i)
- {
- var frame = main_data.frames[i];
-
- if (frame.t0 < tmin || frame.t0 > tmax)
- continue;
-
- var x = Math.floor(time_to_x(frame.t0));
-
- ctx.save();
- ctx.lineWidth = 3;
- ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
- ctx.beginPath();
- ctx.moveTo(x+0.5, 0);
- ctx.lineTo(x+0.5, canvas.height);
- ctx.stroke();
- ctx.fillText(((frame.t1 - frame.t0) * 1000).toFixed(0)+'ms', x+2, padding_top - 24);
- ctx.restore();
- }
-
- if (zoom)
- {
- var x0 = time_to_x(zoom.tmin);
- var x1 = time_to_x(zoom.tmax);
- ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
- ctx.fillStyle = 'rgba(128, 128, 255, 0.2)';
- ctx.beginPath();
- ctx.moveTo(x0+0.5, 0.5);
- ctx.lineTo(x1+0.5, 0.5);
- ctx.lineTo(x1+0.5 + 4, canvas.height-0.5);
- ctx.lineTo(x0+0.5 - 4, canvas.height-0.5);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- }
-
- ctx.restore();
-}
-outInterface.display_hierarchy = display_hierarchy;
-
-function set_frames_zoom_handlers(report, canvas0)
-{
- function do_zoom(report, event)
- {
- var zdata = canvas0._zoomData;
-
- var relativeX = event.pageX - this.offsetLeft;
- var relativeY = event.pageY - this.offsetTop;
-
- var width = relativeY / canvas0.height;
- width = width*width;
- width *= zdata.x_to_t(canvas0.width)/10;
-
- var tavg = zdata.x_to_t(relativeX);
- var tmax = tavg + width/2;
- var tmin = tavg - width/2;
- var range = {'tmin': tmin, 'tmax': tmax};
- update_display(report, range);
- }
-
- $(canvas0).unbind();
- $(canvas0).mousedown(function(event)
- {
- mouse_is_down = canvas0;
- do_zoom.call(this, report, event);
- });
- $(canvas0).mouseup(function(event)
- {
- mouse_is_down = null;
- });
- $(canvas0).mousemove(function(event)
- {
- if (mouse_is_down)
- do_zoom.call(this, report, event);
- });
-}
-
-function set_zoom_handlers(main_data, data, canvas0, canvas1)
-{
- function do_zoom(event)
- {
- var hdata = canvas0._hierarchyData;
-
- function x_to_time(x)
- {
- return hdata.tmin + x * (hdata.tmax - hdata.tmin) / canvas0.width;
- }
-
- var relativeX = event.pageX - this.offsetLeft;
- var relativeY = (event.pageY + this.offsetTop) / canvas0.height;
- relativeY = relativeY - 0.5;
- relativeY *= 5;
- relativeY *= relativeY;
- var width = relativeY / canvas0.height;
- width = width*width;
- width = 3 + width * x_to_time(canvas0.width)/10;
- var zoom = { tmin: x_to_time(relativeX-width/2), tmax: x_to_time(relativeX+width/2) };
- display_hierarchy(main_data, data, canvas0, hdata.range, zoom);
- display_hierarchy(main_data, data, canvas1, zoom, undefined);
- set_tooltip_handlers(canvas1);
- }
-
- $(canvas0).mousedown(function(event)
- {
- mouse_is_down = canvas0;
- do_zoom.call(this, event);
- });
- $(canvas0).mouseup(function(event)
- {
- mouse_is_down = null;
- });
- $(canvas0).mousemove(function(event)
- {
- if (mouse_is_down)
- do_zoom.call(this, event);
- });
-}
-
-return outInterface;
-})();
\ No newline at end of file
Index: source/tools/profiler2/ReportFrames.js
===================================================================
--- /dev/null
+++ source/tools/profiler2/ReportFrames.js
@@ -0,0 +1,135 @@
+// Copyright (C) 2019 Wildfire Games.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+export default {};
+
+import { get_color } from "./ReportColor.js"
+import { reports, current_report, current_thread } from "./profiler2.js"
+
+export function Frames(filters = undefined)
+{
+ return {
+ draw: (itemID) => draw(itemID, filters)
+ };
+}
+
+function draw(itemID, filters)
+{
+ let raw_data = reports[current_report].thread[current_thread].data;
+
+ // data is an array of Frames.
+ let dataStart = filters && filters.start ? filters.start : raw_data[0].start;
+ let dataEnd = filters && filters.end ? filters.end : raw_data[raw_data.length - 1].end;
+
+ let parent = document.getElementById(itemID);
+
+ let width = parent.clientWidth - 30;
+ let itemHeight = 25;
+ let height = itemHeight * reports[current_report].thread[current_thread].maxDepth + 50;
+ parent.style.height = height;
+
+ let maxItems = filters && filters.maxItems ? filters.maxItems : 4000;
+ let maxFrameItems = filters && filters.maxFrameItems ? filters.maxFrameItems : 500;
+ let totalItems = 0;
+
+ let data = raw_data.flatMap(frame => {
+ let out = [];
+
+ if (frame.end <= dataStart || frame.start >= dataEnd)
+ return out;
+
+ let items = 0;
+ for (let depth = 0; depth <= frame.maxDepth; ++depth)
+ for (let block of frame.blocksByDepth[depth])
+ {
+ if (block.end <= dataStart || block.start >= dataEnd)
+ continue;
+ out.push(block);
+ if (items++ > maxFrameItems || items > Math.max(3, maxItems - totalItems))
+ {
+ out.push({
+ start: block.end,
+ end: frame.end,
+ depth: block.depth,
+ name: "Skipped"
+ });
+ break;
+ }
+ }
+ totalItems += items;
+ return out;
+ });
+
+ let tooltip = d3.tip()
+ .attr("class", "frames-tooltip")
+ .html(a => a.name + " " + Math.round((a.end-a.start) * 1000000)/1000 + "ms" + " " + a.attribute);
+
+ let scale = d3.scaleLinear().domain([dataStart, dataEnd]).range([0, width]);
+
+ // Setup: create SVG element
+ let canvas = d3.select("#" + itemID).selectAll("svg").data([0]);
+ canvas = canvas.enter().append("svg")
+ .merge(canvas).call(tooltip).attr("width", width).attr("height", height)
+ ;
+
+ // Draw rectangles
+ let rects = canvas
+ .selectAll("rect")
+ .data(data, (item) => item.name + item.start);
+
+ rects.enter()
+ .append('rect')
+ .style("fill", a => get_color(a.name))
+ .style("stroke", "black")
+ .merge(rects)
+ .attr("x", a => scale(a.start))
+ .attr("y", a => a.depth * itemHeight)
+ .attr("width", a => scale(a.end) - scale(a.start))
+ .attr("height", a => itemHeight)
+ .on('mouseover', tooltip.show)
+ .on('mouseout', tooltip.hide)
+ .on('click', (a) => {
+ tooltip.hide();
+ let dur = (a.end - a.start) / 10.0;
+ draw(itemID, { start: a.start - dur, end: a.end + dur });
+ })
+ ;
+ rects.exit().remove();
+
+ // Draw labels.
+ let labels = canvas
+ .selectAll("text")
+ .data(data.filter(b => scale(b.end) - scale(b.start) > 2 * b.name.length), item => item.name + item.start);
+
+ labels.enter()
+ .append('text')
+ .attr("fill", "black")
+ .attr("dominant-baseline", "middle")
+ .attr("font-size", 9)
+ .attr("textLength", b => Math.min(7 * b.name.length, (scale(b.end) - scale(b.start)) * 0.9))
+ .attr("lengthAdjust", "spacingAndGlyphs")
+ .text(b => b.name)
+ .merge(labels)
+ .attr("x", a => scale(a.start))
+ .attr("y", a => a.depth * itemHeight + itemHeight/2)
+ ;
+ labels.exit().remove();
+
+}
Index: source/tools/profiler2/ReportTimeline.js
===================================================================
--- /dev/null
+++ source/tools/profiler2/ReportTimeline.js
@@ -0,0 +1,59 @@
+// Copyright (C) 2019 Wildfire Games.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+export default {};
+
+import { filter } from "./profiler2.js"
+import { reports, current_report } from "./profiler2.js"
+
+export function draw_timeline(itemID, thread)
+{
+ let chart = new CanvasJS.Chart(itemID, {
+ zoomEnabled: true,
+
+ axisX: {
+ visible: false,
+ },
+
+ axisY: {
+ title: "Time in ms",
+ minimum:0,
+ },
+
+ rangeChanged: (e) => filter({ start: e.axisX[0].viewportMinimum, end: e.axisX[0].viewportMaximum, thread: thread }),
+
+ data: [{
+ name: 'Frame Timeline',
+ type: 'stepArea',
+ click: (e) => {
+ filter({ start: e.dataPoint.x, end: e.dataPoint.x + e.dataPoint.z/1000.0, thread: thread });
+ },
+ dataPoints: reports[current_report].thread[thread].data.map(frame => ({
+ x: frame.start,
+ y: 1000*(frame.end - frame.start),
+ markerSize: 0,
+ //dataPointWidth: (frame.end - frame.start),
+ name: frame.frameID,
+ })),
+ toolTipContent: "Frame {name} {y}ms Click to graph this frame below.",
+ }]
+ });
+ chart.render();
+}
Index: source/tools/profiler2/index.html
===================================================================
--- /dev/null
+++ source/tools/profiler2/index.html
@@ -0,0 +1,167 @@
+
+
+0 A.D. profiler UI
+
+
+
+
+
+
+
+
+
Profiler2
+
Documentation is available here: https://trac.wildfiregames.com/wiki/Profiler2
+
Load JSON profiles using the file loader below. Multiple files may be loaded.
+ Clicking on a profile will switch to it.
+ NB: this requires a local server running, see run.sh in this very folder
+
+
+
+
+
+
Frame-by-frame details of profiled blocks.
+
Click on any block to zoom on it. Zoom through the timeline graphs above. Reset on the top-right above.
+
+
+
+
+
+
Cumulative time per frame
+
Drag-click to zoom. Click on a frame to highlight the frame timeline above.
+
+
+
Cumulative runtime per block
+
Use this tool to compare two profile reports. Drag-click to zoom. Click to highlight above.