让着色器动起来

如果说 attribute 是“每个顶点一份”，那么 uniform 就是“整次绘制共享的一份”。本节我们引入 uTime，让画面随时间连续变化。这是 WebGL 动画中最常见、也最重要的模式。

目标

• 了解 uniform 的作用与传递方式（JavaScript → GLSL）
• 在渲染循环中每一帧更新 uTime
• 分清两类动画：改变顶点位置（顶点动画）与改变颜色（片元动画）

思路

1. 在 ShaderMaterial 中声明 uniforms: { uTime: { value: 0 } }。
2. 在顶点/片元着色器中声明 uniform float uTime;。
3. 在每一帧渲染前，把当前时间写回 uTime。

文件：Application.ts

• THREE.Clock 用来得到连续增长的时间值
• 在 renderLoop 中调用 customPanel.update(t)

你应当看到什么

平面会出现连续的波动（顶点位移），并伴随轻微的亮度变化（片元着色）。这两个变化都由同一个 uTime 驱动。

动手练习

• 把 uTime * 2.0 改成 uTime * 0.2，观察“慢动作”
• 把波形幅度从 3.0 改成 10.0，观察几何体形变
• 只保留片元的 uTime 变化（去掉顶点位移），思考：为什么这时几何体不动但颜色会动？

小结

你已经掌握了把“时间”送进着色器的方法。下一节我们将更进一步，理解坐标空间的差异，并用颜色把它们可视化出来。