GLSL 效果示例

圆角矩形

带填充和描边的圆角矩形有向距离函数，是在 shader 里画按钮和 UI 卡片的基础。

在线示例

修改右侧代码，左侧预览会实时更新。

sdRoundedBox 返回像素到矩形边缘的有向距离，作用和圆形的 length(p) - r 一样。它靠三个技巧完成：

abs(p) 把四个象限折叠到一个象限，函数只需要处理右上角。
abs(p) - b + r 算出像素超出一个缩小版矩形多少。在缩小版矩形外面，length(max(q, 0.0)) 就是到它角上的距离，角就是这样变圆的。
最后减去 r，把缩小的矩形按圆角半径重新撑大回来。

因为它是距离，同一个值能得到两种形状：d < 0 是填充，abs(d) < 0.02 是贴着边缘的一条细带，也就是描边。