OpenGL ES 特效与滤镜实现原理

抖音近几年比较火，得益于其中一些的好玩的特效与滤镜玩法，今天简单分析一下其中的实现原理。对做音视频开发领域的你会有一些帮助。
涉及到的知识点：OpenGL OpenGL ES GLSL等等。

顶点坐标

顶点坐标.png

OpenGL是采用的笛卡尔坐标系，坐标是以屏幕中心为原点，X轴朝右，Y轴朝上，所以左下角的坐标为（-1，-1），右上角的坐标为（1，1）。

纹理坐标

纹理坐标.png

纹理坐标的原点在左下角（0，0）.有的文章说在左上角

图片滤镜的原理

图片滤镜的原理.png

图片滤镜就是对图片的每一个像素点的RGBA值进行处理。所谓的饱和度滤镜，灰度滤镜，奶油滤镜就是处理原始图片的每一个像素点，也就是修改原像素点的RGBA.
比如一张图片有144万个像素点，片元着色器需要执行144万次，对每一个像素点进行填充。恁大的计算量CPU虽然可以完成，但它是撑不住的。只能交给GPU处理。

分屏特效-二分屏特效

二分屏png

二分屏特效分析.png

假如取0.25--0.75 这一个区域的像素信息（这是由产品规格所决定的）

二分屏特效计算分析

在处理左上角（0.0,0.0）时取 的是原图片（0.0，0.25）位置的像素值，以此类推，从左往右，从上至下。
在处理（0.0,0.5）时取的是原图片的（0.0，0.25）位置的像素值。

由于整个图片的顶点位置没有变化，所以顶点着色器没有任何变化。

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

片元着色器

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main (void) {

    vec2 uv = TextureCoordsVarying.xy;
    float y;
    
    if (uv.y >=0.0 && uv.y <= 0.5) {
        y = uv.y + 0.25;
    }else{
        y=uv.y - 0.25;
    }
    
    gl_FragColor = texture2D(Texture, vec2(uv.x,y));
}

到这基本上我们就实现了二分屏特效了。
对片元着色器跟顶点着色器不熟悉的参考我另一篇文章：OpenGL ES GLSL相关语法.