一种显示2d波浪动画的片元着色器代码

#version 300 es
precision highp float;
uniform sampler2D sTexture;//纹理输入
uniform int funChoice;
uniform float frame;//第几帧
uniform vec2 resolution;//分辨率
in vec4 fragObjectColor;//接收vertShader处理后的颜色值给片元程序
in vec2 fragVTexCoord;//接收vertShader处理后的纹理内坐标给片元程序
out vec4 fragColor;//输出到的片元颜色

void main() {
    float target = (sin(frame / 10.0 + fragVTexCoord.s * resolution.x / 200.0) + 1.0) / 8.0;
    if (fragVTexCoord.t < target) {
        fragColor = vec4(0.5, 0.5, 1.0, 1.0 - 2.0 * distance(fragVTexCoord, vec2(fragVTexCoord.s, target)));
    }
}

vTexcoord是纹理坐标st，从(0,0)~(1,1)的st坐标中，通过sin函数，以渲染帧计数/10为相位，以纹理实际分辨率的宽度×当前处理纹理的s坐标 / 200为频率，筛选出y值小于于target值的st坐标，赋予浅蓝色。透明度设定为距离目标sin线越远越浅。这样即可完成一个漂亮的2d活动水波纹纹理效果：

看了一下上传视频竟然还要去其他网站先上传，我懒得弄了，CSDN可真挫。截个图算了：

当然，也可以自由组合各种不同的参数，例如不同的频率等形成更复杂的特效：

#version 300 es
precision highp float;
uniform sampler2D sTexture;//纹理输入
uniform int funChoice;
uniform float frame;//第几帧
uniform vec2 resolution;//分辨率
in vec4 fragObjectColor;//接收vertShader处理后的颜色值给片元程序
in vec2 fragVTexCoord;//接收vertShader处理后的纹理内坐标给片元程序
out vec4 fragColor;//输出到的片元颜色

void main() {
    float target = (sin(frame / 10.0 + fragVTexCoord.s * resolution.x / 200.0) + 1.0) / 8.0;
    if (fragVTexCoord.t < target) {
        fragColor = vec4(0.5, 0.5, 1.0, 1.0 - 2.0 * distance(fragVTexCoord, vec2(fragVTexCoord.s, target)));
    }
    target = (sin(frame / 10.0 + fragVTexCoord.s * resolution.x / 100.0) + 1.0) / 16.0;
    if (fragVTexCoord.t < target) {
        vec4 newColor = vec4(0.8, 0.8, 1.0, 1.0 - 2.0 * distance(fragVTexCoord, vec2(fragVTexCoord.s, target)));
        fragColor = fragColor * newColor;
    }
}

把两段不同频率和振幅的波形得到的片元颜色相成，效果如图：

 

这样的动画制作方式对比使用安卓自带的canvas + surfaceview + path + paint组合拳要自由得多，效果基本上想做么做都行。而且这类型frag特效无需CPU参与任何运算，所有运算由GPU直接完成，效率也会高得多，算是对fragShader的一种妙用吧。