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 {