旋转圆环
13 / 15
📝 练习目标
旋转极角并给圆环着色。
💡 💡 教程内容
旋转极角并给圆环着色。
概览
- 用极角作为渐变因子。
学习目标
- 使用 u_time 制作动画
前置知识
- uv-coordinates
输入
float u_time— 时间(秒)。
关键概念
- 角度来自
atan(y, x)。
float a = atan(p.y, p.x);
- 把角度归一化到
[0,1]并作为插值因子。
float t = (a + PI) / (2.0 * PI);
如何实现(步骤)
- 居中坐标:
p = vUv - 0.5。 - 角度:
a = atan(p.y, p.x)。 - 归一化:
t = (a + PI) / (2*PI)。 - 用
t混合颜色。
自检
- 是否能无错误编译?
- 输出是否符合目标?
- 关键数值是否在
[0,1]?
常见坑
- 必要时把
t用 clamp 限制到[0,1]。 smoothstep通常要保证edge0 < edge1。