From c1fd46da530e405a0b6d1bb873c914af01233180 Mon Sep 17 00:00:00 2001 From: "A.Olokhtonov" Date: Thu, 24 Aug 2023 15:23:21 +0300 Subject: [PATCH] We have achieved good AA! --- client/index.html | 24 ++++++++++++------------ client/math.js | 2 +- client/webgl_geometry.js | 26 -------------------------- client/webgl_shaders.js | 30 +++++++++++++++++++++++++++++- 4 files changed, 42 insertions(+), 40 deletions(-) diff --git a/client/index.html b/client/index.html index cdf999d..3632657 100644 --- a/client/index.html +++ b/client/index.html @@ -7,20 +7,20 @@ - + - - - - - - - - + + + + + + + + - - - + + +
diff --git a/client/math.js b/client/math.js index 09353fe..f005882 100644 --- a/client/math.js +++ b/client/math.js @@ -7,7 +7,7 @@ function screen_to_canvas(state, p) { } function rdp_find_max(state, points, start, end) { - const EPS = 0.5 / state.canvas.zoom; + const EPS = 0.5 / Math.pow(state.canvas.zoom, 0.5); // const EPS = 10.0; let result = -1; diff --git a/client/webgl_geometry.js b/client/webgl_geometry.js index 6ea340c..c329b7a 100644 --- a/client/webgl_geometry.js +++ b/client/webgl_geometry.js @@ -66,32 +66,6 @@ function push_stroke(context, stroke) { let p4_x = to.x + (-up_x + dir1_x) * radius; let p4_y = to.y + (-up_y + dir1_y) * radius; - // TODO: floor, ceil corners depending on direction of line - - if (p1_x < p2_x) { - p1_x = Math.floor(p1_x); - p3_x = Math.floor(p3_x); - p2_x = Math.ceil(p2_x); - p4_x = Math.ceil(p4_x); - } else { - p1_x = Math.ceil(p1_x); - p3_x = Math.ceil(p3_x); - p2_x = Math.floor(p2_x); - p4_x = Math.floor(p4_x); - } - - if (p1_y < p2_y) { - p1_y = Math.floor(p1_y); - p3_y = Math.floor(p3_y); - p2_y = Math.ceil(p2_y); - p4_y = Math.ceil(p4_y); - } else { - p1_y = Math.ceil(p1_y); - p3_y = Math.ceil(p3_y); - p2_y = Math.floor(p2_y); - p4_y = Math.floor(p4_y); - } - push_quad(context.static_serializer, p1_x, p1_y, p2_x, p2_y, diff --git a/client/webgl_shaders.js b/client/webgl_shaders.js index cc75166..066940a 100644 --- a/client/webgl_shaders.js +++ b/client/webgl_shaders.js @@ -16,10 +16,36 @@ const sdf_vs_src = `#version 300 es void main() { vec2 screen01 = (a_pos.xy * u_scale + u_translation) / u_res; vec2 screen02 = screen01 * 2.0; + + // Inflate quad by 1 pixel + float apron = 1.0; + vec2 line_dir = normalize(a_line.zw - a_line.xy); + vec2 up_dir = vec2(line_dir.y, -line_dir.x); + vec2 pixel = vec2(2.0) / u_res * apron; + + int vertex_index = gl_VertexID % 6; + + if (vertex_index == 0) { + // "top left" aka "p1" + 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 if (vertex_index == 1 || vertex_index == 5) { + // "top right" aka "p2" + 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 if (vertex_index == 2 || vertex_index == 4) { + // "bottom left" aka "p3" + 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 { + // "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; + } + screen02.y = 2.0 - screen02.y; v_line = a_line; - v_texcoord = a_pos.xy; v_color = a_color; v_thickness = a_pos.z; @@ -51,6 +77,8 @@ const sdf_fs_src = `#version 300 es float fade = 0.5 * length(fwidth(v_texcoord)); float alpha = 1.0 - smoothstep(-fade, fade, dist); + // float alpha = 1.0 - step(0.0, dist); + if (u_debug_mode == 1) { FragColor = vec4(1.0, 0.0, 0.0, 1.0); } else {