滤镜处理

●GPUlmage
●Corelmage
●OpenGL ES

技能

*利用OpenGL片元着色器实现图片滤镜处理
*多个片元着色器组合使用

●同一个顶点着色器调用2次,但不需要创建2个顶点着色器文件
●为什么要用2次片元?
滤镜组合(饱和度和色温处理)
饱和度/色温是2个片元着色器来处理!

处理分为2个部分：色温处理，饱和度处理

顶点着色器

//图片的坐标位置(单个顶点)
attribute vec4 position;
//纹理坐标位置
attribute vec2 inputTextureCoordinate;
//将纹理坐标通过varying传递到片元着色器(饱和度/色温片元着色器)
varying 1owp vec2 textureCoordinate;
void main(void) {
    //值的传递
    textureCoordinate = inputTextureCoordinate;
    //赋值
    gl_Position = position;
}

饱和度片元着色器

// 纹理坐标
varying lowp vec2 textureCoordinate;
// 纹理
uniform sampler2D inputImageTexture;
// 色温值
uniform lowp float saturation;
// 色温过滤器
const lowp vec3 warmFilter = vec3(0.93, 0.54, 0.0);
//RGB转IQ
const mediump mat3 RGBtoYIQ = mat3(0.299, 0.587, 0.114, 0.596, -0.274, -0.322, 0.212, -0.523, 0.311);
//YIQ转ÈRGB
const mediump mat3 YIQtoRGB = mat3(1.0, 0.956, 0.621, 1.0, -0.272,-0.647, 1.0, -1.105, 1.702);
//亮度加权
const mediump vec3 luminanceWeighting = vec3(0.2125, 0.7154, 0.0721);
void main()
    //为了读取纹理中每个像素点的原始颜色值
    /*
    texture2D(参数1,参数2)
    参数1:纹理对象
    参数2:纹理坐标
    */
    lowp vec4 source = texture2D input ImageTexture, textureCoordinate)
    //dot(v1,v2)向量点乘
    //亮度=RGB值*亮度加权
    lowp float luminance = dot(source.rgb, luminanceWeighting);
    //将亮度标量转化为vec3向量
    lowp vec3 greyScaleColor = vec3(luminance,e,e);
    /*
    mix函数:颜色与颜色混合/颜色与纹理混合/纹理与纹理混合
    mix(x,y,a);
    通过线性混合a --> 通过线性方程式混合
    x.(1-a)+y.a --> vec3向量颜色
    vec4(vec3, w); -->vec4向量
    */
    gl_ FragColor = vec4(mix(greyScaleColor, source.rgb, saturation),source.w);
}

色温片元着色器

// 纹理坐标
varying lowp vec2 textureCoordinate;
// 纹理
uniform sampler2D inputImageTexture;
//色温
uniform lowp float temperature;
//色温过滤
const lowp vec3 warmFilter = vec3(0.93, 0.54, 0.0);
//RGBtoYIQ
const mediump mat3 RGBtoYIQ = mat3(0.299, 0.587, 0.114, 0.596, -0.274, -0.322, 0.212, -0.523, 0.311);
//YIQtoRGB
const mediump mat3 YIQtoRGB = mat3(1.0, 0.956, 0.621, 1.0, -0.272, -0.647, 1.Ø, -1.105, 1.702);
//亮度加权
const mediump vec3 luminanceWeighting = vec3(0.2125, 0.7154, 0.0721)
void main() {
    //为了读取纹理中每个像素点的原始颜色值
    /*
    texture2D(参数1,参数2)
    参数1:纹理对象
    参数2:纹理坐标
    */
    1owp vec4 source = texture2D( inputImageTexture, textureCoordinate);
    //将源颜色RGB转化为YIQ颜色
    mediump vec3 yiq = RGBtoYIQ * source.rgb;
    /*
    c1amp(x, minVal, maxVal);
    1.首先获取x和minVal之间较大的值
    2.再拿起与maxVa1比较
    3.最后获取比较后较小的值
    vec3(r,g, b)
    rec3(x,y,z)
    yiq.b (b指的是第3个元素.)
    */
    yiq.b = clamp(yiq.b, -0. 5226, 0.5226);
    //将yiq转化rgb值
    lowp vec3 rgb = YIQtoRGB * yiq;
    /*
    色温公式:
    warmR:色温过滤器- -warmFilter
    if r<0.5 -->2. 0*r*warmR;
    if r>= 0.5-->1. 0-2.0*(1.0-r)*(1.0-warmR);
    */
    lowp float A = (rgb.r < 0.5 ? (2.0 * rgb.r * warmFilter.r) : (1.0 - 2.0* (1.0- rgb.r) * (1.0 - warmFilter .r)));
    lowp float B = (rgb.g < 0.5 ? (2.0 * rgb.g * warmFilter.g) : (1.0 - 2.0 * (1.0 - rgb.g) * (1.0 - warmFilter .g)));
    lowp float C = (rgb.b < 0.5 ? (2.0 * rgb.b * warmFilter.b) : (1.0 - 2.0 * (1.0 - rgb.b) * (1.0 - warmFilter.b)));
    //将过滤完ABC(RGB )颜色转化成vec3向量
    lowp vec3 processed = vec3(A,B,C);
    /*
    mix函数:颜色与颜色混合/颜色与纹理混合/纹理与纹理混合
    mix(x,y,a);
    通过线性混合a --> 通过线性方程式混合
    x.(1-a)+y.a --> vec3向量颜色
    vec4(vec3, w);-->vec4向量
    */
    gl_ FragColor = vec4(mix(rgb, processed, temperature), source.a);
}

Demo: 12-多滤镜处理