在安卓中基于OpenGL ES实现随风飘荡3D动画效果

一、 背景

之前在一款金融APP上看到了类似A波浪一样的3D背景动画效果，觉得还挺好玩的，于是打算自己复刻一个出来玩玩。

二、分析和方案：

我希望做一个随时间变化的3D波浪动画，因此涉及的变量有：时间、每一个三维坐标的浪高z。而如果需要z轴的值根据x,y的坐标值不同有渐变的波浪作为规律基地，那么把z的值以sin(x + t) + cos(y + t)作为基础模板使得z和x,y,t都产生关系，即通过x,y的值获取波浪初始浪高，t作为相位移动波浪，结果赋予z值，即可产生波浪在波动的效果。后续通过叠加二维三角函数和调整参数符合自己效果即可。

实现方案1：通过在CPU计算上述规则，每一次drawCall都发起重新计算一次坐标的z值，重新buffer给显存。

实现方案2：初始化一个z值为0的平面，在vertex shader中通过传入的t值计算z值，最后再乘以变换矩阵。

显然第二种方法更适合这种对并行度有要求的事情，基本解放了CPU。

三、实现代码：

这里只放一个vertex shader，因为其余代码都只是模板代码而已：

        uniform mat4 uMVPMatrix;
        uniform float uTimeStamp;
        attribute vec4 vPosition;
        varying float vDepth;
        void main() {
            vec4 point = vec4(vPosition);
            float t = uTimeStamp / 400.0;
            float z0 = ( sin(radians(vPosition.x * 100.0) + t) + cos(radians(vPosition.y * 50.0) + t / 2.0) ) * 0.5;
            float z1 = ( sin(radians(vPosition.x * 50.0) + t / 4.0) + cos(radians(vPosition.y * 60.0) + t / 3.0) ) * 0.5;
            point.z = z0 + z1;
            gl_Position = uMVPMatrix * point;
            vDepth = point.z;
        }

四、最终效果：

在vertex shader上用三角函数做大波浪玩玩