中心圆遮罩
7 / 18
使用 distance() 创建一个以画布中心为圆心的遮罩区域。
用距离和 step 判断每个像素是否在圆内：
下面拆解它。
distance 计算距离
distance(a, b) 返回两点的直线距离。
distance(vUv, vec2(0.5, 0.5)) 就是每个像素到画面中心的距离：
- 中心像素 distance = 0
- 半径 0.3 处的像素 distance = 0.3
- 角落附近 distance ≈ 0.7
step 生成硬边遮罩
step(edge, x) 的判断规则是：x < edge 返回 0，x ≥ edge 返回 1。
这里用的是 step(dist, radius) ——注意参数顺序：
- dist < radius → step 返回 1（在圆内）
- dist ≥ radius → step 返回 0（在圆外）
结果是一个硬边圆形遮罩：圆内为 1，圆外为 0。
mix 把遮罩变成颜色
inside = 1（圆内）→ 显示暖黄色vec3(1.0, 0.8, 0.2)inside = 0（圆外）→ 显示黑色vec3(0.0)
试着改一改
| 改动 | 效果 |
|---|---|
把 radius 从 0.3 改成 0.15 | 圆变小 |
把 center 改成 vec2(0.3, 0.7) | 圆心移到左上角 |
把 step(dist, radius) 改成 1.0 - step(dist, radius) | 圆内变黑，圆外变黄 |
用 smoothstep(radius - 0.01, radius + 0.01, dist) 替换 | 边缘变成柔和过渡 |
练习
定义中心点和半径，用 distance 计算距离，用 step 生成遮罩，再用 mix 混合颜色后输出。
答案解析
distance(vUv, center) 算出每个像素到中心的距离。step(dist, radius) 判断该距离是否在半径以内——小于 radius 返回 1（圆内），大于等于返回 0（圆外）。mix 用这个 0/1 遮罩在黑色和黄色之间切换。
练习是空的 main()，需要从头补全六行代码。
试着把 step 换成 1.0 - smoothstep(0.29, 0.31, dist) 看看边缘软化的效果。