From fd8aa889f108bc23e2a0b59fb0bf6772e6e7e7e1 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Sun, 4 Aug 2024 02:15:57 +0300 Subject: [PATCH] Very very VERY messy maths to make the cycles line up correctly with padding enabled --- import_worker.js | 2 +- input.js | 2 +- render.js | 63 ++++++++++++++++++++++++++++++------------------ 3 files changed, 41 insertions(+), 26 deletions(-) diff --git a/import_worker.js b/import_worker.js index 1d3022d..c608ee2 100644 --- a/import_worker.js +++ b/import_worker.js @@ -284,7 +284,7 @@ function rasterize_and_pack(text) { raster_tile.x += 1; - if (raster_tile.x === config.raster_texture_size / config.w) { + if (raster_tile.x === Math.floor(config.raster_texture_size / config.w)) { raster_tile.x = 0; raster_tile.y += 1; } diff --git a/input.js b/input.js index d866ee4..0db5f0b 100644 --- a/input.js +++ b/input.js @@ -136,7 +136,7 @@ function upload_file(file) { for (let i = 1; i <= value; ++i) { queue_rasterize(i, {...at}); at.x += 1; - if (at.x === config.raster_texture_size / config.w) { + if (at.x === Math.floor(config.raster_texture_size / config.w)) { at.x = 0; at.y += 1; } diff --git a/render.js b/render.js index 6654d05..9df7c5f 100644 --- a/render.js +++ b/render.js @@ -6,7 +6,7 @@ let config = { bytes_per_quad: 28, w: 40, h: 20, - padding: 0, + padding: 4, predefined_colors: { 'Np': [75, 62, 143], @@ -37,7 +37,7 @@ let config = { raster_texture_size: 4096, max_zoom_level: 0, show_texture: false, - raster_batch_size: 32, + raster_batch_size: 128, }; let canvas = null; @@ -68,25 +68,21 @@ const tquad_vs_src = `#version 300 es uniform vec2 u_tile; uniform int u_single; uniform int u_extra; + uniform float u_padding; out vec4 v_color; out vec2 v_uv; out vec2 v_cycle; out vec2 v_textile; + out float v_padscale; flat out int v_extra; void main() { int vertex_index = gl_VertexID % 6; vec2 corner; vec2 uv; - vec2 inset = vec2(1.0); - // "Fix" for zero-width stages - if (a_size.x < 0.1) { - inset = vec2(0.0); - } - - vec2 cycles = a_size / u_tile; + vec2 cycles = a_size / u_tile - 1.0; vec2 size = a_size; vec2 cycle; @@ -98,26 +94,32 @@ const tquad_vs_src = `#version 300 es // "top left" aka "p1" corner = a_pos; if (u_extra != 0) { - corner.x += u_tile.x; + corner.x += u_tile.x + u_padding; } uv = a_uv; - cycle = vec2(1.0, 0.0); + cycle = vec2(0.0, 0.0); } else if (vertex_index == 1 || vertex_index == 5) { // "top right" aka "p2" corner = a_pos + vec2(size.x, 0); + if (u_extra != 0) { + corner.x += u_padding; + } 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; + corner.x += u_tile.x + u_padding; } uv = a_uv + vec2(0, u_textile.y); - cycle = vec2(1.0, 1.0); + cycle = vec2(0.0, 1.0); } else { // "bottom right" aka "p4" corner = a_pos + size; + if (u_extra != 0) { + corner.x += u_padding; + } uv = a_uv + u_textile; cycle = vec2(cycles.x, 1.0); } @@ -130,8 +132,13 @@ const tquad_vs_src = `#version 300 es v_extra = u_extra; v_cycle = cycle; v_textile = u_textile; + v_padscale = u_tile.x / (u_tile.x + u_padding); - gl_Position = vec4(screen02 - 1.0, 1.0, 1.0); + if (cycles.x < 0.5 && u_extra != 0) { + gl_Position = vec4(999.9, 999.9, 1.0, 1.0); + } else { + gl_Position = vec4(screen02 - 1.0, 1.0, 1.0); + } } `; @@ -142,12 +149,13 @@ const tquad_fs_src = `#version 300 es in vec2 v_uv; in vec2 v_cycle; in vec2 v_textile; + in float v_padscale; flat in int v_extra; uniform sampler2D u_texture; uniform float u_fade; uniform int u_solid; - uniform vec2 u_number_base; + uniform ivec2 u_number_base; layout(location = 0) out vec4 FragColor; @@ -155,14 +163,20 @@ const tquad_fs_src = `#version 300 es 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; + int cyc = int(floor(v_cycle.x * v_padscale)); + int width = int(floor(1.0 / v_textile.x)); + vec2 cell = vec2(float((u_number_base.x + cyc) % width), float(u_number_base.y + (u_number_base.x + cyc) / width)); + + vec2 scaled_cycle = vec2(v_cycle.x * v_padscale, v_cycle.y); + vec2 cuv = fract(scaled_cycle); + if (cuv.x <= v_padscale) { + cuv.x /= v_padscale; + vec2 uv = (cell + cuv) * v_textile; + vec4 text = texture(u_texture, uv); + FragColor = text; + //FragColor = vec4(cuv, 0.0, 1.0); + //FragColor = vec4(vec3(cell.x / float(width)), 1.0); + } } else { vec4 text = texture(u_texture, v_uv); float a = min(u_fade, min(text.a, v_color.a)); @@ -234,6 +248,7 @@ function draw(ts, animation) { gl.uniform1i(program.locations['u_solid'], 1); gl.uniform1i(program.locations['u_single'], 0); gl.uniform1i(program.locations['u_extra'], 0); + gl.uniform1f(program.locations['u_padding'], config.padding); gl.enableVertexAttribArray(program.locations['a_pos']); gl.enableVertexAttribArray(program.locations['a_size']); @@ -265,7 +280,7 @@ 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); - 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.uniform2i(program.locations['u_number_base'], number_base.x, number_base.y); gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count); }