本案例的目的是理解如何用GLSL實(shí)現(xiàn)灰度+顛倒+馬賽克（共5種）濾鏡

整體的效果圖如下：

• 準(zhǔn)備工作的代碼與OpenGL ES 案例11：分屏濾鏡中一致，只需要修改相應(yīng)的底部item數(shù)組及對(duì)應(yīng)的著色器名稱等剂娄，這里不再說(shuō)明這部分內(nèi)容

• 頂點(diǎn)著色器也沒有任何變化镜粤，主要是片元著色器中的實(shí)現(xiàn)濾鏡算法

下面只針對(duì)濾鏡的自定義片元著色器中的GLSL代碼進(jìn)行解釋說(shuō)明

灰度濾鏡

灰度濾鏡的實(shí)現(xiàn)原理是讓RGB值保持一個(gè)平衡并填充瞳购，或者只保留一個(gè)亮度值粘优，即綠色睹栖，在人眼中卵佛，綠色的亮度是最顯眼的杨赤，綠色值越深，在肉眼觀察中圖片越暗淡截汪，這是眼睛的一種生理現(xiàn)象疾牲。

灰度濾鏡的算法一共有5種，大致分為3類

• 權(quán)值法：處理后的圖片比較逼真
  • 浮點(diǎn)算法：Gray = R*0.3 + G*0.59 + B*0.11 (RGB的權(quán)重總和為1)
  • 整數(shù)方法：Gray = （R*30 + G*59 + B*11）/100（RGB的權(quán)重總和為100)
  • 移位方法：Gray = （R*76 + G*151 + B*28）>>8
• 平均值法：Gray = （R+G+B）/3衙解，處理后的圖片比較柔和
• 僅取綠色：Gray = G阳柔，這種方式方便簡(jiǎn)單，且易用

在片元著色器中分別使用 浮點(diǎn)算法 和 僅取綠色實(shí)現(xiàn)灰度濾鏡算法蚓峦。

• 浮點(diǎn)算法：這里的RGB權(quán)重取自GPUImage框架

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

//RGB的變換因子舌剂，即權(quán)重值
const highp vec3 W = vec3(0.2125, 0.7154, 0.0721);

void main(){
    //獲取對(duì)應(yīng)紋理坐標(biāo)系下色顏色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);

    //將顏色mask 與 變換因子相乘得到灰度值
    float luminance = dot(mask.rgb, W);

    //將灰度值轉(zhuǎn)換為(luminance,luminance,luminance,mask.a)并填充到像素中
    gl_FragColor = vec4(vec3(luminance), 1.0);
}

• 僅取綠色

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main(){
    //獲取對(duì)應(yīng)紋理坐標(biāo)系下色顏色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);

    //將RGB全部設(shè)置為G，即GRB全部取綠色值
    gl_FragColor = vec4(mask.g, mask.g, mask.g, 1.0);
}

效果圖如下所示

除了自定義著色器外暑椰，還可以通過GPUImage霍转、iOS原生的CoreImage實(shí)現(xiàn)灰度濾鏡。選擇哪種方式一汽，需要根據(jù)需求而定避消。

顛倒濾鏡

說(shuō)到顛倒圖片，之前在OpenGL ES GLSL圖片倒置的翻轉(zhuǎn)解決方案（6種）博文中講了幾種顛倒圖片翻轉(zhuǎn)的方式召夹，圖片一開始是倒置的岩喷，為什么還要翻轉(zhuǎn)在顛倒呢？原因是一開始顛倒的圖片如果不翻轉(zhuǎn)监憎，會(huì)影響其他濾鏡效果的顯示均驶，顛倒濾鏡只是一個(gè)濾鏡效果，不會(huì)影響其他濾鏡效果枫虏。

在片元著色器中妇穴，翻轉(zhuǎn)紋理坐標(biāo)y值，實(shí)現(xiàn)顛倒濾鏡

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main(){

    vec4 mask = texture2D(Texture, vec2(TextureCoordsVarying.x, 1.0-TextureCoordsVarying.y));
    gl_FragColor = vec4(mask.rgb, 1.0);
}

馬賽克濾鏡

主要是實(shí)現(xiàn)不同馬賽克樣式的濾鏡隶债，主要有以下三種樣式

• 正方形
• 六邊形
• 三角形

不同馬賽克樣式腾它，對(duì)應(yīng)不同的濾鏡算法，如圖所示

正方形馬賽克

正方形馬賽克原理：把圖片的一個(gè)相當(dāng)大小的區(qū)域用同一個(gè)顏色值來(lái)表示死讹，可以認(rèn)為是大規(guī)模的降低圖像的分辨率瞒滴，從而讓圖像的一些細(xì)節(jié)隱藏起來(lái)

濾鏡算法主要有以下幾步：

• 根據(jù)紋理坐標(biāo)計(jì)算實(shí)際圖像中的位置，相當(dāng)于將紋理顏色區(qū)放大
• 計(jì)算出一個(gè)小馬賽克的坐標(biāo)赞警，即找到馬賽克提取顏色值的像素點(diǎn)
• 將馬賽克坐標(biāo)換算回紋理坐標(biāo)妓忍，即將紋理顏色區(qū)縮小
  如圖所示

片元著色中的濾鏡算法實(shí)現(xiàn)如下

precision highp float;
//紋理坐標(biāo)
uniform sampler2D Texture;
//紋理采樣器
varying vec2 TextureCoordsVarying;
//紋理圖片size
const vec2 TexSize = vec2(400.0, 400.0);
//馬賽克size
const vec2 MosaicSize = vec2(16.0, 16.0);

void main(){
    //計(jì)算實(shí)際圖像位置
    vec2 intXY = vec2(TextureCoordsVarying.x * TexSize.x, TextureCoordsVarying.y * TexSize.y);

    //floor(x) 內(nèi)建函數(shù)，返回小于/等于x最大的整數(shù)愧旦，即向下取整
    //floor(intXY.x/mosaicSize.x)*mosaicSize.x 計(jì)算出一個(gè)小馬賽克的坐標(biāo)
    vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x)*MosaicSize.x, floor(intXY.y/MosaicSize.y)*MosaicSize.y);

    //換算回紋理坐標(biāo)世剖，此時(shí)的紋理坐標(biāo)是小馬賽克的部分的紋理坐標(biāo)，即某一個(gè)色塊
    vec2 UVMosaic = vec2(XYMosaic.x/TexSize.x, XYMosaic.y/TexSize.y);
    //獲取到馬賽克后的紋理坐標(biāo)的顏色值
    vec4 color = texture2D(Texture, UVMosaic);
    //將馬賽克顏色值賦值給gl_FragColor
    gl_FragColor = color;
}

六邊形馬賽克

六邊形馬賽克原理：將一張圖片笤虫，分割成由六邊形組成，再取每個(gè)六邊形的中心點(diǎn)畫出一個(gè)個(gè)的矩形琼蚯，根據(jù)矩形的奇偶排列情況求出對(duì)應(yīng)的2個(gè)中心點(diǎn)酬凳，并計(jì)算紋理坐標(biāo)與兩個(gè)中心點(diǎn)的距離，根據(jù)距離判斷遭庶，采取就近原則宁仔，當(dāng)前的六邊形就采用近的中心點(diǎn)的顏色值。

將圖片分割成六邊形峦睡，六邊形中心點(diǎn)畫出矩形后的呈現(xiàn)如下所示

濾鏡算法主要實(shí)現(xiàn)步驟有：

• 設(shè)置矩形的長(zhǎng)寬比例值TR翎苫、TB（TB：TR 符合比例 3：√3）
  其中長(zhǎng)寬比為3：√3，計(jì)算過程如下：

• 獲取紋理坐標(biāo)的x赐俗，y

• 根據(jù)紋理坐標(biāo)計(jì)算對(duì)應(yīng)的矩形坐標(biāo)wx拉队、wy
  假設(shè)矩陣的比例為3*len：√3*len，那么紋理坐標(biāo)（x阻逮，y）對(duì)應(yīng)的矩陣坐標(biāo)為

根據(jù)行列的奇偶情況粱快，求對(duì)應(yīng)的中心點(diǎn)紋理坐標(biāo)v1、v2

• 偶行偶列：（0叔扼，0）（1事哭，1）/，即左上瓜富、右下

• 偶行奇列：（0鳍咱，1）（1，0）\与柑，即左下谤辜、右上

• 奇行偶列：（0蓄坏，1）（1，0）\丑念，即左下涡戳、右上

• 奇行奇列：（0，0）（1脯倚，1）/渔彰，即左上、右下
  最終匯總起來(lái)也只有2種情況推正，（0恍涂，0）（1，1） 和 （0植榕，1）（1再沧，0），如下圖所示

其中單個(gè)矩陣中内贮，4個(gè)點(diǎn)的坐標(biāo)計(jì)算公式如下：

• 對(duì)于計(jì)算中的wx+1产园，拿（1，0）點(diǎn)來(lái)說(shuō)夜郁，wx+1等同于（1什燕，0）與（0，0）之間相差一個(gè)矩形的長(zhǎng)竞端，這個(gè)長(zhǎng)度為1屎即，為了得到（1，0）點(diǎn)的坐標(biāo)事富，要在（0技俐，0）點(diǎn)坐標(biāo)的基礎(chǔ)上，將wx增加一個(gè)長(zhǎng)
• 對(duì)于計(jì)算中的wy+1统台，拿（0雕擂，1）點(diǎn)來(lái)說(shuō)，wy+1等同于（0贱勃，0）與（0井赌，1）之間相差一個(gè)矩形的高，這個(gè)長(zhǎng)度為1贵扰，為了得到（0仇穗，1）點(diǎn)的坐標(biāo)，要在（0戚绕，0）點(diǎn)坐標(biāo)的基礎(chǔ)上纹坐，將wy增加一個(gè)高

• 根據(jù)距離公式求像素點(diǎn)距離兩個(gè)中心點(diǎn)的距離s1、s2

  • s1 = √（（v1.x-x）2 + （v1.y-y）2）

  • s2 = √（（v2.x-x）2 + （v2.y-y）2）
    如圖所示舞丛，

• 根據(jù)求出的距離耘子，判斷離哪個(gè)中心點(diǎn)近果漾，就取哪個(gè)六邊形的中心點(diǎn)顏色值為六邊形的顏色值

片元著色器代碼

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
//六邊形的邊長(zhǎng)
const float mosaicSize = 0.03;

void main(){

    float length = mosaicSize;
    //矩形的高的比例為√3，取值 √3/2 谷誓，也可以直接取√3
    float TR = 0.866025;
    //矩形的長(zhǎng)的比例為3跨晴，取值 3/2 = 1.5，也可以直接取3
    float TB = 1.5;

    //取出紋理坐標(biāo)
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;

    //根據(jù)紋理坐標(biāo)計(jì)算出對(duì)應(yīng)的矩陣坐標(biāo) 
    //即 矩陣坐標(biāo)wx = int（紋理坐標(biāo)x/ 矩陣長(zhǎng)）片林，矩陣長(zhǎng) = TB*len
    //即 矩陣坐標(biāo)wy = int（紋理坐標(biāo)y/ 矩陣寬），矩陣寬 = TR*len
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    vec2 v1, v2, vn;

    //判斷wx是否為偶數(shù)怀骤，等價(jià)于 wx % 2 == 0
    if (wx/2 * 2 == wx) {
        if (wy/2 * 2 == wy) {//偶行偶列
            //(0,0),(1,1)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy+1));
        }else{//偶行奇列
            //(0,1),(1,0)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy+1));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy));
        }
    }else{
        if (wy/2 * 2 == wy) {//奇行偶列
            //(0,1),(1,0)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy+1));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy));
        }else{//奇行奇列
            //(0,0),(1,1)
            v1 = vec2(length * TB * float(wx), length * TR * float(wy));
            v2 = vec2(length * TB * float(wx+1), length * TR * float(wy+1));
        }
    }
    //利用距離公式费封，計(jì)算中心點(diǎn)與當(dāng)前像素點(diǎn)的距離
    float s1 = sqrt(pow(v1.x-x, 2.0) + pow(v1.y-y, 2.0));
    float s2 = sqrt(pow(v2.x-x, 2.0) + pow(v2.y-y, 2.0));

    //選擇距離小的則為六邊形的中心點(diǎn)，且獲取它的顏色
    vn = (s1 < s2) ? v1 : v2;
    //獲取六邊形中心點(diǎn)的顏色值
    vec4 color = texture2D(Texture, vn);
    gl_FragColor = color;
}

三角形馬賽克

原理：三角形馬賽克是由六邊形馬賽克演變而來(lái)蒋伦，得到三角形的前提弓摘，就是的先有六邊形，然后將正六邊形6等分痕届，每個(gè)三角形都是正三角形韧献，然后求出紋理坐標(biāo)與中心點(diǎn)的夾角，同時(shí)求出三角形的中心點(diǎn)研叫，根據(jù)夾角判斷锤窑，夾角屬于哪個(gè)三角形，就將該三角形的中心點(diǎn)顏色作為整個(gè)三角形的紋素

三角形濾鏡算法步驟是在六邊形濾鏡算法的步驟上增加以下步驟：

• 求出當(dāng)前像素點(diǎn)與紋理中心點(diǎn)的夾角
  如下圖所示嚷炉，紋理坐標(biāo)為（x渊啰，y），中心點(diǎn)為vn申屹，求夾角

計(jì)算6個(gè)三角形的中心點(diǎn)

判斷夾角屬于哪個(gè)三角形绘证，則獲取哪個(gè)三角形的中心點(diǎn)坐標(biāo)
其中，不同三角形的夾角范圍如圖所示

片元著色器代碼：在六邊形濾鏡算法（即 vn = (s1 < s2) ? v1 : v2;）后增加如下代碼

    //獲取像素點(diǎn)與中心點(diǎn)的角度
   float a = atan((x-vn.x)/(y-vn.y));

    //判斷夾角哗讥，屬于哪個(gè)三角形嚷那，則獲取哪個(gè)三角形的中心點(diǎn)坐標(biāo)
    vec2 area1 = vec2(vn.x, vn.y - mosaicSize * TR / 2.0);
    vec2 area2 = vec2(vn.x + mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);
    vec2 area3 = vec2(vn.x + mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
    vec2 area4 = vec2(vn.x, vn.y + mosaicSize * TR / 2.0);
    vec2 area5 = vec2(vn.x - mosaicSize / 2.0, vn.y + mosaicSize * TR / 2.0);
    vec2 area6 = vec2(vn.x - mosaicSize / 2.0, vn.y - mosaicSize * TR / 2.0);

    if (a >= PI6 && a < PI6 * 3.0) {
        vn = area1;
    }else if (a >= PI6 * 3.0 && a < PI6 * 5.0){
        vn = area2;
    }else if ((a >= PI6 * 5.0 && a <= PI6 * 6.0) || (a < -PI6 * 5.0 && a > -PI6 * 6.0)){
        vn = area3;
    }else if (a < -PI6 * 3.0 && a >= -PI6 * 5.0){
        vn = area4;
    }else if (a <= -PI6 && a > -PI6 * 3.0){
        vn = area5;
    }else if (a > -PI6 && a < PI6){
        vn = area6;
    }
    //獲取對(duì)應(yīng)三角形重心的顏色值
    vec4 color = texture2D(Texture, vn);
    // 將顏色值填充到片元著色器內(nèi)置變量gl_FragColor
    gl_FragColor = color;

atan是GLSL中的內(nèi)建函數(shù)，有兩種計(jì)算方式
1杆煞、atan(y,x) 值域是[0魏宽，π],
2、atan(y/x),值域是[-π/2, π/2]

完整的代碼見Github - 14_灰度顛倒馬賽克OC索绪、14灰度顛倒馬賽克_Swift