webgl滤镜--会呼吸的痛

咱们一块儿来完成一个webgl的滤镜效果，可能有的人会问？为何要叫会呼吸的痛呢？没有为何，由于刚睡醒
闲言少叙让咱们直接看一下效果。

是的，上面就是咱们要实现的效果，不是整张图片所有作一个滤镜效果，而是在图片的左上角作一个呼吸的红色渐变效果。
咱们分三步完成这个效果，第一步把图片显示出来，也就是没有滤镜效果的图片显示出来。
第二步为整张图片作一个红色的滤镜效果。
第三步为局部作一个呼吸的红色滤镜，也就是最终的效果了。

一 显示整张图片

显示整张图片这里呢，你能够参考《webgl编程指南》这本书去作，固然我也会在最后附上个人代码，那里面也有，我不想在此赘述过多的代码问题。
直接上最后的效果吧！

上面效果的实现，包括初始化缓存区，向缓存区写入数据，为顶点赋值等等，由于此篇重点不在这，因此就很少说了。
经过上面呢，咱们就将整张的图片显示了出来，接下来就是为整张图片添加一个红色的滤镜效果了。

二 总体添加红色滤镜

咱们知道通常颜色的体现是基于三原色光模式的，也就是r(红色)，g(绿色),b(蓝色)，三原色的色光以不一样的比例相加，从而产生多种多样的色光。
咱们最后要实现的效果是在图片的上面添加一个红色的滤镜，那么咱们须要改变的就是R值了。

上面的图片中看到的是显示整张图片时候的片源着色器代码，咱们只须要在29行和30行之间加上一句代码，就能够实现整张图片的滤镜效果。

第30行代码的含义就是为texture的三原色中的R值添加0.2
由于三原色的值在片源着色器中的范围是0.0～1.0，所以咱们添加的值须要控制在这个范围以内，其他的值你能够本身试一下看看是什么效果。 让咱们看一下添加了全局的滤镜的效果。

OK，到此呢咱们实现了主体的效果，接下来就是为右上角局部添加呼吸滤镜的效果了。重点来啦！

三 为局部添加滤镜效果

让咱们先看一下webgl中坐标系的状况。

在webgl中，或者说在我此次添加的坐标系中是这个样子的，有的人会问：不对啊，明显这个y轴的长度大于x轴的长度，可是还都是1.0。
事实就是我画的这个样子的，你别慌。
OK那么咱们接下来的思路就是获取右上角的部分，而后为其添加颜色，问题来了，你要怎么获取右上角呢？按照区域划分吗？
不不不，咱们此次不须要区域划分，让咱们换一种思路思考一下。
若是咱们仍是为全局添加滤镜，可是按照不一样的区域添加不一样的效果，可是不须要区域划分，咱们先将每个点的横竖坐标相乘。

图中列举了5个点，咱们发现从左下角到右上角，横竖坐标相乘之后会变得愈来愈大，最大的是1.0。 那么咱们为不一样点的R值添加上其横竖坐标相乘之后的值会是什么效果呢？

最后的效果是否是就像单独为右上角添加了红色的滤镜。
其实呢咱们仍是为整张图片添加了滤镜只是左下角添加的色值比较小，所以在效果上面看着不是那么明显。
如今效果是添加上了，可是怎么让滤镜出现再消失呢？
咱们在传入片源着色器中的参数通常会包含一个变量，这个变量通常是为了作动画的。此次咱们就利用一下这个值。
我传入的是一个从0.01一直在变大的time变量，而后在片源着色器中使用sin(time)函数来获得一个会在必定范围内变化的变量值。

在上面的代码中，首先使用每个点的x坐标乘y坐标（v_TexCoord.x*v_TexCoord.y）而后再乘sin(time)这样就会获得一个相似于sin函数曲线的波动效果，为了调节效果呢，我在最后除了2.0，这个2.0大家能够试着换一下。
通过这些操做咱们就获得了一个波动的color值，而后咱们将这个color值赋值给texture的R，最后赋值给gl_FragColor，让咱们一块儿看一下效果。

前面的效果没有问题了，已经为右上角添加上了滤镜的效果，可是发现后半段会变成一个绿色的滤镜，这个是为何呢？
缘由在于sin()函数。

由于sin函数的波动是有正负值的（默认状况下），当color的值走到红框内的时候滤镜就会显示红色，当走到蓝框内的时候就会显示蓝色了，可是蓝色并非咱们想要的效果，如何修改代码来实现呢？
有人说作一个判断就OK了，当color的值小于0.0的时候咱们就不作什么。
这样判断是能够，可是咱们直接使用webgl的内置abs函数会更便捷一些。
最终的代码是：

以上呢咱们就获得了咱们想要的最终效果，一个呼吸的滤镜，可是我在添加滤镜的时候呢，使用的是加法，这样会用问题。
假如说背景图片是纯黑色或者纯白色的时候，那么显示的效果就会出现问题（也是一位大佬指点我才发现这个问题的），这个问题的解决方案呢，本次不会去赘述（ juejin.im/post/5bcdad… ）这个连接就是指点个人大佬出的解决方案你能够移步去他那里看一下。

本文的最后我附上个人代码地址，你能够下载看一下，结构很简单，只有一个html文件，而后和引用的js，img文件，而且在html的94行那里我注释了引用纯黑除白的图片代码，你能够试着研究一下。
代码地址：gitee.com/wangtao_it_…