圆形描边

实心圆用到中心的距离。描边（空心圆）需要测量另一个距离：到圆周的距离。

到圆周的距离

圆周是所有到中心距离等于半径 r 的点。一个像素到圆周的距离就是：

• d < r（圆内）：距离是 r - d
• d > r（圆外）：距离是 d - r
• d = r（圆周上）：距离是 0.0

用 smoothstep 生成描边

abs(d - r) < w 的区域遮罩接近 1（描边），超过 w + 0.006 的区域遮罩为 0（背景）。

练习

练习代码里 ring = 0.0（全背景色）。用 1.0 - smoothstep(w, w + 0.006, abs(d - r)) 计算遮罩，让圆形描边出现。

答案解析

abs(d - r) 把圆周当作「零点」：圆周上距离为 0，向内向外都增大。smoothstep 用这个距离做边缘衰减，w 控制描边宽度（半宽），0.006 控制边缘模糊度。

改变 w = 0.04 让描边更粗，改变 r = 0.2 让圆更小。