Fwidth in the shader for "more gooder" AA

client/index.js

@@ -11,7 +11,7 @@ const config = {
     buffer_first_touchmoves: 5,
     debug_print: true,
     min_zoom: 0.05,
-    max_zoom: 10.0,
+    max_zoom: 100.0,
     initial_offline_timeout: 1000,
     default_color: 0x00,
     default_width: 8,

client/math.js

@@ -13,6 +13,7 @@ function point_right_of_line(a, b, p) {
 
 function rdp_find_max(state, points, start, end) {
     const EPS = 0.5 / state.canvas.zoom;
+    // const EPS = 10.0;
 
     let result = -1;
     let max_dist = 0;

client/webgl_draw.js

@@ -4,6 +4,7 @@ function schedule_draw(state, context) {
         state.timers.raf = true;
     }
 }
+
 function draw(state, context) {
     state.timers.raf = false;
 

client/webgl_shaders.js

@@ -11,7 +11,6 @@ const stroke_vs_src = `
     varying vec3 v_color;
     varying vec2 v_texcoord;
     varying float v_type;
-    varying float v_scale;
 
     void main() {
         vec2 screen01 = (a_pos * u_scale + u_translation) / u_res;
@@ -20,33 +19,29 @@ const stroke_vs_src = `
         screen02.y = 2.0 - screen02.y;
         
         v_color = a_color;
-        v_texcoord = a_texcoord * 2.0 - 1.0;
+        v_texcoord = a_texcoord;
         v_type = a_type;
-        v_scale = u_scale.x;
 
         gl_Position = vec4(screen02 - 1.0, 0, 1);
     }
 `;
 
 const stroke_fs_src = `
+    #extension GL_OES_standard_derivatives : enable
+
     precision mediump float;
 
     varying vec3 v_color;
     varying vec2 v_texcoord;
     varying float v_type;
-    varying float v_scale;
 
     void main() {
-        float v;
-
-        if (v_type > 0.5) {
-            v = length(v_texcoord);
-        } else {
-            v = abs(v_texcoord.y);
-        }
+        vec2 uv = v_texcoord * 2.0 - 1.0;
+        float sdf = 1.0 - mix(abs(uv.y), length(uv), v_type);
+        float pd = fwidth(sdf);
+        float alpha = 1.0 - smoothstep(pd, 0.0, sdf);
 
-        float col = smoothstep(1.0, (1.0 - 0.05 / v_scale), v);
-        gl_FragColor = vec4(col * v_color, col);
+        gl_FragColor = vec4(v_color * alpha, alpha);
     }
 `;
 
@@ -90,7 +85,7 @@ const tquad_fs_src = `
 function init_webgl(state, context) {
     context.canvas = document.querySelector('#c');
     context.gl = context.canvas.getContext('webgl', {
-        'preserveDrawingBuffer': false,
+        'preserveDrawingBuffer': true,
         'desynchronized': true,
         'antialias': false,
     });
@@ -99,6 +94,7 @@ function init_webgl(state, context) {
 
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.getExtension('OES_standard_derivatives');
 
     const stroke_vs = create_shader(gl, gl.VERTEX_SHADER, stroke_vs_src);
     const stroke_fs = create_shader(gl, gl.FRAGMENT_SHADER, stroke_fs_src);