circle: Distance Field Circle Rendering

Mathematical Foundation

Circle rendering operates on distance field calculations. The distance from any point to the circle boundary determines the final visual result through different interpretation methods.

$$d = \|uv - center\|_2 \times 2$$

Live Editor

const fragment = () => {
      const fillResult = circle(uv, 1)
      const strokeResult = circleWithStroke(uv, 1, 0.05)
      const divider = uv.x.lessThan(0.5).toFloat()
      const left = divider.mul(fillResult)
      const right = divider.oneMinus().mul(strokeResult)
      const final = left.add(right)
      return vec4(vec3(final), 1)
}