本案例的目的是理解如何用GLSL實(shí)現(xiàn)分屏（2/3/4/6/9）濾鏡

案例的效果圖如下

準(zhǔn)備工作

自定義著色器

完成無分屏濾鏡的著色器代碼

• 頂點(diǎn)著色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main(){
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

• 片元著色器

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

void main(){
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    gl_FragColor = vec4(mask.rgb, 1.0);
}

視圖控制器類

在實(shí)現(xiàn)分屏濾鏡之前，首先要呈現(xiàn)一個(gè)最原始的圖片，即無濾鏡效果的圖片，大致流程如下

主要分為3部分

• setupFilterBar函數(shù):底部濾鏡滾動(dòng)條
• filterInit函數(shù)：濾鏡處理初始化
• startFilterAnimation函數(shù)：濾鏡動(dòng)畫
  濾鏡動(dòng)畫的入口有兩個(gè)：
  • viewDidLoad函數(shù) --> filterInit函數(shù) --> shader加載 & 編譯 & program使用 --> 調(diào)用startFilterAnimation函數(shù)
  • 當(dāng)切換底部FilterBar時(shí) --> 選中某一個(gè)分屏效果 --> 對(duì)應(yīng)一組shader文件 --> shader加載 & 編譯 & program使用 --> 調(diào)用startFilterAnimation函數(shù)

setupFilterBar函數(shù)

主要是添加自定義的濾鏡滾動(dòng)條，利用collectionView實(shí)現(xiàn)底部自定義滾動(dòng)視圖，這部分內(nèi)容不多做說明，如果有疑問，可以參考文末完整demo

filterInit函數(shù)

主要是實(shí)現(xiàn)無分屏濾鏡效果時(shí)的圖片顯示，實(shí)現(xiàn)流程如下

根據(jù)圖示，分為以下幾部分

setupContext函數(shù)：設(shè)置上下文

setupLayer函數(shù)：創(chuàng)建layer & 綁定渲染和幀緩存區(qū)

setupVertexData函數(shù)：設(shè)置頂點(diǎn)數(shù)據(jù) & 頂點(diǎn)緩存區(qū)

setupTexture函數(shù)：圖片解壓縮 & 加載紋理

• 設(shè)置視口

• setupNormalShaderProgram函數(shù)：設(shè)置默認(rèn)著色器，即無分屏效果的著色器

以上幾部分的代碼，在之前的OpenGL ES案例中均有涉及，這里這不展開說明了，詳情可以參考文末完整代碼

分屏濾鏡實(shí)現(xiàn)

分屏濾鏡的實(shí)現(xiàn)主要還是分屏算法，而分屏算法主要是在片元著色器中main函數(shù)中完成的，所以切換不同分屏效果主要需要改動(dòng)以下幾部分內(nèi)容

• 新建一組shader文件，頂點(diǎn)著色器文件無任何變化，片元著色器文件的main函數(shù)中增加相應(yīng)分屏算法的代碼

• 視圖控制器類中增加FilterBar的數(shù)據(jù)源數(shù)據(jù)，并增加其item的點(diǎn)擊事件，新增加載對(duì)應(yīng)著色器文件的函數(shù)，類似于setupNormalShaderProgram函數(shù)，只需要修改著色器文件的名稱即可

下面分別說明下不同分屏效果的分屏算法的實(shí)現(xiàn)

二分屏

這里的二分屏是上下分別顯示圖片中間的一半，其算法如圖所示

當(dāng)實(shí)現(xiàn)二分屏濾鏡時(shí)，圖片紋理坐標(biāo)的x值是沒有任何變化的，主要是y值變化

• 當(dāng) y 在[0, 0.5]范圍時(shí)，屏幕的（0，0）坐標(biāo)需要對(duì)應(yīng)圖片的（0，0.25），所以y = y+0.25
• 當(dāng) y 在[0.5, 1]范圍時(shí)，屏幕的（0，0.5）坐標(biāo)需要對(duì)應(yīng)圖片的（0，0.25），所以y = y-0.25

片元著色器中main函數(shù)的分屏算法代碼如下

void main(){
    vec2 uv = TextureCoordsVarying.xy;
    float y;
    if (uv.y >= 0.0 && uv.y <= 0.5) {
        y = uv.y + 0.25;
    }else{
        y = uv.y - 0.25;
    }

    gl_FragColor = texture2D(Texture, vec2(uv.x, y));
}

三分屏

三分屏的顯示是屏幕三等分，分別顯示圖片中部分三分之一圖片，其實(shí)現(xiàn)原理如下

當(dāng)實(shí)現(xiàn)三分屏濾鏡時(shí)，圖片紋理坐標(biāo)的x值是沒有任何變化的，主要是y值變化

• 當(dāng) y 在[0, 1/3]范圍時(shí)，屏幕的（0，0）坐標(biāo)需要對(duì)應(yīng)圖片的（0，1/3），所以y = y+1/3
• 當(dāng) y 在[1/3, 2/3]范圍時(shí)，屏幕的（0，1/3）坐標(biāo)需要對(duì)應(yīng)圖片的（0，1/3），所以y 不變
• 當(dāng) y 在[2/3, 1]范圍時(shí)，屏幕的（0，2/3）坐標(biāo)需要對(duì)應(yīng)圖片的（0，1/3），所以y = y-1/3

片元著色器中main函數(shù)的分屏算法代碼如下

void main(){

    vec2 uv = TextureCoordsVarying.xy;
    if (uv.y < 1.0/3.0) {
        uv.y = uv.y + 1.0/3.0;
    }else if (uv.y > 2.0/3.0){
        uv.y = uv.y - 1.0/3.0;
    }

    gl_FragColor = texture2D(Texture, uv);
}

四分屏

四分屏的顯示是屏幕四等分，分別顯示縮小的紋理圖片，其實(shí)現(xiàn)原理如下

紋理圖片與屏幕的映射既可以是一致的坐標(biāo)，也可以映射到縮小的坐標(biāo)，如上圖所示。

當(dāng)實(shí)現(xiàn)四分屏?xí)r，紋理坐標(biāo)x、y均需要變化，且屏幕坐標(biāo)需要與紋理坐標(biāo)一一映射，例如（x，y）取值（0.5，0.5）需要映射到紋理坐標(biāo)（1，1）時(shí)，x、y均需要乘以2，即0.5 * 2 = 1，變化規(guī)則如下：

• 當(dāng) x 在[0, 0.5]范圍時(shí)，x = x*2
• 當(dāng) x在[0.5, 1]范圍時(shí)，x = (x-0.5)*2
• 當(dāng) y 在[0, 0.5]范圍時(shí)，y = y*2
• 當(dāng) y 在[0.5, 1]范圍時(shí)，y = (y-0.5)*2

片元著色器中main函數(shù)的分屏算法代碼如下

void main(){

    vec2 uv = TextureCoordsVarying.xy;

    if (uv.x <= 0.5) {
        uv.x = uv.x * 2.0;
    }else{
        uv.x = (uv.x - 0.5) * 2.0;
    }

     if (uv.y <= 0.5) {
           uv.y = uv.y * 2.0;
       }else{
           uv.y = (uv.y - 0.5) * 2.0;
       }

    gl_FragColor = texture2D(Texture, uv);
}

六分屏

六分屏是二分屏的演變，其實(shí)現(xiàn)原理如下

當(dāng)實(shí)現(xiàn)六分屏?xí)r，紋理坐標(biāo)x、y均需要變化，其變化規(guī)則如下：

• 當(dāng) x 在[0, 1/3]范圍時(shí)，x = x+1/3
• 當(dāng) x 在[1/3, 2/3]范圍時(shí)，x 不變
• 當(dāng) x 在[2/3, 1]范圍時(shí)，x = x-1/3
• 當(dāng) y 在[0, 0.5]范圍時(shí)，y = y+0.25
• 當(dāng) y 在[0.5, 1]范圍時(shí)，y = y-0.24

片元著色器中main函數(shù)的分屏算法代碼如下

void main(){

    vec2 uv = TextureCoordsVarying.xy;

    if (uv.x <= 1.0/3.0) {
        uv.x = uv.x + 1.0/3.0;
    }else if (uv.x >= 2.0/3.0){
        uv.x = uv.x - 1.0/3.0;
    }

     if (uv.y <= 0.5) {
         uv.y = uv.y + 0.25;
     }else{
         uv.y = uv.y - 0.25;
       }

    gl_FragColor = texture2D(Texture, uv);
}

九分屏

九分屏是4分屏的演變，其實(shí)現(xiàn)原理如下

當(dāng)實(shí)現(xiàn)九分屏?xí)r，紋理坐標(biāo)x、y均需要變化，其變化規(guī)則如下：

• 當(dāng) x 在[0, 1/3]范圍時(shí)，x = x*3
• 當(dāng) x 在[1/3, 2/3]范圍時(shí)，x = (x-1/3)*3
• 當(dāng) x 在[2/3, 1]范圍時(shí)，x = (x-2/3)*3
• 當(dāng) y 在[0, 1/3]范圍時(shí)，y= y*3
• 當(dāng) y 在[1/3, 2/3]范圍時(shí)，y = (y-1/3)*3
• 當(dāng) y在[2/3, 1]范圍時(shí)，y = (y-2/3)*3

片元著色器中main函數(shù)的分屏算法代碼如下

void main(){

    vec2 uv = TextureCoordsVarying.xy;

    if (uv.x <= 1.0/3.0) {
        uv.x = uv.x * 3.0;
    }else if (uv.x >= 2.0/3.0){
        uv.x = (uv.x - 2.0/3.0) * 3.0;
    }else{
        uv.x = (uv.x - 1.0/3.0)*3.0;
    }

    if (uv.y <= 1.0/3.0) {
        uv.y = uv.y * 3.0;
    }else if (uv.y >= 2.0/3.0){
        uv.y = (uv.y - 2.0/3.0) * 3.0;
    }else{
        uv.y = (uv.y - 1.0/3.0)*3.0;
    }

    gl_FragColor = texture2D(Texture, uv);
}

完整的代碼見Github - 13_分屏濾鏡OC、13分屏濾鏡_Swift