中心圆遮罩

学习目标

你将学习如何使用 GLSL 中的 distance() 与 step() 函数，在片元着色器中绘制一个以画布中心为圆心的圆形遮罩区域，并通过颜色混合渲染出效果。

这类技术广泛用于图形构建、UI 遮罩、特效动画等场景。

---

核心概念详解

1. distance(a, b)：计算两点之间的距离

在 UV 空间中，我们可以通过以下方式计算当前像素（vUv）与中心点之间的距离：

`glsl

vec2 center = vec2(0.5, 0.5);

float dist = distance(vUv, center);

`

结果 dist 是当前片元离中心点有多远。

---

2. step(edge, x)：构建图形边界的二值函数

step 是一种判断型函数，它的定义是：

`glsl

float result = step(edge, x);

`

- 如果 x < edge，结果为 0；

- 如果 x >= edge，结果为 1。

---

3. 构造圆形遮罩

我们希望构造一个半径为 0.3 的圆形遮罩，只在圆形范围内显示颜色：

`glsl

float inside = step(dist, 0.3);

`

- 当像素在圆内，dist < 0.3，返回 1.0

- 在圆外，dist > 0.3，返回 0.0

遮罩值 inside 现在就可以用来控制颜色混合。

---

4. mix(a, b, t)：按遮罩值混合颜色

我们根据遮罩值来混合颜色：

`glsl

vec3 color = mix(vec3(0.0), vec3(1.0, 0.8, 0.2), inside);

`

当 inside = 0 显示黑色背景，当 inside = 1 显示金黄色的圆形。

最终输出：

`glsl

gl_FragColor = vec4(color, 1.0);

`

就完成了一个清晰、居中的圆形遮罩图形。