From 87587aacebb4265fcb7b0544ebb7cd17f655ce06 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Wed, 31 Jul 2024 11:04:31 +0300 Subject: [PATCH] Round offset. Set up for new numbers rendering (rasterize all numbers 1-MAX to rows, use these rows as textures). --- import_worker.js | 44 ++++++++++++++++++-------------------------- input.js | 3 +++ rasterizer.js | 6 ++++++ render.js | 26 +++++++++++++++++++------- 4 files changed, 46 insertions(+), 33 deletions(-) diff --git a/import_worker.js b/import_worker.js index 141a4ce..bad2d40 100644 --- a/import_worker.js +++ b/import_worker.js @@ -1,7 +1,7 @@ let traces = {}; let config = {}; let raster_tile = {'x': 0, 'y': 0}; -let numbers_rasterized = 0; +let max_stage_cycles = 0; onmessage = (e) => { const msg = e.data; @@ -12,6 +12,7 @@ onmessage = (e) => { const text = msg.text; if (parse(text)) { traces['0'].geo = generate('0'); + delete traces['0'].raw; postMessage({'type': 'trace', 'data': traces['0']}); } } @@ -64,7 +65,12 @@ function parse(text) { if (!assert_arglen(line_parts, 1, 'C')) return false; const cycles = Number(line_parts[1]); - c += cycles; + + if (c === -1) { + c = 0; + } else { + c += cycles; + } break; } @@ -262,7 +268,7 @@ function get_color(stage_name) { return colors[stage_name]; } -function rasterize_and_pack(text, cycles) { +function rasterize_and_pack(text) { // TODO: handle texture is full or stuff don't fit (unlikely) const key = text; @@ -285,28 +291,6 @@ function rasterize_and_pack(text, cycles) { 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]; } @@ -324,6 +308,10 @@ function pack_instruction(instruction, positions, sizes, colors, uvs, starts, y) stage_cycles = instruction.retcyc - stage.c; } + if (stage_cycles > max_stage_cycles) { + max_stage_cycles = stage_cycles; + } + let [r, g, b] = get_color(stage.name); let a = 255; @@ -331,7 +319,7 @@ function pack_instruction(instruction, positions, sizes, colors, uvs, starts, y) a = 80; } - const [u, v] = rasterize_and_pack(stage.name, stage_cycles); + const [u, v] = rasterize_and_pack(stage.name); 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)); @@ -380,8 +368,12 @@ function generate(trace_id) { ++y; } + postMessage({'type': 'rasterize_numbers', 'up_to': max_stage_cycles}); + starts.push(positions.length); + console.log(`Total geometry: ${Math.round(result.count * config.bytes_per_quad / 1024 / 1024)}MB`); + if (config.show_texture) { result.pos = new Float32Array([0, 0]); result.size = new Float32Array([config.raster_texture_size, config.raster_texture_size]); diff --git a/input.js b/input.js index b3bd6c8..55e0a65 100644 --- a/input.js +++ b/input.js @@ -126,6 +126,9 @@ function upload_file(file) { } else if (msg.type === 'rasterize') { const data = msg.data; queue_rasterize(data.text, data.at); + } else if (msg.type === 'rasterize_numbers') { + const value = msg.up_to; + rasterize_row(value); } else if (msg.type === 'progress_parse') { console.log(`Parsing: ${msg.data}%`); } else if (msg.type === 'progress_generate') { diff --git a/rasterizer.js b/rasterizer.js index 52e82bc..26151a4 100644 --- a/rasterizer.js +++ b/rasterizer.js @@ -3,6 +3,8 @@ let raster_queue = []; function init_rasterizer() { c2d = document.querySelector('#offscreen').getContext('2d'); + c2d.canvas.width = config.w; + c2d.canvas.height = config.h; c2d.font = '16px ibm8x16'; //c2d.font = '14px monospace'; c2d.textAlign = 'center'; @@ -16,6 +18,10 @@ function rasterize(text) { //c2d.fillRect(0, 0, 32, 32); } +function rasterize_row(value) { + // from 1 to value +} + function queue_rasterize(text, at) { raster_queue.push({'text': text, 'at': at}); } diff --git a/render.js b/render.js index d6ebbdf..d3db304 100644 --- a/render.js +++ b/render.js @@ -4,9 +4,9 @@ let textures = {}; let timers = {}; let config = { bytes_per_quad: 28, - w: 32, - h: 32, - padding: 2, + w: 40, + h: 20, + padding: 1, predefined_colors: { 'Np': [75, 62, 143], @@ -192,7 +192,7 @@ function draw(ts, animation) { } gl.uniform2f(program.locations['u_res'], canvas.width, canvas.height); - gl.uniform2f(program.locations['u_translation'], offset.x, offset.y); + gl.uniform2f(program.locations['u_translation'], Math.round(offset.x), Math.round(offset.y)); gl.uniform1f(program.locations['u_scale'], zoom); gl.uniform2f(program.locations['u_textile'], config.w / config.raster_texture_size, config.h / config.raster_texture_size); gl.uniform1i(program.locations['u_texture'], textures['raster']); @@ -200,16 +200,17 @@ function draw(ts, animation) { gl.uniform1f(program.locations['u_fade'], fade); gl.uniform1i(program.locations['u_solid'], 1); gl.uniform1i(program.locations['u_single'], 0); + gl.uniform1i(program.locations['u_extra'], 0); gl.enableVertexAttribArray(program.locations['a_pos']); gl.enableVertexAttribArray(program.locations['a_size']); gl.enableVertexAttribArray(program.locations['a_color']); gl.enableVertexAttribArray(program.locations['a_uv']); - gl.vertexAttribPointer(program.locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, 0); + gl.vertexAttribPointer(program.locations['a_pos'], 2, gl.FLOAT, false, 2 * 4, 0); gl.vertexAttribPointer(program.locations['a_size'], 2, gl.FLOAT, false, 2 * 4, clipped.pos.byteLength); - gl.vertexAttribPointer(program.locations['a_color'], 4, gl.UNSIGNED_BYTE, true, 4 * 1, clipped.pos.byteLength + clipped.size.byteLength); - gl.vertexAttribPointer(program.locations['a_uv'], 2, gl.FLOAT, false, 2 * 4, clipped.pos.byteLength + clipped.size.byteLength + clipped.color.byteLength); + gl.vertexAttribPointer(program.locations['a_color'], 4, gl.UNSIGNED_BYTE, true, 4 * 1, clipped.pos.byteLength + clipped.size.byteLength); + gl.vertexAttribPointer(program.locations['a_uv'], 2, gl.FLOAT, false, 2 * 4, clipped.pos.byteLength + clipped.size.byteLength + clipped.color.byteLength); gl.vertexAttribDivisor(program.locations['a_pos'], 1); gl.vertexAttribDivisor(program.locations['a_size'], 1); @@ -219,9 +220,19 @@ function draw(ts, animation) { gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); if (fade > 0) { + // Stage names gl.bindTexture(gl.TEXTURE_2D, textures['raster']); gl.uniform1i(program.locations['u_solid'], 0); gl.uniform1i(program.locations['u_single'], 1); + gl.uniform1i(program.locations['u_extra'], 0); + gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); + + // Cycle counts + gl.bindTexture(gl.TEXTURE_2D, textures['raster']); + gl.uniform1i(program.locations['u_solid'], 0); + gl.uniform1i(program.locations['u_single'], 0); + gl.uniform1i(program.locations['u_extra'], 1); + // TODO: we need a set of alternative uvs here? gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); } @@ -324,6 +335,7 @@ function init_webgl() { gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, config.raster_texture_size, config.raster_texture_size, 0, gl.RGBA, gl.UNSIGNED_BYTE, zeroes); // fill the whole texture once with zeroes to kill a warning about a partial upload + gl.bindTexture(gl.TEXTURE_2D, textures['numbers']); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);