Question

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

Answer 1

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

希望这有帮助。

Answer 2

几年前我把这个VFX shadertoy Water2D demo放在一起。它没有反射，相机直接俯视，但也许它会帮助你开始。

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

Webgl：2D中的水效果

2 个答案: