Sin/Cos 曲线
5 / 18
练习着色器中常用的数学基础积木。
sin() 函数能把一个随时间变化的数值变成「来回摇摆」的运动。把它用在 y 坐标上，就能画出流动的波浪线：
sin() 输出什么
sin() 的返回值在 −1 到 +1 之间循环变化。直接用这个值做坐标会超出画布范围，所以需要缩放和偏移：
* 0.25：把振幅从 ±1 压缩到 ±0.25，波浪不会碰到边缘+ 0.5：把中心线从 0 移到画布正中（UV 的 0.5）
x * 6.2831853 是什么
6.2831853 就是 2π，表示「一整圈」。把 vUv.x（0 到 1）乘以 2π，波形在画布横向恰好完成一个完整周期。想要更密的波浪就乘更大的数，比如 12.566（4π）会出现两个周期。
+ u_time 让波动起来
u_time 是不断增大的时间值。加在 sin() 的参数里，相当于每帧都在「推动」波形向左移动，形成动画效果。
如何把 y 变成一条线
知道波形上每一点的 y 值之后，用当前像素的 vUv.y 减去它，取绝对值得到「距离」，再用 smoothstep 把距离映射成亮度：
smoothstep(0.0, 0.01, d) 在距离 0–0.01 之间从 0 过渡到 1，用 1.0 - 反转后，距离为 0 的地方亮度最高（白色），远处为 0（背景色）。
试着改一改
| 改动 | 效果 |
|---|---|
6.2831853 改为 18.849 | 出现三个周期的密集波浪 |
0.25 改为 0.45 | 波浪幅度增大，几乎触及上下边缘 |
0.01 改为 0.05 | 线条变粗，边缘更模糊 |
u_time 改为 u_time * 3.0 | 波浪流动速度加快 |
练习
把 float y = 0.5; 替换为正确的正弦波计算，让一条蓝色波浪线在画布上流动。
答案解析
初始状态：y = 0.5 是一条固定的水平线，不随 x 变化，也不会动。
修改后：vUv.x * 6.2831853 让波形在横向走完一个完整的正弦周期；+ u_time 让相位随时间偏移，形成向左流动的动画；* 0.25 + 0.5 把 sin() 的 ±1 范围压缩并居中到画布的中间区域。
试着把 * 0.25 改为 * 0.48，体验波峰几乎碰到画布顶部的极限感。