圆角矩形

圆角矩形的 SDF 只比普通矩形多一个参数——圆角半径 r：

下面拆解它。

---

和 sdBox 的区别

普通 sdBox 返回到矩形边界的距离，四个角是尖的。

sdRoundBox 在返回值里减去圆角半径 r：return … - r。这相当于把整个形状向外"膨胀"了 r，但四个角因为是用 length 算的，膨胀后自然就变成了圆弧——圆角出现了。

圆角半径越大，角就越圆；当 r 等于 b 的较小值时，就变成了椭圆或圆形。

---

参数是什么

调用 sdRoundBox(p, vec2(0.22, 0.14), 0.05)：

• p = 像素相对中心的位置（vUv - 0.5）
• vec2(0.22, 0.14) = 矩形半宽 0.22、半高 0.14
• 0.05 = 圆角半径

实际矩形宽 = 0.22 × 2 = 0.44，高 = 0.14 × 2 = 0.28，四角各有 0.05 的圆角。

---

试着改一改

改动	效果
把 0.05 改成 0.14	圆角很大，接近椭圆
把 0.05 改成 0.0	等同于普通矩形（直角）
把 vec2(0.22, 0.14) 改成 vec2(0.2, 0.2)	正方形，加圆角就是圆角正方形
把 0.01 改成 0.04	边缘柔化更明显

---

练习

调用 sdRoundBox(p, vec2(0.22, 0.14), 0.05) 计算距离 d，让画面显示一个白色圆角矩形。

答案解析

sdRoundBox 的实现与 sdBox 几乎相同，只在最后减去圆角半径 r = 0.05。这使每个角的尖锐区域被削去一个半径为 0.05 的圆弧，形成平滑圆角。1.0 - smoothstep(0.0, 0.01, d) 把负值（内部）映射为白色，正值（外部）映射为黑色。

练习起始是 float d = 0.0，整个画面都被视为恰在边界处，效果不正确。换成 sdRoundBox 调用就能看到圆角矩形。

试着把圆角半径从 0.05 改成 0.12，看看角的圆弧弧度变化。