How can I have smooth circle borders?

Questions
1

hi

I created the following mesh with a planeGeometry and RawShaderMaterial.

However, the borders of the circle are getting crowded as the camera gets further away.

I don’t know how to fix it and need some help.

2

There isn’t much point in using smoothstep just to check if it’s bigger than zero. Normally you would use it to make smooth gradients, is that what you’re trying to achieve?

To put smoothstep to use, and have a smooth outer edge, you could do something like this:

	float circle(vec2 _st, vec2 _center, float _radius, float fact){
		vec2 dist = _st - _center;
		float distance = length(dist);
		return 1.0 - smoothstep(_radius, _radius*fact, distance);
	}
	
	void main() {
		vec2 st = vUv * 2.0 - 1.0;

		vec2 center = vec2(0.0);
		float radius = 0.5;

    float smooth = circle(st, center, radius, 1.05);
		if(smooth > 0.0) {
			vec3 color = vec3(smooth);
			gl_FragColor = vec4( color, 1.0 );
		} else { discard; }		

    float radius2 = 0.4;
    
    smooth = circle(st, center, radius2, 1.0);
		if(smooth > 0.0) {
			vec3 color2 = u_color*smooth;

			gl_FragColor = vec4( color2, 1.0 );
		}
  }

image