滤镜处理
●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);
}
