往返移动亮带
10 / 14
用 sin(u_time) 让一条软边亮带左右往返移动。
一条亮黄色的竖带在画面中来回弹跳。让它动起来就靠这一行：
下面拆解每个部分。
用 sin 生成来回弹跳的位置
sin(u_time) 输出 -1.0 到 1.0 之间的震荡值。
* 0.5 + 0.5 把它换算到 0.0～1.0，正好对应画面从左（0%）到右（100%）的位置。
这样 x 就是光带的当前中心位置，随时间在左右之间来回移动。
如何绘制光带
abs(vUv.x - x) 计算当前像素到光带中心的距离。
smoothstep(0.03, 0.06, d) 在距离 0.03 到 0.06 之间生成 0.0 到 1.0 的过渡：
- 距离小于 0.03 → 输出 0.0（在带内）
- 距离大于 0.06 → 输出 1.0（在带外）
1.0 - ...反转，让带内为 1.0（亮），带外为 0.0（暗）
最终颜色混合
m = 1.0 时（带内）显示亮黄色，m = 0.0 时（带外）显示深色背景。
试着改一改
| 改动 | 效果 |
|---|---|
sin(u_time * 2.0) | 光带弹跳速度加倍 |
smoothstep(0.01, 0.015, d) | 光带变细，边缘更锐利 |
smoothstep(0.05, 0.15, d) | 光带变宽，边缘渐变更柔和 |
把 vUv.x 换成 vUv.y | 水平光带上下弹跳 |
练习
练习区的光带固定在画面中央，把 float x = 0.5 改成用 sin(u_time) 计算出来的值，让光带左右弹跳起来。
答案解析
sin(u_time)产生 -1.0 到 1.0 的震荡* 0.5 + 0.5换算到 0.0～1.0，对应画面宽度
起始代码里 x = 0.5 是常量，光带永远在中间。换成 sin(u_time) * 0.5 + 0.5 后，x 随时间在 0 到 1 之间来回变化，光带就开始弹跳。
试着把 * 0.5 + 0.5 改成 * 0.3 + 0.5，光带的弹跳范围会缩小，只在画面中央附近来回。