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_…