无滤镜
- “无滤镜”效果的实现准备工作的代码与“无分屏滤镜”中的实现逻辑和流程一致,只需要修改相应的底部item数组及对应的着色器名称等,这里不再说明这部分内容,顶点着色器也没有任何变化,主要是针对片元着色器中GLSL代码的实现滤镜算法做具体的说明和实现;
- 具体流程请参考:OpenGL ES之GLSL实现“分屏滤镜”效果
灰度滤镜
一、效果展示
- “浮点算法”处理的灰度
- “仅取绿⾊”处理的灰度
二、实现流程
1⃣️ 实现原理
灰度滤镜的实现原理是让RGB值保持一个平衡并填充,或者只保留一个亮度值,即绿色,在人眼中,绿色的亮度是最显眼的,绿色值越深,在肉眼观察中图片越暗淡,这是眼睛的一种生理现象。
2⃣️ “灰度滤镜”的算法
灰度滤镜的算法一共有5种,大致分为三类:
- 权值法:处理图片更加逼真(注意:浮点算法的RGB的值相加和为1,整数算法RGB的值相加和为100);
- 浮点算法:Gray = R * 0.3+G * 0.59 + B * 0.11;
- 整数⽅法:Gray = (R * 30 + G * 59 + B * 11) / 100;
- 移位⽅法: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;
}