我们一起来完成一个webgl的滤镜效果,可能有的人会问?为什么要叫会呼吸的痛呢?没有为什么,因为刚睡醒
闲言少叙让我们直接看一下效果。
一 显示整张图片
显示整张图片这里呢,你可以参考《webgl编程指南》这本书去做,当然我也会在最后附上我的代码,那里面也有,我不想在此赘述过多的代码问题。
直接上最后的效果吧!二 整体添加红色滤镜
我们知道一般颜色的体现是基于三原色光模式的,也就是r(红色),g(绿色),b(蓝色),三原色的色光以不同的比例相加,从而产生多种多样的色光。
我们最后要实现的效果是在图片的上面添加一个红色的滤镜,那么我们需要改变的就是R值了。上面的图片中看到的是显示整张图片时候的片源着色器代码,我们只需要在29行和30行之间加上一句代码,就可以实现整张图片的滤镜效果。
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()函数。以上呢我们就得到了我们想要的最终效果,一个呼吸的滤镜,但是我在添加滤镜的时候呢,使用的是加法,这样会用问题。
假如说背景图片是纯黑色或者纯白色的时候,那么显示的效果就会出现问题(也是一位大佬指点我才发现这个问题的),这个问题的解决方案呢,本次不会去赘述( )这个链接就是指点我的大佬出的解决方案你可以移步去他那里看一下。本文的最后我附上我的代码地址,你可以下载看一下,结构很简单,只有一个html文件,然后和引用的js,img文件,并且在html的94行那里我注释了引用纯黑除白的图片代码,你可以试着研究一下。
代码地址: