diff --git a/client/webgl_draw.js b/client/webgl_draw.js index 80eb66e..ec2a163 100644 --- a/client/webgl_draw.js +++ b/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) - 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); + 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); diff --git a/client/webgl_shaders.js b/client/webgl_shaders.js index f63b274..b5dfce3 100644 --- a/client/webgl_shaders.js +++ b/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);