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 );
}