GLSL 效果示例

水波纹

从中心扩散的水波纹:沿距离变化的正弦波,随时间向外移动,再用 exp() 让它逐渐消失。

在线示例

修改右侧代码,左侧预览会实时更新。

工作原理

d 是到中心的距离,sin(d * 25.0) 就是一圈圈的环:距离相同的点值都一样。25.0 控制环之间有多密。

在正弦里减去 u_time * 4.0,波形会随时间平移。因为图案沿着距离重复,这种平移看起来就是圆环在往外扩散。

还有两处让它更像水:

  • exp(-d * 2.0) 在中心是 100%,随距离平滑衰减,所以波纹越往外越弱,就像真实的涟漪。
  • pow(0.5 + 0.5 * wave, 6.0) 只保留每个波的最顶端。把 0 到 1 的值做高次方,大部分值都会被压向 0,只剩波峰是亮的,变成细细的反光。

试着改一改

修改效果
25.0 改成 60.0很多密集的细波纹
- u_time * 4.0 改成 + u_time * 4.0圆环向内收缩
exp(-d * 2.0) 改成 1.0波纹永远不衰减
length(p) 改成 length(p - vec2(0.5, 0.3))水滴落在偏离中心的位置

用到的内置函数

一步步学会这个效果