|
|
@ -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); |
|
|
|
} |
|
|
|
} |
|
|
|