渐变的圆形

上一节我们输出的是常量颜色。本节我们让颜色随位置变化，并画出一个圆形区域。你将第一次用到 varying（传递数据）与 uv（二维坐标），以及几个常见的 GLSL 函数：distance、mix、clamp、discard。

目标

• 在顶点着色器中获取 uv 并通过 varying 传递到片元着色器
• 在片元着色器中计算到中心点的距离，并用它控制渐变
• 使用 discard 丢弃圆外像素，得到“圆形裁剪”效果

思路

1. 每个顶点都有一份 uv（范围通常在 [0,1]）。
2. 顶点着色器把 uv 赋值给 vUv，传递给片元着色器。
3. 片元着色器计算 vUv 到中心点 (0.5, 0.5) 的距离 dist：

float dist = distance(vUv, vec2(0.5, 0.5));

4. 用 mix 在两种颜色之间插值，插值系数来自 dist（并用 clamp 限制在 [0,1]）。
5. 若 dist 超过阈值则丢弃：

if (dist > 0.5) discard;

代码要点

文件：CustomPanel.ts

• 顶点着色器中声明并赋值：

varying vec2 vUv;
vUv = uv;

• 片元着色器中用 vUv 计算距离并生成颜色。

动手练习

• 把圆半径从 0.5 改成 0.3 或 0.7，观察裁剪范围变化
• 把 center 改成 vec2(0.2, 0.7)，让圆形移动
• 把 mix 的插值系数改成 dist * dist，观察渐变的“过渡曲线”变化

小结

你已经掌握了“把数据从顶点阶段传到片元阶段”的基本方法，并用少量数学得到可见的形状。下一节我们将引入 normal（法线），用它让不同朝向的面呈现不同效果。