好久没有更新了，不行不行，怎么可以太监呢(｀⌒´メ)
滤镜结构
滤镜主要是对于图像的处理，关于一款滤镜的制作方法可以看这里
既然是图像处理，那么滤镜的操作就主要是：卷积、像素映射、坐标映射，反映到具体效果上，就是模糊锐化，覆盖层（贴纸等），RGB曲线调整，旋转缩放扭曲之类的。
嗯，就这么简单。
图像处理可以使用CPU来进行，但是由于我们每次只对图像的一小部分进行处理，因此可以考虑用并行的方式进行加速，这是典型的单指令（滤镜）多数据（图像），这个时候GPU就派上用场了，在移动平台上，我们可以使用最通用的OpenGL来利用GPU的计算性能。而我们需要付出的代价就是将之前的图像处理算法使用OpenGL能够理解的方式进行重写，着色器语言（OpenGL Shading Language）就是我们的工具。
让一款滤镜可以使用
我们知道了滤镜是怎么制作的，但是要如何让滤镜可以使用呢？例如实时用这个滤镜处理相机的预览结果并且显示出来。
以Android平台和OpenGL ES2.0+为例，我们可以发现主流滤镜的结构大概是这个样子：
顶点着色器（vertex_shader）
片元着色器（fragment_shader）
颜色映射表/素材纹理（texture）
对应控制代码
一个个来看吧。
顶点着色器（vertex_shader）
顶点着色器在一款滤镜中往往是不变的，一个标准的顶点着色器(图像，2D纹理)长这样：
attribute vec4 aPosition;
attribute vec4 aTextureCoord;
varying vec2 vTextureCoord;
void main() {
gl_Position = aPosition;
vTextureCoord = aTextureCoord.xy;
}是不是异常简单？aPosition是顶点坐标，aTextureCoord是纹理坐标，vTextureCoord是用来向片元着色器传递纹理坐标用的，片元着色器会根据这个坐标对图片进行取样，然后进行处理，然后我们就完成了图像一个小区域的处理，GPU会自动对于纹理的所有小区域进行处理，完成滤镜的操作。
片元着色器（fragment_shader）
片元着色器是一款滤镜的核心，这其实就是我们的图像处理算法的描述，只不过我们现在用glsl的方式表述出来。
如果我们不需要对于图像进行任何处理，可以这样写：
precision mediump float;
varying vec2 vTextureCoord;
uniform sampler2D sTexture;
void main() {
gl_FragColor=texture2D(sTexture, vTextureCoord);
}是不是更简单？vTextureCoord是片元着色器传递过来的纹理坐标，sTexture就是我们的源图像了（相机预览、视频播放）。gl_FragColor是OpenGL的内置变量，他是一个vec4类型，代表当前片元的RGBA值，每个元素都是0-1的浮点数。
片元不一定是像素，他可能是相邻的好几个像素的集合，纹理的坐标是浮点数，而片元的中心是两个像素之间的中点。不过如果我们不使用glsl来做通用计算，而只是做图像处理的话，不需要特别在意这一点。
再分析一个高斯模糊的代码：
precision lowp float;
precision lowp int;
varying vec2 vTextureCoord;
uniform sampler2D sTexture;
varying vec2 blurCoordinates[5];
void main()
{
vec4 original = texture2D(sTexture, vTextureCoord);
lowp vec4 sum = vec4(0.0);
sum += texture2D(sTexture, blurCoordinates[0]) * 0.204164;
sum += texture2D(sTexture, blurCoordinates[1]) * 0.304005;
sum += texture2D(sTexture, blurCoordinates[2]) * 0.304005;
sum += texture2D(sTexture, blurCoordinates[3]) * 0.093913;
sum += texture2D(sTexture, blurCoordinates[4]) * 0.093913;
gl_FragColor = vec4(sum.xyz, 1.0);
gl_FragColor=vec4(mix(gl_FragColor.rgb, vec3(0.0), 0.02), gl_FragColor.a);
}因为这里我们需要进行卷积操作，blurCoordinates就是相邻片元的坐标，lowp 代表low precision，因为在这个片元着色器中我们不是很在意处理精度（本来就是模糊操作嘛），我们按照高斯函数的系数对于周围几个片元进行加权平均，就得到了当前片元应该有的像素。
颜色映射表/素材纹理（texture）
如果我们的滤镜有其他素材，例如贴纸，RGB映射表，要怎么传递给OpenGL呢？
常见的方法是使用纹理（Texture），纹理可以看成一幅图像，也可以看做是一个二维（或者更高）数组，里面存储我们需要的数据，一些常见的纹理素材像这样： 
当然，我们也不一定要使用图片作为纹理素材，也可以直接用byte数组进行编码，之后再转换成纹理，本质上是一样的，像这样：
public class MxProFilter extends MxOneHashBaseFilter {
public MxProFilter(Context context) {
super(context, "filter/fsh/mx/mx_pro.glsl");
rgbMap = new int[]{ 0, 1, 3, 4, 6, 7, 9, 10, 12, 13, 15, 17, 18, 20, 21, 23, 24, 26, 27, 29, 30, 32, 33, 35, 36, 38, 39, 41, 42, 44, 45, 47, 48, 50, 51, 53, 54, 56, 57, 59, 60, 61, 63, 64, 66, 67, 69, 70, 71, 73, 74, 75, 77, 78, 79, 81, 82, 83, 85, 86, 87, 89, 90, 91, 92, 94, 95, 96, 97, 99, 100, 101, 102, 103, 105, 106, 107, 108, 109, 111, 112, 113, 114, 115, 116, 117, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 167, 168, 169, 170, 171, 172, 173, 174, 174, 175, 176, 177, 178, 179, 179, 180, 181, 182, 183, 184, 184, 185, 186, 187, 188, 188, 189, 190, 191, 192, 192, 193, 194, 195, 195, 196, 197, 198, 198, 199, 200, 201, 202, 202, 203, 204, 204, 205, 206, 207, 207, 208, 209, 210, 210, 211, 212, 213, 213, 214, 215, 215, 216, 217, 217, 218, 219, 219, 220, 221, 222, 222, 223, 224, 224, 225, 226, 226, 227, 228, 228, 229, 230, 230, 231, 232, 232, 233, 234, 234, 235, 236, 236, 237, 238, 238, 239, 240, 240, 241, 242, 242, 243, 243, 244, 245, 245, 246, 247, 247, 248, 249, 249, 250, 251, 251, 252, 253, 253, 254, 255 };
}
}对应控制代码
前面提到的坐标和纹理都是需要我们自行设置的，什么时候绘制，绘制什么内容也需要我们自行控制，对应的控制代码可以是c也可以是Java，因为本来Android上的OpenGL ES就是一个简单的Java封装，所以实际上将Java的OpenGL代码换成C以后效率不会有明显的变化。
动态加载新滤镜
基于前面的讨论，我们发现每个滤镜最主要的不同就是片元着色器，而且着色器代码都是在运行的时候动态编译的。
(以下代码仅供参考)
如果我们要加载的滤镜只有片元着色器不同，那么就很简单了，我们的Java代码可以使用同一套，像这样：
package com.martin.ads.omoshiroilib.filter.base;
import android.content.Context;
import android.opengl.GLES20;
import com.martin.ads.omoshiroilib.glessential.program.GLSimpleProgram;
import com.martin.ads.omoshiroilib.util.TextureUtils;
/**
* Created by Ads on 2017/1/31.
*/
public class SimpleFragmentShaderFilter extends AbsFilter {
protected GLSimpleProgram glSimpleProgram;
public SimpleFragmentShaderFilter(Context context,
final String fragmentShaderPath) {
super("SimpleFragmentShaderFilter");
glSimpleProgram=new GLSimpleProgram(context, "filter/vsh/base/simple.glsl",fragmentShaderPath);
}
@Override
public void init() {
glSimpleProgram.create();
}
@Override
public void onPreDrawElements() {
super.onPreDrawElements();
glSimpleProgram.use();
plane.uploadTexCoordinateBuffer(glSimpleProgram.getTextureCoordinateHandle());
plane.uploadVerticesBuffer(glSimpleProgram.getPositionHandle());
}
@Override
public void destroy() {
glSimpleProgram.onDestroy();
}
@Override
public void onDrawFrame(int textureId) {
onPreDrawElements();
TextureUtils.bindTexture2D(textureId, GLES20.GL_TEXTURE0,glSimpleProgram.getTextureSamplerHandle(),0);
GLES20.glViewport(0,0,surfaceWidth,surfaceHeight);
//Log.d(TAG, "onDrawFrame: "+surfaceWidth+" "+surfaceHeight);
plane.draw();
}
}
如果我们还有多个纹理，那么我们的代码依然可以用同一套，像这样：
package com.martin.ads.omoshiroilib.filter.base;
import android.content.Context;
import android.opengl.GLES20;
import com.martin.ads.omoshiroilib.glessential.texture.BitmapTexture;
import com.martin.ads.omoshiroilib.util.TextureUtils;
/**
* Created by Ads on 2017/4/6.
* Textures are numbered from 2-N
*/
public abstract class MultipleTextureFilter extends SimpleFragmentShaderFilter {
protected BitmapTexture[] externalBitmapTextures;
protected int[] externalTextureHandles;
protected int textureSize;
protected Context context;
public MultipleTextureFilter(Context context, String fragmentShaderPath) {
super(context, fragmentShaderPath);
this.context=context;
textureSize=0;
}
@Override
public void init() {
super.init();
externalBitmapTextures=new BitmapTexture[textureSize];
for(int i=0;i<textureSize;i++){
externalBitmapTextures[i]=new BitmapTexture();
}
externalTextureHandles=new int[textureSize];
for(int i=0;i<textureSize;i++){
externalTextureHandles[i] =
GLES20.glGetUniformLocation(glSimpleProgram.getProgramId(),"sTexture"+(i+2));
}
}
@Override
public void destroy() {
glSimpleProgram.onDestroy();
for(BitmapTexture bitmapTexture:externalBitmapTextures){
bitmapTexture.destroy();
}
}
@Override
public void onPreDrawElements() {
super.onPreDrawElements();
for (int i = 0; i < textureSize; i++) {
TextureUtils.bindTexture2D(
externalBitmapTextures[i].getImageTextureId(),
GLES20.GL_TEXTURE0+(i+1),
externalTextureHandles[i],
i+1
);
}
}
@Override
public void onDrawFrame(int textureId) {
onPreDrawElements();
TextureUtils.bindTexture2D(textureId, GLES20.GL_TEXTURE0,glSimpleProgram.getTextureSamplerHandle(),0);
GLES20.glViewport(0,0,surfaceWidth,surfaceHeight);
plane.draw();
}
}
如果我们的滤镜中顶点着色器还不一样，就意味着我们需要对于一些uniform和attribute变量进行配置，那么就需要不同的java代码了。
如果我们的滤镜代码和纹理素材来自网络怎么办？
其实并没有任何的区别，不是么？