GLSL的波纹效应需要澄清

Question

我一直在浏览这个博客,以获得简单的水波纹效果.它确实给出了一个很好的连锁反应.但是我不明白这就是这行代码

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).
• 想象一个2D平面,其原点位于中心,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)范围内移动像素看起来很奇怪.

这就是整个方程式.