GLSL 效果示例
圆形
用有向距离函数、length() 和 smoothstep() 画一个边缘干净、没有锯齿的圆。
在线示例
修改右侧代码，左侧预览会实时更新。
工作原理
每个像素都只问一个问题：我离中心有多远？length(p) 给出这个距离。减去半径之后，它就变成了有向距离：圆内是负数，正好在边上是 0，圆外是正数。
smoothstep(-px, px, d) 把这个距离变成 0 到 1 的遮罩。px 是一个像素的大小，所以边缘会在大约两个像素内渐变过去。这样就去掉了用 step() 硬切时出现的锯齿。
第一行把像素坐标换算到中心是 (0, 0)、画布短边从 -1 到 1 的范围。如果不除以短边，宽画布上的圆会被拉成椭圆。
试着改一改
| 修改 | 效果 |
|---|---|
0.6 改成 0.3 | 圆变小（半径是半高的 30%） |
px 改成 0.2 | 边缘变成柔和的光晕，而不是清晰的边 |
length(p) 改成 length(p * vec2(1.0, 2.0)) | 变成上下压扁的椭圆 |
1.0 - smoothstep(...) 改成 smoothstep(...) | 颜色反过来：填充背景上挖出一个洞 |