javascript - Webgl：2D 中的水效果

Question

我正在使用 webgl 中的三角剖分渲染一个简单的多边形。现在我希望它看起来像蓝色的水，具有波纹或折射等效果。因为我没有网格，所以我只能使用片段着色器。任何建议如何实现这一目标？

Answer 1

使用多种纹理，例如水的蓝色，焦散的黑白焦散和地板的石头纹理。然后编写片段着色器，它会随着时间的推移扭曲纹理并模拟你想要的不同效果。

希望这可以帮助。

Answer 2

几年前我整理了这个 VFX shadertoy Water2D 演示。它不做反射，相机直接在头顶向下看，但也许它会帮助你开始。

const float speed     = 0.2;                      
const float frequency = 8.0;                  

vec2 shift( vec2 p )
{                        
    float d = iGlobalTime*speed;
    vec2 f = frequency * (p + d);
    vec2 q = cos( vec2(                        
       cos(f.x-f.y)*cos(f.y),                       
       sin(f.x+f.y)*sin(f.y) ) );                   
    return q;                                  
}                                             

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{                                 
    vec2 r = fragCoord.xy / iResolution.xy;                      
    vec2 p = shift( r );             
    vec2 q = shift(r + 1.0);                        
    float amplitude = 2.0 / iResolution.x;   
    vec2 s = r + amplitude * (p - q);
    s.y = 1. - s.y; // flip Y axis for ShaderToy
    fragColor = texture( iChannel0, s );
}