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

整體的效果圖如下：

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

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

下面只針對濾鏡的自定義片元著色器中的GLSL代碼進行解釋說明

灰度濾鏡

灰度濾鏡的實現(xiàn)原理是讓RGB值保持一個平衡并填充，或者只保留一個亮度值，即綠色，在人眼中，綠色的亮度是最顯眼的，綠色值越深，在肉眼觀察中圖片越暗淡，這是眼睛的一種生理現(xiàn)象。

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

• 權(quá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，這種方式方便簡單，且易用

在片元著色器中分別使用 浮點算法 和 僅取綠色實現(xià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(){
    //獲取對應紋理坐標系下色顏色值
    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(){
    //獲取對應紋理坐標系下色顏色值
    vec4 mask = texture2D(Texture, TextureCoordsVarying);

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

效果圖如下所示

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

顛倒濾鏡

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

在片元著色器中，翻轉(zhuǎn)紋理坐標y值，實現(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);
}

馬賽克濾鏡

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

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

不同馬賽克樣式，對應不同的濾鏡算法，如圖所示

正方形馬賽克

正方形馬賽克原理：把圖片的一個相當大小的區(qū)域用同一個顏色值來表示，可以認為是大規(guī)模的降低圖像的分辨率，從而讓圖像的一些細節(jié)隱藏起來

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

• 根據(jù)紋理坐標計算實際圖像中的位置，相當于將紋理顏色區(qū)放大
• 計算出一個小馬賽克的坐標，即找到馬賽克提取顏色值的像素點
• 將馬賽克坐標換算回紋理坐標，即將紋理顏色區(qū)縮小
  如圖所示

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

precision highp float;
//紋理坐標
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(){
    //計算實際圖像位置
    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 計算出一個小馬賽克的坐標
    vec2 XYMosaic = vec2(floor(intXY.x/MosaicSize.x)*MosaicSize.x, floor(intXY.y/MosaicSize.y)*MosaicSize.y);

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

六邊形馬賽克

六邊形馬賽克原理：將一張圖片，分割成由六邊形組成，再取每個六邊形的中心點畫出一個個的矩形，根據(jù)矩形的奇偶排列情況求出對應的2個中心點，并計算紋理坐標與兩個中心點的距離，根據(jù)距離判斷，采取就近原則，當前的六邊形就采用近的中心點的顏色值。

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

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

• 設置矩形的長寬比例值TR、TB（TB：TR 符合比例 3：√3）
  其中長寬比為3：√3，計算過程如下：

• 獲取紋理坐標的x，y

• 根據(jù)紋理坐標計算對應的矩形坐標wx、wy
  假設矩陣的比例為3*len：√3*len，那么紋理坐標（x，y）對應的矩陣坐標為

根據(jù)行列的奇偶情況，求對應的中心點紋理坐標v1、v2

• 偶行偶列：（0，0）（1，1）/，即左上、右下

• 偶行奇列：（0，1）（1，0）\，即左下、右上

• 奇行偶列：（0，1）（1，0）\，即左下、右上

• 奇行奇列：（0，0）（1，1）/，即左上、右下
  最終匯總起來也只有2種情況，（0，0）（1，1） 和 （0，1）（1，0），如下圖所示

其中單個矩陣中，4個點的坐標計算公式如下：

• 對于計算中的wx+1，拿（1，0）點來說，wx+1等同于（1，0）與（0，0）之間相差一個矩形的長，這個長度為1，為了得到（1，0）點的坐標，要在（0，0）點坐標的基礎上，將wx增加一個長
• 對于計算中的wy+1，拿（0，1）點來說，wy+1等同于（0，0）與（0，1）之間相差一個矩形的高，這個長度為1，為了得到（0，1）點的坐標，要在（0，0）點坐標的基礎上，將wy增加一個高

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

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

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

• 根據(jù)求出的距離，判斷離哪個中心點近，就取哪個六邊形的中心點顏色值為六邊形的顏色值

片元著色器代碼

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

void main(){

    float length = mosaicSize;
    //矩形的高的比例為√3，取值 √3/2 ，也可以直接取√3
    float TR = 0.866025;
    //矩形的長的比例為3，取值 3/2 = 1.5，也可以直接取3
    float TB = 1.5;

    //取出紋理坐標
    float x = TextureCoordsVarying.x;
    float y = TextureCoordsVarying.y;

    //根據(jù)紋理坐標計算出對應的矩陣坐標 
    //即 矩陣坐標wx = int（紋理坐標x/ 矩陣長），矩陣長 = TB*len
    //即 矩陣坐標wy = int（紋理坐標y/ 矩陣寬），矩陣寬 = TR*len
    int wx = int(x / TB / length);
    int wy = int(y / TR / length);
    vec2 v1, v2, vn;

    //判斷wx是否為偶數(shù)，等價于 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));
        }
    }
    //利用距離公式，計算中心點與當前像素點的距離
    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));

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

三角形馬賽克

原理：三角形馬賽克是由六邊形馬賽克演變而來，得到三角形的前提，就是的先有六邊形，然后將正六邊形6等分，每個三角形都是正三角形，然后求出紋理坐標與中心點的夾角，同時求出三角形的中心點，根據(jù)夾角判斷，夾角屬于哪個三角形，就將該三角形的中心點顏色作為整個三角形的紋素

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

• 求出當前像素點與紋理中心點的夾角
  如下圖所示，紋理坐標為（x，y），中心點為vn，求夾角

計算6個三角形的中心點

判斷夾角屬于哪個三角形，則獲取哪個三角形的中心點坐標
其中，不同三角形的夾角范圍如圖所示

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

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

    //判斷夾角，屬于哪個三角形，則獲取哪個三角形的中心點坐標
    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;
    }
    //獲取對應三角形重心的顏色值
    vec4 color = texture2D(Texture, vn);
    // 將顏色值填充到片元著色器內(nèi)置變量gl_FragColor
    gl_FragColor = color;

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

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