时间动画

8 / 14
学习使用u_time uniform变量创建随时间变化的动画效果,理解sin函数在动画中的应用。

让整个画面的红色亮度随时间呼吸起来,核心就这两行:

下面拆解每个部分。


u_time 是什么

u_time 是一个从外部传进来的值,代表程序运行了多少秒。它一直在增长:0.0、0.5、1.2、3.7……

把它想象成一个一直走动的秒表。


sin 函数的作用

sin(u_time) 会把那个一直增长的时间值,变成一个在 -1.0 到 1.0 之间反复震荡的值。

就像钟摆:它不会一直往一边摆,而是来回摆动。


为什么要做 (oscillation + 1.0) * 0.5

sin 输出范围是 -1.0 到 1.0,但颜色值只接受 0.0 到 1.0(负数颜色没有意义)。

所以需要换算:

  • 先加 1.0:范围变成 0.0 到 2.0
  • 再乘以 0.5:范围压缩到 0.0 到 1.0

换算后,红色从 0%(全暗)到 100%(最亮)再回到 0%,循环往复。


试着改一改

改动效果
sin(u_time * 2.0)动画速度变为两倍快
sin(u_time * 0.3)动画变成缓慢的呼吸
vec4(0.0, normalizedOscillation, 0.0, 1.0)改为绿色呼吸
vec4(normalizedOscillation, normalizedOscillation, 0.0, 1.0)黄色呼吸

练习

练习区的画面是静态红色,用 sin(u_time) 让它的亮度随时间动起来,形成红色的呼吸效果。

答案解析

  • sin(u_time) 产生 -1.0 到 1.0 的震荡
  • (oscillation + 1.0) * 0.5 把范围换算到 0.0 到 1.0
  • vec4(normalizedOscillation, 0.0, 0.0, 1.0) 把这个值用作红色通道

起始代码是固定的红色,没有时间变量。加入 sin(u_time) 后,红色分量随时间变化,就产生了呼吸感。

试着把 * 0.5 改成 * 0.3,让暗部保留更多红色,呼吸幅度变小。

GLSL 代码编辑器

正确代码预览

当前代码预览