如何使用GLSL片段着色器实现这种波动？

所以我已经实现了反射部分：

uniform sampler2D texture;
uniform vec2 resolution;
uniform vec3 overlayColor;

void main()
{
vec2 uv = gl_FragCoord.xy / resolution.xy;

if (uv.y > 0.3)// is air - no reflection or effect
{
    gl_FragColor = texture2D(texture, vec2(uv.x, uv.y));
}
else
{
    // Compute the mirror effect.
    vec4 color = texture2D(texture, vec2(uv.x, 0.6 - uv.y));
    // 
    vec4 finalColor = vec4(mix(color.rgb, overlayColor, 0.25), 1.0);
    gl_FragColor = finalColor;
}
}

资源

现在的问题是这些涟漪如何实现？

我试图实现teodron的建议：

void main()
{
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    float sepoffset = 0.005*cos(iGlobalTime*3.0);
    if (uv.y > 0.3 + sepoffset)// is air - no reflection or effect
    {
        gl_FragColor = texture2D(texture, vec2(uv.x, -uv.y));
    }
    else
    {
        // Compute the mirror effect.
        float xoffset = 0.005*cos(iGlobalTime*3.0+200.0*uv.y);
        //float yoffset = 0.05*(1.0+cos(iGlobalTime*3.0+50.0*uv.y));
        float yoffset = ((0.3 - uv.y)/0.3) * 0.05*(1.0+cos(iGlobalTime*3.0+50.0*uv.y));
        vec4 color = texture2D(texture, vec2(uv.x+xoffset , -1.0*(0.6 - uv.y+ yoffset)));
        // 
        //vec4 finalColor = vec4(mix(color.rgb, overlayColor, 0.25), 1.0);
        gl_FragColor = color;
    }
}

它看起来很接近（没有基本图像很难说），但是您可以调整参数。

您可能会看到它在起作用：https : //www.shadertoy.com/view/Xll3R7

一些说明：

• 因为我将图像上下颠倒，所以必须反转y坐标，但这可能取决于您传递给resolution的内容。如果结果对您不利，只需取消uv.y
• 我更改了您的统一声明，使其可以与shadertoy一起使用。您可以忽略这些更改。
• 但是，您将需要添加一个提供时间的制服并使用它代替iGlobalTime（以秒为单位的时间）
• 我添加了一个潮汐效果，因为在您的示例中看起来像一个潮汐效果，但是很难分辨（请参见sepoffset变量）。如果您不喜欢它，可以将其删除
• 我删除了叠加色，因为它看起来不太好，而且您的示例中没有
• 调整效果以符合您的口味：
  • 更改iGlobalTime的因数以加快/减慢效果（可以根据需要分别更改它们，例如，加快x的移动并降低y的移动）
  • 更改cos（）因子以放大/减弱效果

编辑：我更改了yoffset以包括来自@cepro的修改