Phireh/cpp-raytracer
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add profiling with Remotery

Browse source
This commit is contained in:
David 2021-08-24 20:55:39 +02:00
commit 6331a2bf79
50 changed files with 16864 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

389
vis/Code/TimelineRow.js Normal file
View file

@ -0,0 +1,389 @@
TimelineRow = (function()
{
const RowLabelTemplate = `
<div class='TimelineRow'>
<div class='TimelineRowCheck TimelineBox'>
<input class='TimelineRowCheckbox' type='checkbox' />
</div>
<div class='TimelineRowExpand TimelineBox NoSelect'>
<div class='TimelineRowExpandButton'>+</div>
</div>
<div class='TimelineRowExpand TimelineBox NoSelect'>
<div class='TimelineRowExpandButton'>-</div>
</div>
<div class='TimelineRowLabel TimelineBox'></div>
<div style="clear:left"></div>
</div>`
var CANVAS_BORDER = 1;
var SAMPLE_HEIGHT = 16;
var SAMPLE_BORDER = 1;
var SAMPLE_Y_SPACING = SAMPLE_HEIGHT + SAMPLE_BORDER * 2;
function TimelineRow(gl, name, timeline, frame_history, check_handler)
{
this.Name = name;
this.timeline = timeline;
// Create the row HTML and add to the parent
this.LabelContainerNode = DOM.Node.CreateHTML(RowLabelTemplate);
const label_node = DOM.Node.FindWithClass(this.LabelContainerNode, "TimelineRowLabel");
label_node.innerHTML = name;
timeline.TimelineLabels.Node.appendChild(this.LabelContainerNode);
// All sample view windows visible by default
const checkbox_node = DOM.Node.FindWithClass(this.LabelContainerNode, "TimelineRowCheckbox");
checkbox_node.checked = true;
checkbox_node.addEventListener("change", (e) => check_handler(name, e));
// Manually hook-up events to simulate div:active
// I can't get the equivalent CSS to work in Firefox, so...
const expand_node_0 = DOM.Node.FindWithClass(this.LabelContainerNode, "TimelineRowExpand", 0);
const expand_node_1 = DOM.Node.FindWithClass(this.LabelContainerNode, "TimelineRowExpand", 1);
const inc_node = DOM.Node.FindWithClass(expand_node_0, "TimelineRowExpandButton");
const dec_node = DOM.Node.FindWithClass(expand_node_1, "TimelineRowExpandButton");
inc_node.addEventListener("mousedown", ExpandButtonDown);
inc_node.addEventListener("mouseup", ExpandButtonUp);
inc_node.addEventListener("mouseleave", ExpandButtonUp);
dec_node.addEventListener("mousedown", ExpandButtonDown);
dec_node.addEventListener("mouseup", ExpandButtonUp);
dec_node.addEventListener("mouseleave", ExpandButtonUp);
// Pressing +/i increases/decreases depth
inc_node.addEventListener("click", () => this.IncDepth());
dec_node.addEventListener("click", () => this.DecDepth());
// Frame index to start at when looking for first visible sample
this.StartFrameIndex = 0;
this.FrameHistory = frame_history;
this.VisibleFrames = [ ];
this.VisibleTimeRange = null;
this.Depth = 1;
// Currently selected sample
this.SelectSampleInfo = null;
// Create WebGL sample buffers
this.sampleBuffer = new glDynamicBuffer(gl, gl.FLOAT, 4, 8);
this.colourBuffer = new glDynamicBuffer(gl, gl.FLOAT, 4, 8);
// Create a vertex array for these buffers
this.vertexArrayObject = gl.createVertexArray();
gl.bindVertexArray(this.vertexArrayObject);
this.sampleBuffer.BindAsInstanceAttribute(timeline.Program, "inSample_TextOffset");
this.colourBuffer.BindAsInstanceAttribute(timeline.Program, "inColour_TextLength");
// An initial SetSize call to restore containers to their original size after traces were loaded prior to this
this.SetSize();
}
TimelineRow.prototype.SetSize = function()
{
this.LabelContainerNode.style.height = CANVAS_BORDER + SAMPLE_BORDER + SAMPLE_Y_SPACING * this.Depth;
}
TimelineRow.prototype.SetVisibleFrames = function(time_range)
{
// Clear previous visible list
this.VisibleFrames = [ ];
if (this.FrameHistory.length == 0)
return;
// Store a copy of the visible time range rather than referencing it
// This prevents external modifications to the time range from affecting rendering/selection
time_range = time_range.Clone();
this.VisibleTimeRange = time_range;
// The frame history can be reset outside this class
// This also catches the overflow to the end of the frame list below when a thread stops sending samples
var max_frame = Math.max(this.FrameHistory.length - 1, 0);
var start_frame_index = Math.min(this.StartFrameIndex, max_frame);
// First do a back-track in case the time range moves negatively
while (start_frame_index > 0)
{
var frame = this.FrameHistory[start_frame_index];
if (time_range.Start_us > frame.StartTime_us)
break;
start_frame_index--;
}
// Then search from this point for the first visible frame
while (start_frame_index < this.FrameHistory.length)
{
var frame = this.FrameHistory[start_frame_index];
if (frame.EndTime_us > time_range.Start_us)
break;
start_frame_index++;
}
// Gather all frames up to the end point
this.StartFrameIndex = start_frame_index;
for (var i = start_frame_index; i < this.FrameHistory.length; i++)
{
var frame = this.FrameHistory[i];
if (frame.StartTime_us > time_range.End_us)
break;
this.VisibleFrames.push(frame);
}
}
TimelineRow.prototype.DrawSampleHighlight = function(sample, depth, colour, y_scroll_offset)
{
if (depth <= this.Depth)
{
// Determine pixel range of the sample
var x0 = this.VisibleTimeRange.PixelOffset(sample.us_start);
var x1 = x0 + this.VisibleTimeRange.PixelSize(sample.us_length);
var offset_x = x0;
var offset_y = this.LabelContainerNode.offsetTop + 2 + (depth - 1) * SAMPLE_Y_SPACING + y_scroll_offset;
var size_x = x1 - x0;
var size_y = SAMPLE_HEIGHT;
// Normal rendering
var ctx = this.timeline.drawContext;
ctx.lineWidth = 2;
ctx.strokeStyle = colour;
ctx.strokeRect(offset_x + 2.5, offset_y - 0.5, size_x - 3, size_y + 1);
}
}
TimelineRow.prototype.DisplayHeight = function()
{
return this.LabelContainerNode.clientHeight;
}
TimelineRow.prototype.YOffset = function()
{
return this.LabelContainerNode.offsetTop;
}
TimelineRow.prototype.DrawBackground = function(hover_sample_info, y_scroll_offset)
{
// Fill box that shows the boundary between thread rows
this.timeline.drawContext.fillStyle = "#444"
var b = CANVAS_BORDER;
this.timeline.drawContext.fillRect(b, this.YOffset() + y_scroll_offset + b, this.timeline.drawCanvas.width - b * 2, this.DisplayHeight() - b * 2);
// Draw the selected sample for this row
if (this.SelectSampleInfo != null)
{
const sample = this.SelectSampleInfo[1];
const depth = this.SelectSampleInfo[2];
this.DrawSampleHighlight(sample, depth, "#FF0000", y_scroll_offset);
}
// Draw the current hover sample if it's over this row
if (hover_sample_info != null && hover_sample_info[3] == this)
{
const sample = hover_sample_info[1];
const depth = hover_sample_info[2];
const thread_row = hover_sample_info[3];
this.DrawSampleHighlight(sample, depth, "#FFFFFF", y_scroll_offset);
}
}
TimelineRow.prototype.Draw = function(gl, draw_text, y_scroll_offset)
{
let samples_per_depth = [];
// Gather all root samples in the visible frame set
for (var i in this.VisibleFrames)
{
var frame = this.VisibleFrames[i];
GatherSamples(this, frame.Samples, 1, draw_text, samples_per_depth);
}
// Count number of samples required
let nb_samples = 0;
for (const samples_this_depth of samples_per_depth)
{
nb_samples += samples_this_depth.length;
}
// Resize buffers to match any new count of samples
if (nb_samples > this.sampleBuffer.nbEntries)
{
this.sampleBuffer.ResizeToFitNextPow2(nb_samples);
this.colourBuffer.ResizeToFitNextPow2(nb_samples);
// Have to create a new VAO for these buffers
this.vertexArrayObject = gl.createVertexArray();
gl.bindVertexArray(this.vertexArrayObject);
this.sampleBuffer.BindAsInstanceAttribute(this.timeline.Program, "inSample_TextOffset");
this.colourBuffer.BindAsInstanceAttribute(this.timeline.Program, "inColour_TextLength");
}
// CPU write destination for samples
let cpu_samples = this.sampleBuffer.cpuArray;
let cpu_colours = this.colourBuffer.cpuArray;
let sample_pos = 0;
const empty_text_entry = {
offset: 0,
length: 1,
};
// Copy samples to the CPU buffer
// TODO(don): Use a ring buffer instead and take advantage of timeline scrolling adding new samples at the beginning/end
for (let depth = 0; depth < samples_per_depth.length; depth++)
{
let samples_this_depth = samples_per_depth[depth];
for (const sample of samples_this_depth)
{
const text_entry = sample.name.textEntry != null ? sample.name.textEntry : empty_text_entry;
cpu_samples[sample_pos + 0] = sample.us_start;
cpu_samples[sample_pos + 1] = sample.us_length;
cpu_samples[sample_pos + 2] = depth;
cpu_samples[sample_pos + 3] = text_entry.offset;
cpu_colours[sample_pos + 0] = sample.rgbColour[0];
cpu_colours[sample_pos + 1] = sample.rgbColour[1];
cpu_colours[sample_pos + 2] = sample.rgbColour[2];
cpu_colours[sample_pos + 3] = text_entry.length;
sample_pos += 4;
}
}
// Upload to GPU
this.sampleBuffer.UploadData();
this.colourBuffer.UploadData();
this.timeline.textBuffer.UploadData();
// Set row parameters
glSetUniform(gl, this.timeline.Program, "inRow.yOffset", this.YOffset() + y_scroll_offset);
gl.bindVertexArray(this.vertexArrayObject);
gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, nb_samples);
}
function GatherSamples(self, samples, depth, draw_text, samples_per_depth)
{
// Ensure there's enough entries for each depth
while (depth >= samples_per_depth.length)
{
samples_per_depth.push([]);
}
let samples_this_depth = samples_per_depth[depth];
for (var i in samples)
{
var sample = samples[i];
samples_this_depth.push(sample);
if (depth < self.Depth && sample.children != null)
GatherSamples(self, sample.children, depth + 1, draw_text, samples_per_depth);
}
}
TimelineRow.prototype.SetSelectSample = function(sample_info)
{
this.SelectSampleInfo = sample_info;
}
function ExpandButtonDown(evt)
{
var node = DOM.Event.GetNode(evt);
DOM.Node.AddClass(node, "TimelineRowExpandButtonActive");
}
function ExpandButtonUp(evt)
{
var node = DOM.Event.GetNode(evt);
DOM.Node.RemoveClass(node, "TimelineRowExpandButtonActive");
}
TimelineRow.prototype.IncDepth = function()
{
this.Depth++;
this.SetSize();
this.timeline.DrawAllRows();
}
TimelineRow.prototype.DecDepth = function()
{
if (this.Depth > 1)
{
this.Depth--;
this.SetSize();
// Trigger scroll handling to ensure reducing the depth reduces the display height
this.timeline.ScrollVertically(0);
this.timeline.DrawAllRows();
}
}
TimelineRow.prototype.GetSampleAtPosition = function(time_us, mouse_y)
{
// Calculate depth of the mouse cursor
var depth = Math.min(Math.floor(mouse_y / SAMPLE_Y_SPACING) + 1, this.Depth);
// Search for the first frame to intersect this time
for (var i in this.VisibleFrames)
{
// Use the sample's closed interval to detect hits.
// Rendering of samples ensures a sample is never smaller than one pixel so that all samples always draw, irrespective
// of zoom level. If a half-open interval is used then some visible samples will be unselectable due to them being
// smaller than a pixel. This feels pretty odd and the closed interval fixes this feeling well.
// TODO(don): There are still inconsistencies, need to shift to pixel range checking to match exactly.
var frame = this.VisibleFrames[i];
if (time_us >= frame.StartTime_us && time_us <= frame.EndTime_us)
{
var found_sample = FindSample(this, frame.Samples, time_us, depth, 1);
if (found_sample != null)
return [ frame, found_sample[0], found_sample[1], this ];
}
}
return null;
}
function FindSample(self, samples, time_us, target_depth, depth)
{
for (var i in samples)
{
var sample = samples[i];
if (depth == target_depth)
{
if (time_us >= sample.us_start && time_us < sample.us_start + sample.us_length)
return [ sample, depth ];
}
else if (depth < target_depth && sample.children != null)
{
var found_sample = FindSample(self, sample.children, time_us, target_depth, depth + 1);
if (found_sample != null)
return found_sample;
}
}
return null;
}
return TimelineRow;
})();