抖音近几年比较火，得益于其中一些的好玩的特效与滤镜玩法，今天简单分析一下其中的实现原理。对做音视频开发领域的你会有一些帮助。
涉及到的知识点：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相关语法.
