title: WebGL: Beveled smooth anti-aliased circles using GL_POINT?
body: <p>Sorry for such a long title.</p>
  
  <p><a href="https://stackoverflow.com/questions/40947092">This is a followup on my old question, which led me to drawing a beveled circle looking like this</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/JtkY3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JtkY3.png" alt="Old dodgy circle"></a></p>
  
  <p>If you look closely at this image, you can see the pixelation around the edge.</p>
  
  <p>I wanted to smooth this circle with anti-aliasing, and I ended up with this:</p>
  
  <p><a href="https://i.stack.imgur.com/4ggKK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4ggKK.png" alt="New dodgy circle"></a></p>
  
  <p>If you look closely at this image, you can see a white border around the edge.</p>
  
  <p>I'd like to remove this white border if possible, but my shader is a mess at this point:</p>
  
  <pre><code>#extension GL_OES_standard_derivatives : enable
  
  void main(void) {
  
      lowp vec2 cxy = 2.0 * gl_PointCoord - 1.0;
      lowp float radius = dot(cxy, cxy);
  
      const lowp vec3 ambient = vec3(0.5, 0.2, 0.1);
      const lowp vec3 lightDiffuse = vec3(1, 0.5, 0.2);
  
      lowp vec3 normal = vec3(cxy, sqrt(1.0 - radius));
      lowp vec3 lightDir = normalize(vec3(0, -1, -0.5));
      lowp float color = max(dot(normal, lightDir), 0.0);
  
      lowp float delta = fwidth(radius);
      lowp float alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, radius);
  
      gl_FragColor = vec4(ambient + lightDiffuse * color, alpha);
  }
  </code></pre>
  
  <p>If anyone could figure out how to remove the white border, that'd be fantastic!</p>