Fix warning when dynamic draw has only a single point. Fragment shader fix is untested.

client/webgl_draw.js

@@ -354,8 +354,15 @@ async function draw(state, context, animate, ts) {
         gl.enableVertexAttribArray(pr.locations['a_pressure']);
 
         // Points (a, b) and stroke ids are stored in separate cpu buffers so that points can be reused (look at stride and offset values)
+        if (context.dynamic_instance_ids.size > 1) {
             gl.vertexAttribPointer(pr.locations['a_a'],          2, gl.FLOAT,         false, 2 * 4, 0);
             gl.vertexAttribPointer(pr.locations['a_b'],          2, gl.FLOAT,         false, 2 * 4, 2 * 4);
+        } else {
+            // A special case where there is no second point. Reuse the first point and handle the zero length segment in the shader
+            gl.vertexAttribPointer(pr.locations['a_a'],          2, gl.FLOAT,         false, 2 * 4, 0);
+            gl.vertexAttribPointer(pr.locations['a_b'],          2, gl.FLOAT,         false, 2 * 4, 0);
+        }
+
         gl.vertexAttribIPointer(pr.locations['a_stroke_id'], 1, gl.INT,                  4, context.dynamic_instance_points.size * 4);
         gl.vertexAttribPointer(pr.locations['a_pressure'],   2, gl.UNSIGNED_BYTE, true,  1, context.dynamic_instance_points.size * 4 + context.dynamic_instance_ids.size * 4);
 

client/webgl_shaders.js

@@ -94,8 +94,16 @@ 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 dist = length(v_texcoord - (a + ba * h)) - mix(v_thickness.x, v_thickness.y, h);
+            float dba = dot(ba, ba);
+            float dist;
+
+            if (dba > 0.0) {
+                float h = clamp(dot(pa, ba) / dba, 0.0, 1.0);
+                dist = length(v_texcoord - (a + ba * h)) - mix(v_thickness.x, v_thickness.y, h);
+            } else {
+                // Special case for when we are drawing a single point. Just a circle SDF
+                dist = length(v_texcoord - a.xy - v_thickness.x);
+            }
 
             float fade = 0.5 * length(fwidth(v_texcoord));
             float alpha = 1.0 - smoothstep(-fade, fade, dist);