前言
在前面的文章里流程已经基本讲完了，这篇文章只是在前面文章的基础上制作几个滤镜。
本文目标
制作简单的滤镜，让大家明白滤镜的原理，滤镜从代码层面来说其实很简单，复杂的是探索他们的具体算法，好在有很多前人已经帮我们完成了这一步，我们直接使用就可以了。
正文
在写这篇文章之前，我在网络上搜了一下，发现已经有很多简单滤镜的文章了，其实滤镜代码大同小异，只是算法不同，所以这里仅仅实现几个简单的滤镜以后可能会继续添加，方便大家理解，大家如果想继续研究可以自行搜索。
1.灰度图
灰度图有一个很著名的心理学公式
Gray = R*0.299 + G*0.587 + B*0.114
通过这个公式，我们就可以将彩色转成灰度图，当然，这个公式现在有很多优化后的写法，如果大家以后用到，可以自行搜索一下。
不知道大家还记不记得，在使用纹理的文章里，我们在写Fragment Shader的时候，代码是这样的
gl_FragColor = vec4(1.0) * texture2D(u_texture,v_texcoord);
当时说的是vec4(1.0)代表的是白色，任何纹理的颜色*白色都是本来的颜色，其实我们要把它变成灰度图，就是改变这个vec4(1.0)，就是这么简单，代码如下。
vec4 texColor = texture2D(u_texture,v_texcoord); // 使用系统函数获取图像纹理
float gray = texColor.r * 0.299 + texColor.g * 0.587 + texColor.b * 0.114; // 套入公式
gl_FragColor = vec4(gray,gray,gray,1.0);
就这一步，我们就完成了灰度图滤镜，它的效果如下。
2.黑白图
黑白图就更加简单了，有一部分人一直以为灰度图就是黑白图，其实这是不对的，灰度图有256种颜色，而黑白图只有两种，就是黑跟白，所以处理起来也简单，只需要判断一下当前RGB的平均值，如果大于128就是白色，小于则是黑色，另外需要注意的是Shader里的取值范围是0.0~1.0。
代码如下。
vec4 texColor = texture2D(u_texture,v_texcoord);
float avg = (texColor.r + texColor.g + texColor.b) / 3.0;
if (avg >= 0.5) { // 取值范围是0~1
texColor = vec4(1.0);
}
else {
texColor = vec4(0.0,0.0,0.0,1.0);
}
gl_FragColor = vec4(texColor.rgb,1.0);
效果如下。
3.底片效果
底片效果也很简单，就是把当前像素点的RGB值分别与255之差后的值作为当前点的RGB值，这个效果的代码如下。
vec4 texColor = texture2D(u_texture,v_texcoord);
gl_FragColor = vec4(1.0 - texColor.r,1.0 - texColor.g,1.0 - texColor.b, 1.0);
效果如下。
4.连环画效果
连环画具体算法如下图。
代码如下。
vec4 texColor = texture2D(u_texture,v_texcoord);
float r = abs(texColor.g - texColor.b + texColor.g + texColor.r) * texColor.r / 1.0;
float g = abs(texColor.b - texColor.g + texColor.b + texColor.r) * texColor.r / 1.0;
float b = abs(texColor.b - texColor.g + texColor.b + texColor.r) * texColor.g / 1.0;
float gray = r * 0.299 + g * 0.587 + b * 0.114;
gl_FragColor = vec4(gray, gray, gray, 1.0);
效果如下。
5.复古图
复古图算法如下图。
代码如下。
vec4 texColor = texture2D(u_texture,v_texcoord);
float r = 0.393 * texColor.r + 0.769 * texColor.g + 0.189 * texColor.b;
float g = 0.349 * texColor.r + 0.686 * texColor.g + 0.168 * texColor.b;
float b = 0.272 * texColor.r + 0.534 * texColor.g + 0.131 * texColor.b;
gl_FragColor = vec4(r, g, b, 1.0);
效果如下。
6.马赛克
最后再来一个阻止人类进步的最大障碍——马赛克。记得以前还老有朋友问我是不是在搞计算机，我说是啊，然后排名第一的问题就是电脑怎么着了让我修修，第二的问题就是能不能给他去了马赛克，当然其实我很想帮朋友们去掉这些让我进步的阻碍(大雾)，但是事实上就是，知道它的原理你就会明白，这个很难实现，因为它是数据丢失不是压缩当然有人说他眯着眼睛看能达到心中无码的状态我也无fuck说。
通常情况下，马赛克的实现有两种。
第一种是把图片相当大小的一块区域当做一个小块，然后计算这个小块内部的平均值，再把计算后的结果给这个小块里的每一个像素。
第二种是在小块内随机取一个像素，把这个像素赋值给小块里的每一个像素。
这里是用的第二种方法实现的，取的是小块中心的像素，在这里添加了两个属性，分别是texSize和mosaicSize，其他不变，代码如下。
const vec2 texSize = vec2(512.0, 512.0); // 纹理的大小
const vec2 mosaicSize = vec2(8.0, 8.0); // 小块元素个数
void main()
{
vec2 xy = vec2(v_texcoord.x * texSize.x, v_texcoord.y * texSize.y);// 取值范围换算到图像尺寸大小
vec2 XYMosaic = vec2(floor(xy.x / mosaicSize.x) * mosaicSize.x, floor(xy.y / mosaicSize.y) * mosaicSize.y); // 计算某一个小mosaic的中心坐标
vec2 UVMosaic = vec2(XYMosaic.x / texSize.x, XYMosaic.y / texSize.y); // 换算回纹理坐标系
gl_FragColor = texture2D(u_texture, UVMosaic);
}
效果如下。
果然是阻止人类进步的存在，一旦使用了这个效果，相片马上变得不可描述起来。
结束
其实大家了解这几个滤镜之后，就会发现从代码层面来讲，滤镜都不是很复杂，在知道算法的前提下，我们很容易的就可以写出具体的滤镜。主要还是前面文章里的流程跟基础，大家在练习的过程中可以从网络上搜集一些具体的算法自己动手看看效果。
