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

client/webgl_draw.js

@@ -137,7 +137,6 @@ function draw(state, context) {
             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_debug_mode'], state.debug.red);
-            gl.uniform1i(locations['u_shrink'], 1);
 
             gl.enableVertexAttribArray(locations['a_pos']);
             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.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) {
             gl.bufferData(gl.ARRAY_BUFFER, new Uint8Array(context.dynamic_serializer.buffer, 0, context.dynamic_serializer.offset), gl.DYNAMIC_DRAW);
             context.need_dynamic_upload = false;

client/webgl_shaders.js

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