ps滤镜之旋转扭曲算法实现

      最近捕鱼达人3的发布 ，人气比较高，由于前2部作品已经有一大群“粉丝”，所以此次3代再发布就受到很多关注。就画面3代是3d的效果，加上一些特殊效果，在画面质量上有了一定的提升。本文讲述一下捕鱼3的开场漩涡实现方法，它类似ps的旋转扭曲效果，只是程序中可以动态改变参数，实现像漩涡一样的效果。

      首先，进入主场景的时候，将整个场景渲染到一个节点中，然后执行shader操作，vert着色器将所有的点进行扭曲变换，在颜色着色器乘以一个沿着中心点变化的因子，使得越靠近中心点，颜色逐渐变成白色或者透明。

      为了将扭转力具体化，这里我将它看出角加速度，假设靠近中心点的距离在一定范围内用百分比表示，比如在400个单位的范围，距离中心点100的点就是100/400=0.25，将它用do表示。假如扭力在距离中心点100的地方是最大的，然后向两边越来越少，这样就会形成旋转扭曲的效果。

        float d=sqrt(ja_position.x*ja_position.x+ja_position.y*ja_position.y);

float d0=d/400;

        float w=0.1+(1-(do-0.25)*(do-0.25))*force;

        float c=cos(w);

float s=sin(w); 

mat4 m1=mat4(c,s,0,0,-s,c,0,0,0,0,1,0,0,0,0,1);

        gl_Position =CC_MVPMatrix *m1* ja_position;

       在以上的代码中，m1是点的变换矩阵，将所有点左乘m1，最后就会出现扭曲的效果。

        gl_FragColor =dstclr*d0;

        以上是将目标色乘以变化因子，这里只是简单将中心点附近的颜色变浅。

        由于源代码很多，还要建立网格，顶点索引等等，这里就不一一贴上来啦~，需要的朋友可以联系，呵呵。

        效果图：

       变换前：

变换后：