Uneven capsules (and a very naive shader) to draw getter variable-width lines

client/webgl_draw.js

@@ -137,7 +137,7 @@ function draw(state, context) {
         gl.vertexAttribPointer(locations['a_a'],          2, gl.FLOAT,         false, 2 * 4, 0);
         gl.vertexAttribPointer(locations['a_b'],          2, gl.FLOAT,         false, 2 * 4, 2 * 4);
         gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT,                  4, context.instance_data_points.size * 4);
-        gl.vertexAttribPointer(locations['a_pressure'],   1, gl.UNSIGNED_BYTE, true,  1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);
+        gl.vertexAttribPointer(locations['a_pressure'],   2, gl.UNSIGNED_BYTE, true,  1, context.instance_data_points.size * 4 + context.instance_data_ids.size * 4);
 
         gl.vertexAttribDivisor(locations['a_a'], 1);
         gl.vertexAttribDivisor(locations['a_b'], 1);
@@ -181,7 +181,7 @@ function draw(state, context) {
         gl.vertexAttribPointer(locations['a_a'],          2, gl.FLOAT,         false, 2 * 4, 0);
         gl.vertexAttribPointer(locations['a_b'],          2, gl.FLOAT,         false, 2 * 4, 2 * 4);
         gl.vertexAttribIPointer(locations['a_stroke_id'], 1, gl.INT,                  4, context.dynamic_instance_points.size * 4);
-        gl.vertexAttribPointer(locations['a_pressure'],   1, gl.UNSIGNED_BYTE, true,  1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);
+        gl.vertexAttribPointer(locations['a_pressure'],   2, gl.UNSIGNED_BYTE, true,  1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);
 
         gl.vertexAttribDivisor(locations['a_a'], 1);
         gl.vertexAttribDivisor(locations['a_b'], 1);

client/webgl_shaders.js

@@ -105,7 +105,8 @@ const sdf_vs_src = `#version 300 es
     in vec2 a_a; // point from
     in vec2 a_b; // point to
     in int a_stroke_id;
-    in float a_pressure;
+
+    in vec2 a_pressure;
 
     uniform vec2 u_scale;
     uniform vec2 u_res;
@@ -119,7 +120,7 @@ const sdf_vs_src = `#version 300 es
     out vec2 v_texcoord;
     out vec3 v_color;
 
-    flat out float v_thickness;
+    flat out vec2 v_thickness;
 
     void main() {
         vec2 screen02; 
@@ -159,14 +160,14 @@ const sdf_vs_src = `#version 300 es
             outwards = -up_dir + line_dir;
         }
       
-        vec2 pos = origin + normalize(outwards) * radius * 2.0; // doubling is to account for max possible pressure
+        vec2 pos = origin + normalize(outwards) * radius * 2.0 * max(a_pressure.x, a_pressure.y); // doubling is to account for max possible pressure
         screen02 = (pos.xy * u_scale + u_translation) / u_res * 2.0 + outwards * pixel;
         v_texcoord = pos.xy + outwards * rscale;
 
         screen02.y = 2.0 - screen02.y;
 
         v_line = vec4(a_a, a_b);        
-        v_thickness = radius * a_pressure * 2.0; // pressure 0.5 is the "neutral" pressure
+        v_thickness = radius * a_pressure; // pressure 0.5 is the "neutral" pressure
         v_color = vec3(stroke_data.xyz) / 255.0;
 
         if (a_stroke_id >> 31 != 0) {
@@ -186,7 +187,7 @@ const sdf_fs_src = `#version 300 es
     in vec2 v_texcoord;
     in vec3 v_color;
 
-    flat in float v_thickness;
+    flat in vec2 v_thickness;
 
     layout(location = 0) out vec4 FragColor;
 
@@ -196,8 +197,23 @@ const sdf_fs_src = `#version 300 es
             vec2 b = v_line.zw;
 
             vec2 pa = v_texcoord - a.xy, ba = b.xy - a.xy;
-            float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+            float h = dot(pa, ba) / dot(ba, ba);
-            float dist = length(pa - ba * h) - v_thickness / 2.0;
+            /*
+            float dist = length(pa - ba * h) - v_thickness.y / 2.0;
+            */
+
+            float dist;
+            float r1 = v_thickness.x;
+            float r2 = v_thickness.y;
+
+            if (h < 0.0) {
+                dist = length(v_texcoord - a) - r1;
+            } else if (0.0 <= h && h < 1.0) {
+                vec2 Q = a + ba * h; 
+                dist = length(v_texcoord - Q) - (r1 + (r2 - r1) * length(Q - a) / length(ba));
+            } else {
+                dist = length(v_texcoord - b) - r2;
+            }
 
             float fade = 0.5 * length(fwidth(v_texcoord));
             float alpha = 1.0 - smoothstep(-fade, fade, dist);