How to perform smoothstep antialiasing with rounded rectangles?

Question

I'm drawing a rounded rectangle with a GLSL shader using the following pixel shader:

float roundedBoxSDF(vec2 center, vec2 size, float radius) {
  return length(max(abs(center) - size + radius, 0.0)) - radius;
}

void main() {
  float edgeSoftness = 1.0;
  float distance = roundedBoxSDF(v_pos.xy - v_loc - (v_size / 2.0), v_size / 2.0, v_border_radius);
  float smoothing = smoothstep(0.0, edgeSoftness * 2.0, distance);

  outputColor = mix(vec4(0), v_color, 1.0 - smoothing);
}

and the corner looks like this at the moment:

Notice the black streak. I think it has to do with the vec4(0) in the final line, because if I change that to vec4(1, 1, 1, 0) , then I get the following result:

Even more unsightly. What am I doing wrong? If I change edgeSoftness to 0.0 , then it looks decent:

But it doesn't have any anti-aliasing. Is there any way to have an anti-aliased rounded rectangle without the unsightly edges? I'm not sure what I'm doing wrong.

Answer 1

Since outputColor takes premultiplied alpha , just multiplying the smoothing and the v_color would be enough:

outputColor = v_color * smoothing;