GLSL的波纹效应需要澄清

Question

我一直在经历this blog的简单水波纹效应。确实给出了nice ripple effect。但我不明白这就是这行代码

vec2 uv = gl_FragCoord.xy/iResolution.xy+(cPos/cLength)*cos(cLength*12.0-iGlobalTime*4.0) * 0.03;

我不明白数学如何转化为这一行，并实现了很好的连锁反应。我需要帮助解密这一行背后的逻辑。

Answer 1

vec2 uv = gl_FragCoord.xy/iResolution.xy+(cPos/cLength)*cos(cLength*12.0-iGlobalTime*4.0) * 0.03;

要理解这个等式，我们可以将它分解成碎片，然后加入它们。

gl_FragCoord.xy/iResolution.xy

• gl_FragCoord.xy从（0,0）到（xRes，yRes）不等。
• 我们除以分辨率iResolution.xy。
• 所以“gl_FragCoord.xy / iResolution.xy”的范围是从（0,0）到（1,1）。
• 这是您的像素坐标位置。
• 因此，如果您提供“vec2 uv = gl_FragCoord.xy / iResolution.xy”，它将只是一个静态图像。

  

（CPOS / cLength）

• cPos的范围从（-1，-1）到（1,1）。
• 想象一下原点位于中心的二维平面，cPos是一个从原点指向当前像素的矢量。
• cLength会给你离中心的距离。
• “cPos / cLength”是单位矢量。
• 我们找到单位矢量的目的是找到像素必须被轻推的方向。

  

vec2 uv =   gl_FragCoord.xy / iResolution.xy +（CPOS / cLength）* COS（iGlobalTime）;

• 此等式将沿方向向量（单位向量）微移每个像素。但是所有的波都是沿着方向向量一致地推动的。效果看起来像是图像正在扩展和收缩。

• 为了获得波浪效应，我们必须引入相移。在波浪中，每个粒子都处于不同的相位。这可以通过cos（cLength * 12-iGlobalTime）引入。

  • 这里cLength对每个像素都不同。因此我们将此值视为像素的相位。
  • 乘以12是为了放大效果。

  

vec2 uv =   gl_FragCoord.xy / iResolution.xy +（CPOS / cLength）* COS（cLength * 12-iGlobalTime * 4.0）;

• 将iGlobalTime与4.0相乘会加快波浪速度。

• 最后将余弦乘积乘以0.03，将像素移动到范围（-0.03,0.03）的最大值，因为在（-1,1）范围内移动像素看起来很奇怪。

这就是整个方程式。