Browse Source

Very very VERY messy maths to make the cycles line up correctly with padding enabled

master
A.Olokhtonov 3 months ago
parent
commit
fd8aa889f1
  1. 2
      import_worker.js
  2. 2
      input.js
  3. 63
      render.js

2
import_worker.js

@ -284,7 +284,7 @@ function rasterize_and_pack(text) {
raster_tile.x += 1; 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.x = 0;
raster_tile.y += 1; raster_tile.y += 1;
} }

2
input.js

@ -136,7 +136,7 @@ function upload_file(file) {
for (let i = 1; i <= value; ++i) { for (let i = 1; i <= value; ++i) {
queue_rasterize(i, {...at}); queue_rasterize(i, {...at});
at.x += 1; 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.x = 0;
at.y += 1; at.y += 1;
} }

63
render.js

@ -6,7 +6,7 @@ let config = {
bytes_per_quad: 28, bytes_per_quad: 28,
w: 40, w: 40,
h: 20, h: 20,
padding: 0, padding: 4,
predefined_colors: { predefined_colors: {
'Np': [75, 62, 143], 'Np': [75, 62, 143],
@ -37,7 +37,7 @@ let config = {
raster_texture_size: 4096, raster_texture_size: 4096,
max_zoom_level: 0, max_zoom_level: 0,
show_texture: false, show_texture: false,
raster_batch_size: 32, raster_batch_size: 128,
}; };
let canvas = null; let canvas = null;
@ -68,25 +68,21 @@ const tquad_vs_src = `#version 300 es
uniform vec2 u_tile; uniform vec2 u_tile;
uniform int u_single; uniform int u_single;
uniform int u_extra; uniform int u_extra;
uniform float u_padding;
out vec4 v_color; out vec4 v_color;
out vec2 v_uv; out vec2 v_uv;
out vec2 v_cycle; out vec2 v_cycle;
out vec2 v_textile; out vec2 v_textile;
out float v_padscale;
flat out int v_extra; flat out int v_extra;
void main() { void main() {
int vertex_index = gl_VertexID % 6; int vertex_index = gl_VertexID % 6;
vec2 corner; vec2 corner;
vec2 uv; vec2 uv;
vec2 inset = vec2(1.0);
// "Fix" for zero-width stages vec2 cycles = a_size / u_tile - 1.0;
if (a_size.x < 0.1) {
inset = vec2(0.0);
}
vec2 cycles = a_size / u_tile;
vec2 size = a_size; vec2 size = a_size;
vec2 cycle; vec2 cycle;
@ -98,26 +94,32 @@ const tquad_vs_src = `#version 300 es
// "top left" aka "p1" // "top left" aka "p1"
corner = a_pos; corner = a_pos;
if (u_extra != 0) { if (u_extra != 0) {
corner.x += u_tile.x; corner.x += u_tile.x + u_padding;
} }
uv = a_uv; uv = a_uv;
cycle = vec2(1.0, 0.0); cycle = vec2(0.0, 0.0);
} else if (vertex_index == 1 || vertex_index == 5) { } else if (vertex_index == 1 || vertex_index == 5) {
// "top right" aka "p2" // "top right" aka "p2"
corner = a_pos + vec2(size.x, 0); corner = a_pos + vec2(size.x, 0);
if (u_extra != 0) {
corner.x += u_padding;
}
uv = a_uv + vec2(u_textile.x, 0); uv = a_uv + vec2(u_textile.x, 0);
cycle = vec2(cycles.x, 0.0); cycle = vec2(cycles.x, 0.0);
} else if (vertex_index == 2 || vertex_index == 4) { } else if (vertex_index == 2 || vertex_index == 4) {
// "bottom left" aka "p3" // "bottom left" aka "p3"
corner = a_pos + vec2(0, size.y); corner = a_pos + vec2(0, size.y);
if (u_extra != 0) { if (u_extra != 0) {
corner.x += u_tile.x; corner.x += u_tile.x + u_padding;
} }
uv = a_uv + vec2(0, u_textile.y); uv = a_uv + vec2(0, u_textile.y);
cycle = vec2(1.0, 1.0); cycle = vec2(0.0, 1.0);
} else { } else {
// "bottom right" aka "p4" // "bottom right" aka "p4"
corner = a_pos + size; corner = a_pos + size;
if (u_extra != 0) {
corner.x += u_padding;
}
uv = a_uv + u_textile; uv = a_uv + u_textile;
cycle = vec2(cycles.x, 1.0); cycle = vec2(cycles.x, 1.0);
} }
@ -130,8 +132,13 @@ const tquad_vs_src = `#version 300 es
v_extra = u_extra; v_extra = u_extra;
v_cycle = cycle; v_cycle = cycle;
v_textile = u_textile; 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_uv;
in vec2 v_cycle; in vec2 v_cycle;
in vec2 v_textile; in vec2 v_textile;
in float v_padscale;
flat in int v_extra; flat in int v_extra;
uniform sampler2D u_texture; uniform sampler2D u_texture;
uniform float u_fade; uniform float u_fade;
uniform int u_solid; uniform int u_solid;
uniform vec2 u_number_base; uniform ivec2 u_number_base;
layout(location = 0) out vec4 FragColor; layout(location = 0) out vec4 FragColor;
@ -155,14 +163,20 @@ const tquad_fs_src = `#version 300 es
if (u_solid != 0) { if (u_solid != 0) {
FragColor = vec4(v_color.rgb * v_color.a, v_color.a); FragColor = vec4(v_color.rgb * v_color.a, v_color.a);
} else if (v_extra != 0) { } else if (v_extra != 0) {
vec2 uv = u_number_base + fract(v_cycle) * v_textile; int cyc = int(floor(v_cycle.x * v_padscale));
float cyc = floor(v_cycle.x) - 1.0; 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));
// TODO: wrapping
uv.x += cyc * v_textile.x; vec2 scaled_cycle = vec2(v_cycle.x * v_padscale, v_cycle.y);
vec2 cuv = fract(scaled_cycle);
vec4 text = texture(u_texture, uv); if (cuv.x <= v_padscale) {
FragColor = text; 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 { } else {
vec4 text = texture(u_texture, v_uv); vec4 text = texture(u_texture, v_uv);
float a = min(u_fade, min(text.a, v_color.a)); 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_solid'], 1);
gl.uniform1i(program.locations['u_single'], 0); gl.uniform1i(program.locations['u_single'], 0);
gl.uniform1i(program.locations['u_extra'], 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_pos']);
gl.enableVertexAttribArray(program.locations['a_size']); 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_solid'], 0);
gl.uniform1i(program.locations['u_single'], 0); gl.uniform1i(program.locations['u_single'], 0);
gl.uniform1i(program.locations['u_extra'], 1); 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); gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, clipped.count);
} }

Loading…
Cancel
Save