From ccf6de41acc54243ad0b6e57072f03bfd26d475d Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Thu, 1 Aug 2024 01:46:23 +0300 Subject: [PATCH] Draw cycles using fract() --- import_worker.js | 2 +- input.js | 14 +++++++++++++- rasterizer.js | 4 ---- render.js | 38 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 50 insertions(+), 8 deletions(-) diff --git a/import_worker.js b/import_worker.js index bad2d40..1d3022d 100644 --- a/import_worker.js +++ b/import_worker.js @@ -368,7 +368,7 @@ function generate(trace_id) { ++y; } - postMessage({'type': 'rasterize_numbers', 'up_to': max_stage_cycles}); + postMessage({'type': 'rasterize_numbers', 'at': raster_tile, 'up_to': max_stage_cycles}); starts.push(positions.length); diff --git a/input.js b/input.js index 55e0a65..d866ee4 100644 --- a/input.js +++ b/input.js @@ -128,7 +128,19 @@ function upload_file(file) { queue_rasterize(data.text, data.at); } else if (msg.type === 'rasterize_numbers') { const value = msg.up_to; - rasterize_row(value); + const at = msg.at; + + number_base.x = at.x; + number_base.y = at.y; + + for (let i = 1; i <= value; ++i) { + queue_rasterize(i, {...at}); + at.x += 1; + if (at.x === config.raster_texture_size / config.w) { + at.x = 0; + at.y += 1; + } + } } 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 26151a4..26f7fa6 100644 --- a/rasterizer.js +++ b/rasterizer.js @@ -18,10 +18,6 @@ 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 d3db304..6654d05 100644 --- a/render.js +++ b/render.js @@ -6,7 +6,7 @@ let config = { bytes_per_quad: 28, w: 40, h: 20, - padding: 1, + padding: 0, predefined_colors: { 'Np': [75, 62, 143], @@ -53,6 +53,7 @@ let last_frame_dt = 0; let last_frame_ts = 0; let number_tile = { 'x': 0, 'y': 0 }; let spacedown = false; +let number_base = { 'x': 0, 'y': 0 }; const tquad_vs_src = `#version 300 es in vec2 a_pos; @@ -66,9 +67,13 @@ const tquad_vs_src = `#version 300 es uniform vec2 u_textile; uniform vec2 u_tile; uniform int u_single; + uniform int u_extra; out vec4 v_color; out vec2 v_uv; + out vec2 v_cycle; + out vec2 v_textile; + flat out int v_extra; void main() { int vertex_index = gl_VertexID % 6; @@ -83,6 +88,7 @@ const tquad_vs_src = `#version 300 es vec2 cycles = a_size / u_tile; vec2 size = a_size; + vec2 cycle; if (u_single != 0) { size = u_tile; @@ -91,25 +97,39 @@ const tquad_vs_src = `#version 300 es if (vertex_index == 0) { // "top left" aka "p1" corner = a_pos; + if (u_extra != 0) { + corner.x += u_tile.x; + } uv = a_uv; + cycle = vec2(1.0, 0.0); } else if (vertex_index == 1 || vertex_index == 5) { // "top right" aka "p2" corner = a_pos + vec2(size.x, 0); uv = a_uv + vec2(u_textile.x, 0); + cycle = vec2(cycles.x, 0.0); } else if (vertex_index == 2 || vertex_index == 4) { // "bottom left" aka "p3" corner = a_pos + vec2(0, size.y); + if (u_extra != 0) { + corner.x += u_tile.x; + } uv = a_uv + vec2(0, u_textile.y); + cycle = vec2(1.0, 1.0); } else { // "bottom right" aka "p4" corner = a_pos + size; uv = a_uv + u_textile; + cycle = vec2(cycles.x, 1.0); } vec2 screen02 = (corner.xy * vec2(u_scale) + u_translation) / u_res * 2.0; screen02.y = 2.0 - screen02.y; + v_color = a_color; v_uv = uv; + v_extra = u_extra; + v_cycle = cycle; + v_textile = u_textile; gl_Position = vec4(screen02 - 1.0, 1.0, 1.0); } @@ -120,16 +140,29 @@ const tquad_fs_src = `#version 300 es in vec4 v_color; in vec2 v_uv; + in vec2 v_cycle; + in vec2 v_textile; + flat in int v_extra; uniform sampler2D u_texture; uniform float u_fade; uniform int u_solid; + uniform vec2 u_number_base; layout(location = 0) out vec4 FragColor; void main() { if (u_solid != 0) { FragColor = vec4(v_color.rgb * v_color.a, v_color.a); + } else if (v_extra != 0) { + vec2 uv = u_number_base + fract(v_cycle) * v_textile; + float cyc = floor(v_cycle.x) - 1.0; + + // TODO: wrapping + uv.x += cyc * v_textile.x; + + vec4 text = texture(u_texture, uv); + FragColor = text; } else { vec4 text = texture(u_texture, v_uv); float a = min(u_fade, min(text.a, v_color.a)); @@ -232,7 +265,8 @@ function draw(ts, animation) { 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.uniform2f(program.locations['u_number_base'], number_base.x * config.w / config.raster_texture_size, number_base.y * config.h / config.raster_texture_size); + gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); }