一個(gè)人可以走的很快，但一群人才能走的更遠(yuǎn)。不論你是正從事IT行業(yè)的老鳥(niǎo)或是對(duì)IT行業(yè)感興趣的新人，都?xì)g迎掃碼加入我們的的圈子（技術(shù)交流、學(xué)習(xí)資源、職場(chǎng)吐槽、大廠內(nèi)推、面試輔導(dǎo)），讓我們一起學(xué)習(xí)成長(zhǎng)！

| 淡藍(lán)紫色（200，191，231） | 深苔蘚色（55，64，24） |

這樣片段著色器就很簡(jiǎn)單了：

        #version 300 es
        precision mediump float;
        //紋理坐標(biāo)
        in vec2 vTextCoord;
        //輸入的yuv三個(gè)紋理
        uniform sampler2D yTexture;//采樣器
        uniform sampler2D uTexture;//采樣器
        uniform sampler2D vTexture;//采樣器
        out vec4 FragColor;
        void main() {
           //采樣到的yuv向量數(shù)據(jù)
           vec3 yuv;
           //yuv轉(zhuǎn)化得到的rgb向量數(shù)據(jù)
           vec3 rgb;
           //分別取yuv各個(gè)分量的采樣紋理
           yuv.x = texture(yTexture, vTextCoord).r;
           //直接將uv置為0.0即可（0.5-0.5）
           yuv.y = 0.0;
           yuv.z = 0.0;
           rgb = mat3(
                    1.0, 1.0, 1.0,
                    0.0, -0.183, 1.816,
                    1.540, -0.459, 0.0
            ) * yuv;  
            //取反色
            FragColor = vec4(vec3(1.0 - rgb.r, 1.0 - rgb.g, 1.0 - rgb.b), 1.0);

         };

只要最后賦值的一行改為以下即可：

 FragColor = vec4(vec3(1.0 - rgb.r, 1.0 - rgb.g, 1.0 - rgb.b), 1.0);

一行代碼功夫，一切都”反了“。

白銀

白銀級(jí)別難度當(dāng)然有所提升，主要是不同區(qū)域的片段的處理方式不一樣了。

灰度反色交叉濾鏡

        #version 300 es
        precision mediump float;
        //紋理坐標(biāo)
        in vec2 vTextCoord;
        //輸入的yuv三個(gè)紋理
        uniform sampler2D yTexture;//采樣器
        uniform sampler2D uTexture;//采樣器
        uniform sampler2D vTexture;//采樣器
        out vec4 FragColor;

        void main() {
           //采樣到的yuv向量數(shù)據(jù)
           vec3 yuv;
           //yuv轉(zhuǎn)化得到的rgb向量數(shù)據(jù)
           vec3 rgb;
           //分別取yuv各個(gè)分量的采樣紋理（r表示？）
           yuv.x = texture(yTexture, vTextCoord).r;
           yuv.y = texture(uTexture, vTextCoord).g - 0.5;
           yuv.z = texture(vTexture, vTextCoord).b - 0.5;
           rgb = mat3(
                    1.0, 1.0, 1.0,
                    0.0, -0.183, 1.816,
                    1.540, -0.459, 0.0
            ) * yuv;
            //根據(jù)不同的紋理坐標(biāo)區(qū)域，賦值不同顏色值給當(dāng)前當(dāng)前片段顏色值
            if (vTextCoord.x < 0.5 && vTextCoord.y < 0.5) {
                //左上角區(qū)域，反色濾鏡
                FragColor = vec4(vec3(1.0 - rgb.r, 1.0 - rgb.g, 1.0 - rgb.b), 1.0);
            } else if (vTextCoord.x > 0.5 && vTextCoord.y > 0.5) {
                //右下角區(qū)域，灰度濾鏡
                float gray = rgb.r * 0.2125 + rgb.g * 0.7154 + rgb.b * 0.0721;
                FragColor = vec4(gray, gray, gray, 1.0);
            } else {
                FragColor = vec4(rgb, 1.0);        
            }
         };

代碼一出來(lái)，其實(shí)也是so easy~關(guān)鍵點(diǎn)就是對(duì)于紋理坐標(biāo)所在區(qū)域的判斷，如果處于左上角，即x<0.5,y<0.5,則使用反色效果。如果處于右下角，即x>0.5,y>0.5,則使用灰度效果。其余區(qū)域不做額外處理。

又是幾行代碼的功夫，就戴上了”有色眼鏡“~

黃金

黃金級(jí)別對(duì)于剛接觸的童鞋來(lái)說(shuō)可能是一個(gè)小門檻，因?yàn)?code>這里開(kāi)始當(dāng)前片段采樣的紋素可能并非是片段本身對(duì)應(yīng)的紋理坐標(biāo)了，而是根據(jù)需要采樣自己想要的紋理坐標(biāo)位置的顏色值。

二分屏

二分屏，顧名思義，即將一個(gè)畫(huà)面分為2個(gè)重復(fù)的畫(huà)面在平均分的屏幕位置上渲染。這里的二分屏為了保證圖像不變形，所以每個(gè)分屏都采樣原來(lái)紋理圖片的中間一半的區(qū)域。如下圖所示，左邊是被渲染的圖元，右邊是被采樣的紋理：

該圖顯示的是針對(duì)片段在第一個(gè)分屏的情況，因?yàn)橹爸v過(guò)紋理映射就是相當(dāng)于將圖元的頂點(diǎn)和紋理的頂點(diǎn)一一對(duì)上。

從這個(gè)圖我們可以得出一個(gè)通用結(jié)論，假如當(dāng)前片段坐標(biāo)為（x,y），當(dāng)y小于0.5的時(shí)候，則采樣紋理圖片對(duì)應(yīng)位置為y+0.25的紋素

那么對(duì)于下方的分屏，就可以順藤摸瓜推出以下結(jié)論：

當(dāng)y大于0.5的時(shí)候，則采樣紋理圖片對(duì)應(yīng)位置為y-0.25的紋素。

上片段著色器代碼：

#version 300 es

precision mediump float;
//紋理坐標(biāo)
in vec2 vTextCoord;
//輸入的yuv三個(gè)紋理
uniform sampler2D yTexture;//采樣器
uniform sampler2D uTexture;//采樣器
uniform sampler2D vTexture;//采樣器
out vec4 FragColor;
void main() {
    //采樣到的yuv向量數(shù)據(jù)
    vec3 yuv;
    //yuv轉(zhuǎn)化得到的rgb向量數(shù)據(jù)
    vec3 rgb;

    vec2 uv = vTextCoord.xy;
    float y;
    //關(guān)鍵點(diǎn)，對(duì)渲染圖元不同位置的點(diǎn)采樣紋理的不同位置
    if (uv.y >= 0.0 && uv.y <= 0.5) {
        //當(dāng)渲染圖元的點(diǎn)位于上半部分的時(shí)候，采樣比其縱坐標(biāo)大于0.25部分
        uv.y = uv.y + 0.25;
    }else{
        //當(dāng)渲染圖元的點(diǎn)位于下半部分的時(shí)候，采樣比其縱坐標(biāo)小于0.25部分
        uv.y = uv.y - 0.25;
    }
    //分別取yuv各個(gè)分量的采樣紋理
    yuv.x = texture(yTexture, uv).r;
    yuv.y = texture(uTexture, uv).g - 0.5;
    yuv.z = texture(vTexture, uv).b - 0.5;
    rgb = mat3(
            1.0, 1.0, 1.0,
            0.0, -0.183, 1.816,
            1.540, -0.459, 0.0
    ) * yuv;
    FragColor = vec4(rgb, 1.0);
 };

四分屏

四分屏就更好玩了，但是原理和二分屏是一樣的。

如下圖，左邊是被渲染的圖元，右邊是被采樣的紋理，像之前所說(shuō)的，可以將紋理和圖元的頂點(diǎn)一一對(duì)上，比如四分屏的第一個(gè)格子和紋理的對(duì)應(yīng)關(guān)系如下圖所示：

所以對(duì)于第一個(gè)分屏，假如此時(shí)需要渲染的片段為（x,y），則可以推出采樣的通用關(guān)系：

當(dāng)x<0.5，y<0.5的時(shí)候,采樣（x*2，y*2）的紋素。

那么以此類推，就可以推出：

當(dāng)x>0.5，y<0.5的時(shí)候，采樣（(x-0.5)*2，y*2）的紋素。

當(dāng)x<0.5，y>0.5的時(shí)候，采樣（x*2，(y-0.5)*2）的紋素。

當(dāng)x>0.5，y>0.5的時(shí)候，采樣（(x-0.5)*2，(y-0.5)*2）的紋素。

片段著色器代碼：

#version 300 es

precision mediump float;
//紋理坐標(biāo)
in vec2 vTextCoord;
//輸入的yuv三個(gè)紋理
uniform sampler2D yTexture;//采樣器
uniform sampler2D uTexture;//采樣器
uniform sampler2D vTexture;//采樣器
out vec4 FragColor;
void main() {
    //采樣到的yuv向量數(shù)據(jù)
    vec3 yuv;
    //yuv轉(zhuǎn)化得到的rgb向量數(shù)據(jù)
    vec3 rgb;

    vec2 uv = vTextCoord.xy;
    if (uv.x <= 0.5) {
        //當(dāng)x小于0.5的時(shí)候，采樣2倍x坐標(biāo)的紋素顏色
        uv.x = uv.x * 2.0;
    }else{
        //當(dāng)x大于0.5的時(shí)候，采樣2倍x坐標(biāo)減0.5的紋素顏色
        uv.x = (uv.x - 0.5) * 2.0;
    }

     if (uv.y <= 0.5) {
           //當(dāng)y小于0.5的時(shí)候，采樣2倍y坐標(biāo)的紋素顏色  
           uv.y = uv.y * 2.0;
     }else{
           //當(dāng)y大于0.5的時(shí)候，采樣2倍y坐標(biāo)減0.5的紋素顏色
           uv.y = (uv.y - 0.5) * 2.0;
     }
    //分別取yuv各個(gè)分量的采樣紋理
    yuv.x = texture(yTexture, uv).r;
    yuv.y = texture(uTexture, uv).g - 0.5;
    yuv.z = texture(vTexture, uv).b - 0.5;
    rgb = mat3(
            1.0, 1.0, 1.0,
            0.0, -0.183, 1.816,
            1.540, -0.459, 0.0
    ) * yuv;
    FragColor = vec4(rgb, 1.0);
 };

這么一看也沒(méi)什么神奇的，你說(shuō)呢？

總結(jié)

本文詳細(xì)敘述了幾種常見(jiàn)的濾鏡效果實(shí)現(xiàn)原理，讓廣大的程序員也有機(jī)會(huì)體驗(yàn)做一把畫(huà)家藝術(shù)家的快感，當(dāng)然段位僅僅進(jìn)行到了黃金級(jí)別未免顯得太菜雞了吧，所以下一篇文章才是真正沖擊王者寶座的時(shí)機(jī)。

歡迎點(diǎn)贊加關(guān)注，讓我們一起早日上王者段位~

項(xiàng)目代碼

opengl-es-study-demo 不斷更新中，歡迎各位來(lái)star~

參考：

OpenGL ES 案例11：分屏濾鏡
反色百科

系列文章目錄

體系化學(xué)習(xí)系列博文，請(qǐng)看音視頻系統(tǒng)學(xué)習(xí)的浪漫馬車之總目錄

實(shí)踐項(xiàng)目： 介紹一個(gè)自己剛出爐的安卓音視頻播放錄制開(kāi)源項(xiàng)目

相關(guān)專欄：

C/C++基礎(chǔ)與進(jìn)階之路

音視頻理論基礎(chǔ)系列專欄

音視頻開(kāi)發(fā)實(shí)戰(zhàn)系列專欄

輕松入門OpenGL系列
一看就懂的OpenGL ES教程——圖形渲染管線的那些事
一看就懂的OpenGL ES教程——再談OpenGL工作機(jī)制
一看就懂的OpenGL ES教程——這或許是你遇過(guò)最難畫(huà)的三角形（一）
一看就懂的OpenGL ES教程——這或許是你遇過(guò)最難畫(huà)的三角形（二）
一看就懂的OpenGL ES教程——這或許是你遇過(guò)最難畫(huà)的三角形（三）
一看就懂的OpenGL ES教程——這或許是你遇過(guò)最難畫(huà)的三角形（四）
一看就懂的OpenGL ES教程——這或許是你遇過(guò)最難畫(huà)的三角形（五）
一看就懂的OpenGL ES教程——緩沖對(duì)象優(yōu)化程序（一）
一看就懂的OpenGL ES教程——緩沖對(duì)象優(yōu)化程序（二）
一看就懂的OpenGL ES教程——臨摹畫(huà)手的浪漫之紋理映射(理論篇)
一看就懂的OpenGL ES教程——臨摹畫(huà)手的浪漫之紋理映射(實(shí)踐篇)
一看就懂的OpenGL ES教程——渲染宮崎駿動(dòng)漫重拾童年

作者：半島鐵盒里的貓
鏈接：https://juejin.cn/post/7168042219163779108

最后

如果想要成為架構(gòu)師或想突破20~30K薪資范疇，那就不要局限在編碼，業(yè)務(wù)，要會(huì)選型、擴(kuò)展，提升編程思維。此外，良好的職業(yè)規(guī)劃也很重要，學(xué)習(xí)的習(xí)慣很重要，但是最重要的還是要能持之以恒，任何不能堅(jiān)持落實(shí)的計(jì)劃都是空談。

如果你沒(méi)有方向，這里給大家分享一套由阿里高級(jí)架構(gòu)師編寫(xiě)的《Android八大模塊進(jìn)階筆記》，幫大家將雜亂、零散、碎片化的知識(shí)進(jìn)行體系化的整理，讓大家系統(tǒng)而高效地掌握Android開(kāi)發(fā)的各個(gè)知識(shí)點(diǎn)。

相對(duì)于我們平時(shí)看的碎片化內(nèi)容，這份筆記的知識(shí)點(diǎn)更系統(tǒng)化，更容易理解和記憶，是嚴(yán)格按照知識(shí)體系編排的。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-853349.html

最后

如果想要成為架構(gòu)師或想突破20~30K薪資范疇，那就不要局限在編碼，業(yè)務(wù)，要會(huì)選型、擴(kuò)展，提升編程思維。此外，良好的職業(yè)規(guī)劃也很重要，學(xué)習(xí)的習(xí)慣很重要，但是最重要的還是要能持之以恒，任何不能堅(jiān)持落實(shí)的計(jì)劃都是空談。

如果你沒(méi)有方向，這里給大家分享一套由阿里高級(jí)架構(gòu)師編寫(xiě)的《Android八大模塊進(jìn)階筆記》，幫大家將雜亂、零散、碎片化的知識(shí)進(jìn)行體系化的整理，讓大家系統(tǒng)而高效地掌握Android開(kāi)發(fā)的各個(gè)知識(shí)點(diǎn)。

相對(duì)于我們平時(shí)看的碎片化內(nèi)容，這份筆記的知識(shí)點(diǎn)更系統(tǒng)化，更容易理解和記憶，是嚴(yán)格按照知識(shí)體系編排的。

到了這里，關(guān)于一看就懂的OpenGL ES教程——仿抖音濾鏡的各種奇技淫巧（一）_opengl es添加視頻(1)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！