iOS高级进阶|OpenGL ES之GLSL实现“灰度滤镜”和“颠倒滤镜”效果 OpenGL|ES|GLSL|灰度滤镜|颠倒滤镜

无滤镜

“无滤镜”效果的实现准备工作的代码与“无分屏滤镜”中的实现逻辑和流程一致，只需要修改相应的底部item数组及对应的着色器名称等，这里不再说明这部分内容，顶点着色器也没有任何变化，主要是针对片元着色器中GLSL代码的实现滤镜算法做具体的说明和实现;
具体流程请参考:OpenGL ES之GLSL实现“分屏滤镜”效果

灰度滤镜一、效果展示

“浮点算法”处理的灰度

文章图片

“仅取绿?”处理的灰度

文章图片

二、实现流程 1?? 实现原理灰度滤镜的实现原理是让RGB值保持一个平衡并填充，或者只保留一个亮度值，即绿色，在人眼中，绿色的亮度是最显眼的，绿色值越深，在肉眼观察中图片越暗淡，这是眼睛的一种生理现象。
2?? “灰度滤镜”的算法灰度滤镜的算法一共有5种，大致分为三类:

权值法：处理图片更加逼真(注意:浮点算法的RGB的值相加和为1,整数算法RGB的值相加和为100);
1. 浮点算法：Gray = R * 0.3+G * 0.59 + B * 0.11;
2. 整数?法：Gray = (R * 30 + G * 59 + B * 11) / 100;
3. 移位?法：Gray = (R * 76 + G * 151 + B * 28) >> 8;
平均值法：Gray = (R+G+B)/3;
仅取绿?：Gray = G；

3?? “灰度”的GLSL实现

浮点算法

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; // RGB的变换因子，即权重值 const highp vec3 W = vec3(0.2125, 0.7154, 0.0721); void main() { // 获取对应纹理坐标系下颜色值 vec4 mask = texture2D(Texture, TextureCoordsVarying); // 将颜色mask与变换因子相乘得到灰度值 float luminance = dot(mask.rgb, W); // 将灰度值转换为(luminance,luminance,luminance,mask.a)并填充到像素中 gl_FragColor = vec4(vec3(luminance), 1.0); }

仅取绿?

precision highp float; uniform sampler2D Texture; varying vec2 TextureCoordsVarying; void main() { // 获取对应纹理坐标系下色颜色值 vec4 mask = texture2D(Texture, TextureCoordsVarying); // 将RGB全部设置为G，即GRB全部取绿色值 gl_FragColor = vec4(mask.g, mask.g, mask.g, 1.0); }

颠倒滤镜一、效果展示

文章图片

二、实现流程 1?? 原理在片元着色器中，翻转纹理坐标y值，实现颠倒滤镜;
2?? GLSL实现

attribute vec4 Position; attribute vec2 TextureCoords; varying vec2 TextureCoordsVarying; void main (void) { gl_Position = Position; TextureCoordsVarying = TextureCoords; }

完整示例传送门 【iOS高级进阶|OpenGL ES之GLSL实现“灰度滤镜”和“颠倒滤镜”效果】GLSL滤镜之马赛克滤镜效果实现