My shader renders ugly edges

[janvarsa]

I'm trying to make a 2D scene by rendering squares (planeBufferGeometry) of various sizes and using a fragment shader to make them appear circular by discarding pixels beyond the radius. This works but renders with ugly jagged edges. I also tried adding an FXAA shader pass but saw no effect (I may have done this incorrectly however).

Each element is initialized like this:

      <mesh
        visible
        key={i}
        ref={(el) => (meshRef.current[i] = el)}
        position={[0, 0, 0]}
      >
        <planeBufferGeometry args={[size, size]} />
        <shaderMaterial
          args={{
            vertexShader: MyShader.vertexShader,
            fragmentShader: MyShader.fragmentShader,
          }}
        />
      </mesh>

My shader is awkwardly coded as follows but gives the circular shape with a black border:

const MyShader = {
  vertexShader: `
        varying vec2 vUv;
        void main() {
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }`,
  fragmentShader: `
  varying vec2 vUv;
  void main() {
    vec2 dist = vUv-vec2(0.5);
    float length = sqrt(dot(dist,dist));
    if (length < 0.45)
      gl_FragColor = vec4(0.13, 0.70, 0.67, 1.);
    else if (length >= 0.45 && length <=0.48)
      gl_FragColor = vec4(0., 0., 0., 1.);
    else
      discard;
  }
};

Basic canvas setup:

          <View style={styles.container}>
            <Canvas orthographic={true}>
              <ambientLight />
              <MyCircles dimensions={dimensions} data={dataRef.current} />
            </Canvas>
          </View>

And these are the ugly circles I'd like to clean up: