aolo2
/
desk2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix predraw artifacts by making the lines too fat at far zoomout

ssao
A.Olokhtonov 11 months ago
parent
72eedf9b48
commit
7b53c7215e
2 changed files with 26 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      client/webgl_draw.js
  2. 58
      client/webgl_shaders.js

3
client/webgl_draw.js
Unescape View File

@ -137,7 +137,6 @@ function draw(state, context) {
gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y); gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y);
gl.uniform1i(locations['u_stroke_count'], state.stroke_count); gl.uniform1i(locations['u_stroke_count'], state.stroke_count);
gl.uniform1i(locations['u_debug_mode'], state.debug.red); gl.uniform1i(locations['u_debug_mode'], state.debug.red);
gl.uniform1i(locations['u_shrink'], 1);
gl.enableVertexAttribArray(locations['a_pos']); gl.enableVertexAttribArray(locations['a_pos']);
gl.enableVertexAttribArray(locations['a_line']); gl.enableVertexAttribArray(locations['a_line']);
@ -178,8 +177,6 @@ function draw(state, context) {
gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 4 * 3 + 4 * 4); gl.vertexAttribPointer(locations['a_color'], 3, gl.UNSIGNED_BYTE, true, config.bytes_per_point, 4 * 3 + 4 * 4);
gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4); gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT, config.bytes_per_point, 4 * 3 + 4 * 4 + 4);
gl.uniform1i(locations['u_shrink'], 0);
if (context.need_dynamic_upload) { if (context.need_dynamic_upload) {
gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.dynamic_serializer.buffer, 0, context.dynamic_serializer.offset), gl.DYNAMIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.dynamic_serializer.buffer, 0, context.dynamic_serializer.offset), gl.DYNAMIC_DRAW);
context.need_dynamic_upload = false; context.need_dynamic_upload = false;

58
client/webgl_shaders.js
Unescape View File

@ -113,7 +113,6 @@ const sdf_vs_src = `#version 300 es
uniform vec2 u_translation; uniform vec2 u_translation;
uniform int u_stroke_count; uniform int u_stroke_count;
uniform int u_shrink;
out vec4 v_line; out vec4 v_line;
out vec2 v_texcoord; out vec2 v_texcoord;
@ -125,36 +124,32 @@ const sdf_vs_src = `#version 300 es
vec2 screen01 = (a_pos.xy * u_scale + u_translation) / u_res; vec2 screen01 = (a_pos.xy * u_scale + u_translation) / u_res;
vec2 screen02 = screen01 * 2.0; vec2 screen02 = screen01 * 2.0;
if (u_shrink == 1) { float apron = 2.0;
// Inflate quad by 2 pixels (change to 1 when I figure out how to fix the prepass shit) vec2 line_dir = normalize(a_line.zw - a_line.xy);
float apron = 2.0; vec2 up_dir = vec2(line_dir.y, -line_dir.x);
vec2 line_dir = normalize(a_line.zw - a_line.xy); vec2 pixel = vec2(2.0) / u_res * apron;
vec2 up_dir = vec2(line_dir.y, -line_dir.x); float rscale = apron / u_scale.x;
vec2 pixel = vec2(2.0) / u_res * apron;
int vertex_index = gl_VertexID & 0x3;
int vertex_index = gl_VertexID % 4;
if (vertex_index == 0) {
if (vertex_index == 0) { // "top left" aka "p1"
// "top left" aka "p1" screen02 += up_dir * pixel - line_dir * pixel;
screen02 += up_dir * pixel - line_dir * pixel; v_texcoord = a_pos.xy + up_dir * rscale - line_dir * rscale;
v_texcoord = a_pos.xy + up_dir * 1.0 / u_scale - line_dir * 1.0 / u_scale; } else if (vertex_index == 1) {
} else if (vertex_index == 1) { // "top right" aka "p2"
// "top right" aka "p2" screen02 += up_dir * pixel + line_dir * pixel;
screen02 += up_dir * pixel + line_dir * pixel; v_texcoord = a_pos.xy + up_dir * rscale + line_dir * rscale;
v_texcoord = a_pos.xy + up_dir * 1.0 / u_scale + line_dir * 1.0 / u_scale; } else if (vertex_index == 2) {
} else if (vertex_index == 2) { // "bottom left" aka "p3"
// "bottom left" aka "p3" screen02 += -up_dir * pixel - line_dir * pixel;
screen02 += -up_dir * pixel - line_dir * pixel; v_texcoord = a_pos.xy - up_dir * rscale - line_dir * rscale;
v_texcoord = a_pos.xy - up_dir * 1.0 / u_scale - line_dir * 1.0 / u_scale;
} else {
// "bottom right" aka "p4"
screen02 += -up_dir * pixel + line_dir * pixel;
v_texcoord = a_pos.xy - up_dir * 1.0 / u_scale + line_dir * 1.0 / u_scale;
}
} else { } else {
v_texcoord = a_pos.xy; // "bottom right" aka "p4"
screen02 += -up_dir * pixel + line_dir * pixel;
v_texcoord = a_pos.xy - up_dir * rscale + line_dir * rscale;
} }
screen02.y = 2.0 - screen02.y; screen02.y = 2.0 - screen02.y;
v_line = a_line; v_line = a_line;
@ -187,8 +182,8 @@ const sdf_fs_src = `#version 300 es
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
float dist = length(pa - ba * h) - v_thickness / 2.0; float dist = length(pa - ba * h) - v_thickness / 2.0;
float fade = 0.5 * length(fwidth(v_texcoord)); float fade = length(fwidth(v_texcoord));
float alpha = 1.0 - smoothstep(-fade, fade, dist); float alpha = 1.0 - smoothstep(0.0, fade, dist);
FragColor = vec4(v_color * alpha, alpha); FragColor = vec4(v_color * alpha, alpha);
} else { } else {
@ -308,7 +303,6 @@ function init_webgl(state, context) {
'u_debug_mode': gl.getUniformLocation(context.programs['sdf'].main, 'u_debug_mode'), 'u_debug_mode': gl.getUniformLocation(context.programs['sdf'].main, 'u_debug_mode'),
'u_tile_size': gl.getUniformLocation(context.programs['sdf'].main, 'u_tile_size'), 'u_tile_size': gl.getUniformLocation(context.programs['sdf'].main, 'u_tile_size'),
'u_stroke_count': gl.getUniformLocation(context.programs['sdf'].main, 'u_stroke_count'), 'u_stroke_count': gl.getUniformLocation(context.programs['sdf'].main, 'u_stroke_count'),
'u_shrink': gl.getUniformLocation(context.programs['sdf'].main, 'u_shrink'),
} }
}; };

Write Preview
Loading…
Cancel
Save