一个模拟2D水波荡漾Shader的研究

最初是看GPU Gem开篇介绍怎么模拟水面的，当时看不懂，以为2D的容易懂：

最近看GPU Gem讲水面的，没搞懂，退而求其次，先搞懂2D的水纹实现。

从移植:在Cocos2d-X中实现水波滤镜这篇文章看到这个Shader，Shader的实现似乎是来自这位github 用户。

为了测试，对Shader的源码稍作修改，就可以在shadertoy看效果：

const float PI = 3.1415926535897932;  

const float speed = 0.2;  
const float speed_x = 0.3;  
const float speed_y = 0.3;  

const float intensity = 3.0;  
const int steps = 8;  
const float frequency = 4.0;  
const int angle = 7; 

const float delta = 20.0;  
const float intence = 400.0;  
const float emboss = 0.3;  

float col(vec2 coord)  
{  
    float delta_theta = 2.0 * PI / float(angle);  
    float col = 0.0;  
    float theta = 0.0;  
    float time = iGlobalTime;
    for (int i = 0; i < steps; i++)  
    {
        vec2 adjc = coord;
    theta = delta_theta * float(i);
    adjc.x += cos(theta)*time*speed + time * speed_x;  
        adjc.y -= sin(theta)*time*speed - time * speed_y;  
        col = col + cos((adjc.x*cos(theta) - adjc.y*sin(theta))  
            *frequency)*intensity;  
    }
    return cos(col);
}  

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{   
    vec2 p = (fragCoord.xy) / iResolution.xy, c1 = p, c2 = p;  
    float cc1 = col(c1);  

    c2.x += iResolution.x/delta;  
    float dx = emboss*(cc1-col(c2))/delta;  

    c2.x = p.x;  
    c2.y += iResolution.y/delta;  
    float dy = emboss*(cc1-col(c2))/delta;  

    c1.x += dx;  
    c1.y += dy;  
    float alpha = 1.+dot(dx,dy)*intence;  
    fragColor = texture(iChannel0,c1)* (alpha); 
}

在ShaderToy上new一个页面，然后放入源码，在iChanel0中选择一张纹理插入，就可以看到以上Shader实现的效果。

虽然测试得出效果，但是搞不懂为啥这个算法可以实现这个效果，刚写这篇博文的时候是一脸懵逼：

对于这个纹理的思路，目前没有看得太懂，只能感觉这是利用cos、sin函数来实现一些连续切波动的效果，并非真正的模拟水波的效果。

后来倒是能看懂GPU Gem的水面算法原理了，可是却还是没搞懂这个2D，毕竟这个只有一个源码，也没有设计思路。把源码中的算法用数学公式整理了一下：

对shader中的加和（Σ）改成了积分，以及还原了偏微分。其中关于O，V，我试着对sin项改成正数，效果变化不大。虽然总结出这个数学公式，但我暂时依旧不能回答为什么这个算法可以达到水波的效果。（PS. 这个水波的效果其实也不算真实）

阅读Graphics Shader的时候，了解了对于图像做处理的算法属于image wrapping的范畴，作者只是举了几个简单的例子，并且给了一本参考书籍：George Wolberg. Digital Image Warping. Los Alamitos, CA: IEEE Computer Society
Press, 1990. 有空可以往这里面深究。