From 77cf518cedd945784e666f00e0c1a865c630155c Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Tue, 30 Jul 2024 23:22:53 +0300 Subject: [PATCH] Move import to worker. Rasterize to single texture. Raster queue --- geometry.js | 193 ------------------------------ parse.js => import_worker.js | 220 ++++++++++++++++++++++++++++++++++- index.html | 3 +- index.js | 5 + input.js | 28 +++-- rasterizer.js | 33 +++++- render.js | 93 ++++++++++++++- 7 files changed, 362 insertions(+), 213 deletions(-) rename parse.js => import_worker.js (50%) diff --git a/geometry.js b/geometry.js index c69a0aa..1ab0134 100644 --- a/geometry.js +++ b/geometry.js @@ -1,196 +1,3 @@ -let colors = {}; -let rasterized = {}; - -// https://stackoverflow.com/a/17243070 -function hsv_to_rgb(h, s, v) { - let r, g, b; - - const i = Math.floor(h * 6); - const f = h * 6 - i; - const p = v * (1 - s); - const q = v * (1 - f * s); - const t = v * (1 - (1 - f) * s); - - switch (i % 6) { - case 0: r = v, g = t, b = p; break; - case 1: r = q, g = v, b = p; break; - case 2: r = p, g = v, b = t; break; - case 3: r = p, g = q, b = v; break; - case 4: r = t, g = p, b = v; break; - case 5: r = v, g = p, b = q; break; - } - - return [ - Math.round(r * 255), - Math.round(g * 255), - Math.round(b * 255) - ]; -} -function get_color(stage_name) { - if (stage_name in config.predefined_colors) { - return config.predefined_colors[stage_name]; - } - - if (stage_name in colors) { - return colors[stage_name]; - } - - colors[stage_name] = hsv_to_rgb(Math.random(), 0.56, 0.56); - - return colors[stage_name]; -} - -function rasterize_and_pack(text, cycles) { - // TODO: handle texture is full or stuff don't fit (unlikely) - - const key = text; - - if (key in rasterized) { - return rasterized[key]; - } - - const u = raster_tile.x * config.w / config.raster_texture_size; - const v = raster_tile.y * config.h / config.raster_texture_size; - - rasterize(text); - gl.bindTexture(gl.TEXTURE_2D, textures['raster']); - gl.texSubImage2D(gl.TEXTURE_2D, 0, - raster_tile.x * config.w, raster_tile.y * config.h, - config.w, config.h, - gl.RGBA, gl.UNSIGNED_BYTE, - c2d.canvas - ); - - raster_tile.x += 1; - if (raster_tile.x === config.raster_texture_size / config.w) { - raster_tile.x = 0; - raster_tile.y += 1; - } - - rasterized[key] = [u, v]; - - if (cycles > 1) { - gl.bindTexture(gl.TEXTURE_2D, textures['numbers']); - for (let i = numbers_rasterized + 1; i <= cycles; ++i) { - const u = number_tile.x * config.w / config.raster_texture_size; - const v = number_tile.y * config.h / config.raster_texture_size; - - rasterize(i); - - gl.texSubImage2D(gl.TEXTURE_2D, 0, - number_tile.x * config.w, number_tile.y * config.h, - config.w, config.h, - gl.RGBA, gl.UNSIGNED_BYTE, - c2d.canvas - ); - - number_tile.x += 1; - if (number_tile.x === config.raster_texture_size / config.w) { - number_tile.x = 0; - number_tile.y += 1; - } - - rasterized[i] = [u, v]; - } - - if (cycles > numbers_rasterized) { - numbers_rasterized = cycles; - } - } - - return [u, v]; -} - -function pack_instruction(instruction, positions, sizes, colors, uvs, starts, y) { - starts.push(positions.length); - - for (let i = 0; i < instruction.lanes['0'].length; ++i) { - const stage = instruction.lanes['0'][i]; - let stage_cycles; - - if (i < instruction.lanes['0'].length - 1) { - const next_stage = instruction.lanes['0'][i + 1]; - stage_cycles = next_stage.c - stage.c; - } else { - stage_cycles = instruction.retcyc - stage.c; - } - - let [r, g, b] = get_color(stage.name); - let a = 255; - - if (!instruction.retired) { - a = 80; - } - - const [u, v] = rasterize_and_pack(stage.name, stage_cycles); - - sizes.push(stage_cycles * config.w + (stage_cycles - 1) * config.padding, 1 * config.h); - positions.push(config.w * stage.c + config.padding * (stage.c - 1), config.h * y + config.padding * (y - 1)); - colors.push(r, g, b, a); - uvs.push(u, v); - } - - return instruction.lanes['0'].length; -} - -function generate(trace_id) { - const before = performance.now(); - - const result = { - 'count': 0, - }; - - const positions = []; - const sizes = []; - const colors = []; - const uvs = []; - const starts = []; - - let instructions = {}; - - if (trace_id in traces) { - instructions = traces[trace_id].raw; - } - - let y = 0; - - for (let i = 0; i < instructions.length; ++i) { - const instruction = instructions[i]; - // TODO: make all quads same size, abuse this fact - result.count += pack_instruction(instruction, positions, sizes, colors, uvs, starts, y); - if (config.limit > 0 && result.count >= config.limit) { - break; - } - ++y; - } - - starts.push(positions.length); - - if (config.show_texture) { - result.pos = new Float32Array([0, 0]); - result.size = new Float32Array([config.raster_texture_size, config.raster_texture_size]); - result.color = new Uint8Array([0, 0, 0, 255]); - result.uv = new Float32Array([0, 0]); - result.count = 1; - result.trace_id = trace_id; - result.uploaded = false; - } else { - result.pos = new Float32Array(positions); - result.size = new Float32Array(sizes); - result.color = new Uint8Array(colors); - result.uv = new Float32Array(uvs); - result.trace_id = trace_id; - result.uploaded = false; - result.start = new Int32Array(starts); - } - - const after = performance.now(); - - console.log(`Generated geometry in ${Math.round(after - before)}ms`); - - return result; -} - function clip(quads) { if (config.show_texture) { return quads; diff --git a/parse.js b/import_worker.js similarity index 50% rename from parse.js rename to import_worker.js index 3f34916..141a4ce 100644 --- a/parse.js +++ b/import_worker.js @@ -1,3 +1,22 @@ +let traces = {}; +let config = {}; +let raster_tile = {'x': 0, 'y': 0}; +let numbers_rasterized = 0; + +onmessage = (e) => { + const msg = e.data; + + if (msg.type === 'init') { + config = msg.config; + } else if (msg.type === 'import') { + const text = msg.text; + if (parse(text)) { + traces['0'].geo = generate('0'); + postMessage({'type': 'trace', 'data': traces['0']}); + } + } +} + function parse(text) { // https://github.com/shioyadan/Konata/blob/master/docs/kanata-log-format.md @@ -12,6 +31,13 @@ function parse(text) { //console.log(text); for (let i = 0; i < text.length; ++i) { + const last_percent = Math.round((i - 1) / text.length * 100); + const this_percent = Math.round(i / text.length * 100); + + if (this_percent != last_percent) { + postMessage({'type': 'progress_parse', 'data': this_percent}) + } + if (text[i] === '\n') { // TODO: speed const line_copy = text.substring(line_start, i); @@ -163,18 +189,15 @@ function parse(text) { } } - traces['0'] = { // The fact these are sorted is used extensively over the code 'raw': Object.values(instructions).sort((a, b) => a.cycle - b.cycle), }; - - traces['0'].geo = generate('0'); - const after = performance.now(); console.log(`Parsed in ${Math.round(after - before)}ms`); + return true; } @@ -195,3 +218,192 @@ function assert_arglenmin(args, arglen, command) { return true; } + +let colors = {}; +let rasterized = {}; + +// https://stackoverflow.com/a/17243070 +function hsv_to_rgb(h, s, v) { + let r, g, b; + + const i = Math.floor(h * 6); + const f = h * 6 - i; + const p = v * (1 - s); + const q = v * (1 - f * s); + const t = v * (1 - (1 - f) * s); + + switch (i % 6) { + case 0: r = v, g = t, b = p; break; + case 1: r = q, g = v, b = p; break; + case 2: r = p, g = v, b = t; break; + case 3: r = p, g = q, b = v; break; + case 4: r = t, g = p, b = v; break; + case 5: r = v, g = p, b = q; break; + } + + return [ + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255) + ]; +} + +function get_color(stage_name) { + if (stage_name in config.predefined_colors) { + return config.predefined_colors[stage_name]; + } + + if (stage_name in colors) { + return colors[stage_name]; + } + + colors[stage_name] = hsv_to_rgb(Math.random(), 0.56, 0.56); + + return colors[stage_name]; +} + +function rasterize_and_pack(text, cycles) { + // TODO: handle texture is full or stuff don't fit (unlikely) + + const key = text; + + if (key in rasterized) { + return rasterized[key]; + } + + const u = raster_tile.x * config.w / config.raster_texture_size; + const v = raster_tile.y * config.h / config.raster_texture_size; + + postMessage({'type': 'rasterize', 'data': { 'text': text, 'at': {'x': raster_tile.x, 'y': raster_tile.y}}}); + + raster_tile.x += 1; + + if (raster_tile.x === config.raster_texture_size / config.w) { + raster_tile.x = 0; + raster_tile.y += 1; + } + + rasterized[key] = [u, v]; + + if (cycles > 1) { + for (let i = numbers_rasterized + 1; i <= cycles; ++i) { + const u = raster_tile.x * config.w / config.raster_texture_size; + const v = raster_tile.y * config.h / config.raster_texture_size; + + postMessage({'type': 'rasterize', 'data': { 'text': i, 'at': {'x': raster_tile.x, 'y': raster_tile.y}}}); + + raster_tile.x += 1; + + if (raster_tile.x === config.raster_texture_size / config.w) { + raster_tile.x = 0; + raster_tile.y += 1; + } + + rasterized[i] = [u, v]; + } + + if (cycles > numbers_rasterized) { + numbers_rasterized = cycles; + } + } + + return [u, v]; +} + +function pack_instruction(instruction, positions, sizes, colors, uvs, starts, y) { + starts.push(positions.length); + + for (let i = 0; i < instruction.lanes['0'].length; ++i) { + const stage = instruction.lanes['0'][i]; + let stage_cycles; + + if (i < instruction.lanes['0'].length - 1) { + const next_stage = instruction.lanes['0'][i + 1]; + stage_cycles = next_stage.c - stage.c; + } else { + stage_cycles = instruction.retcyc - stage.c; + } + + let [r, g, b] = get_color(stage.name); + let a = 255; + + if (!instruction.retired) { + a = 80; + } + + const [u, v] = rasterize_and_pack(stage.name, stage_cycles); + + sizes.push(stage_cycles * config.w + (stage_cycles - 1) * config.padding, 1 * config.h); + positions.push(config.w * stage.c + config.padding * (stage.c - 1), config.h * y + config.padding * (y - 1)); + colors.push(r, g, b, a); + uvs.push(u, v); + } + + return instruction.lanes['0'].length; +} + +function generate(trace_id) { + const before = performance.now(); + + const result = { + 'count': 0, + }; + + const positions = []; + const sizes = []; + const colors = []; + const uvs = []; + const starts = []; + + let instructions = {}; + + if (trace_id in traces) { + instructions = traces[trace_id].raw; + } + + let y = 0; + + for (let i = 0; i < instructions.length; ++i) { + const last_percent = Math.round((i - 1) / instructions.length * 100); + const this_percent = Math.round(i / instructions.length * 100); + + if (this_percent !== last_percent) { + postMessage({'type': 'progress_generate', 'data': this_percent}) + } + + const instruction = instructions[i]; + // TODO: make all quads same size, abuse this fact + result.count += pack_instruction(instruction, positions, sizes, colors, uvs, starts, y); + if (config.limit > 0 && result.count >= config.limit) { + break; + } + ++y; + } + + starts.push(positions.length); + + if (config.show_texture) { + result.pos = new Float32Array([0, 0]); + result.size = new Float32Array([config.raster_texture_size, config.raster_texture_size]); + result.color = new Uint8Array([0, 0, 0, 255]); + result.uv = new Float32Array([0, 0]); + result.count = 1; + result.trace_id = trace_id; + result.uploaded = false; + } else { + result.pos = new Float32Array(positions); + result.size = new Float32Array(sizes); + result.color = new Uint8Array(colors); + result.uv = new Float32Array(uvs); + result.trace_id = trace_id; + result.uploaded = false; + result.start = new Int32Array(starts); + } + + const after = performance.now(); + + console.log(`Generated geometry in ${Math.round(after - before)}ms`); + + return result; +} + diff --git a/index.html b/index.html index 7d17418..5161125 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,11 @@ - - +
diff --git a/index.js b/index.js index 3ede6a4..acb0b96 100644 --- a/index.js +++ b/index.js @@ -1,11 +1,16 @@ document.addEventListener('DOMContentLoaded', main); let traces = {}; +let import_worker; function main() { const font = new FontFace('ibm8x16', 'url(ibm_vga8.woff2)'); document.fonts.add(font); font.load(); + + import_worker = new Worker('import_worker.js'); + import_worker.postMessage({'type': 'init', 'config': config}); + document.fonts.ready.then(() => { init_webgl(); init_rasterizer(); diff --git a/input.js b/input.js index 5969365..b3bd6c8 100644 --- a/input.js +++ b/input.js @@ -115,19 +115,33 @@ function upload_file(file) { const upload_finished = () => { const text = fr.result; - console.log('Finished. String length:', text.length); - if (parse(text)) { - jump_to_first_instruction(); - schedule_draw(); - } + console.log('Upload finished. String length:', text.length); + + import_worker.onmessage = (e) => { + const msg = e.data; + if (msg.type === 'trace') { + traces['0'] = msg.data; + jump_to_first_instruction(); + schedule_draw(); + } else if (msg.type === 'rasterize') { + const data = msg.data; + queue_rasterize(data.text, data.at); + } else if (msg.type === 'progress_parse') { + console.log(`Parsing: ${msg.data}%`); + } else if (msg.type === 'progress_generate') { + console.log(`Generating geometry: ${msg.data}%`); + } + }; + + import_worker.postMessage({'type': 'import', 'text': text}); }; const upload_progress = (e) => { if (e.lengthComputable) { const percent = Math.floor(e.loaded / e.total * 100); - console.log(`Progress: ${percent}%`); + console.log(`Uploading: ${percent}%`); } else { - console.log('Progress: unknown'); + console.log('Uploading: unknown'); } }; diff --git a/rasterizer.js b/rasterizer.js index c3247a3..52e82bc 100644 --- a/rasterizer.js +++ b/rasterizer.js @@ -1,6 +1,5 @@ -// TODO: move this to a worker - let c2d = null; +let raster_queue = []; function init_rasterizer() { c2d = document.querySelector('#offscreen').getContext('2d'); @@ -16,3 +15,33 @@ function rasterize(text) { c2d.fillText(text, config.w / 2, config.h / 2); //c2d.fillRect(0, 0, 32, 32); } + +function queue_rasterize(text, at) { + raster_queue.push({'text': text, 'at': at}); +} + +function copy_canvas_to_texture(at) { + gl.texSubImage2D(gl.TEXTURE_2D, 0, + at.x * config.w, at.y * config.h, + config.w, config.h, + gl.RGBA, gl.UNSIGNED_BYTE, + c2d.canvas + ); +} + +function rasterize_and_upload_batch(batch_size) { + let head = 0; + + gl.bindTexture(gl.TEXTURE_2D, textures['raster']); + + for (let i = 0; i < batch_size && i < raster_queue.length; ++i) { + const entry = raster_queue[i]; + rasterize(entry.text); + copy_canvas_to_texture(entry.at); + head = i + 1; + } + + raster_queue.splice(0, head); + + return raster_queue.length; +} diff --git a/render.js b/render.js index 8e6627b..d6ebbdf 100644 --- a/render.js +++ b/render.js @@ -10,7 +10,6 @@ let config = { predefined_colors: { 'Np': [75, 62, 143], - 'F': [62, 123, 143], 'Pd': [61, 142, 88], 'Dc': [109, 143, 61], 'Rn': [143, 102, 61], @@ -23,6 +22,14 @@ let config = { 'Cm': [61, 81, 143], 'Mt': [142, 142, 61], 'Ma': [143, 68, 61], + 'F': [72, 62, 143], + 'LBr': [61, 122, 143], + 'Iq': [61, 142, 88], + 'D1': [109, 143, 62], + 'D2': [143, 102, 62], + 'L2': [255, 0, 0], + 'SRS': [143, 61, 95], + 'ARB': [116, 61, 143], }, limit: -1, @@ -30,6 +37,7 @@ let config = { raster_texture_size: 4096, max_zoom_level: 0, show_texture: false, + raster_batch_size: 32, }; let canvas = null; @@ -43,10 +51,8 @@ let zoom_level = 0; let zoom_screenp = { 'x': 0, 'y': 0 }; let last_frame_dt = 0; let last_frame_ts = 0; -let raster_tile = { 'x': 0, 'y': 0 }; let number_tile = { 'x': 0, 'y': 0 }; let spacedown = false; -let numbers_rasterized = 0; const tquad_vs_src = `#version 300 es in vec2 a_pos; @@ -154,6 +160,8 @@ function draw(ts, animation) { gl.beginQuery(gpu_timer_ext.TIME_ELAPSED_EXT, query); } + const tiles_left = rasterize_and_upload_batch(config.raster_batch_size); + gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0.11, 0.11, 0.11, 1); gl.clear(gl.COLOR_BUFFER_BIT); @@ -233,7 +241,7 @@ function draw(ts, animation) { if (available && !disjoint) { const timeElapsed = gl.getQueryParameter(query, gl.QUERY_RESULT); - console.log('Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms'); + console.debug('Last GPU Frametime: ' + Math.round(timeElapsed / 10000) / 100 + 'ms'); } if (available || disjoint) { @@ -252,13 +260,17 @@ function draw(ts, animation) { timers.raf = false; - console.log('Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms'); + console.debug('Last CPU Frametime: ' + Math.round((cpu_after - cpu_before) * 100) / 100 + 'ms'); if (zoom_target != zoom) { update_canvas_zoom(zoom, zoom_target, animation ? dt : last_frame_dt); schedule_draw(true); } + if (tiles_left > 0) { + schedule_draw(); + } + last_frame_dt = dt; } @@ -392,3 +404,74 @@ function create_program(gl, vs, fs) { gl.deleteProgram(program); } + +function clip(quads) { + if (config.show_texture) { + return quads; + } + + const tl = screen_to_canvas({'x': 0, 'y': 0}); + const br = screen_to_canvas({'x': 0, 'y': canvas.height}); + + const x1 = tl.x; + const y1 = tl.y; + + const x2 = br.x; + const y2 = br.y; + + const result = { + 'count': 0, + }; + + if (quads.count === 0) { + return result; + } + + let i0 = -1; + let i1 = -1; + + for (let i = 0; i < quads.start.length - 1; ++i) { + const index = quads.start[i]; + const next = quads.start[i + 1]; + + const left = quads.pos[index]; + const top = quads.pos[index + 1]; + const bottom = top + quads.size[index + 1]; + const right = quads.pos[next - 2] + quads.size[next - 2]; + + if (bottom < y1) { + if (i < quads.start.length / 2 - 2) { + const index_ahead = quads.start[i * 2]; + const top_ahead = quads.pos[index_ahead + 1]; + const bottom_ahead = top_ahead + quads.size[index_ahead + 1]; + + if (bottom_ahead < y1) { + i *= 2; + continue; + } + } + } + + if (bottom < y1 || right < x1) { + continue; + } + + if (top > y2) { + i1 = quads.start[i + 1]; + break; + } + + if (i0 === -1) { + i0 = index; + } + } + + result.pos = quads.pos.subarray(i0, i1); + result.size = quads.size.subarray(i0, i1); + result.color = quads.color.subarray(i0 * 2, i1 * 2); + result.uv = quads.uv.subarray(i0, i1); + result.count = (i1 - i0) / 2; + result.uploaded = false; + + return result; +}