Smoothstep Circle

A fragment shader computes distance from the center and uses smoothstep to draw a soft-edged circle.

Program

Per-pixel effects often start from a distance field. smoothstep turns an abrupt threshold into a small antialiasing band.

smooth_step_circle.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  vec2 uv = vUv * 2.0 - 1.0;
  float dist = length(uv);
  float edge = smoothstep(0.56, 0.60, dist);
  vec3 color = mix(vec3(0.12,0.78,0.70), vec3(0.03,0.06,0.16), edge);
  gl_FragColor = vec4(color, 1.0);
</script>

distance field A distance field stores distance to a shape boundary or center.

smoothstep smoothstep produces a smooth transition between two threshold values.