OpenGL ES 案例11：分屏濾鏡

OpenGL + OpenGL ES +Metal 系列文章彙總

本文案例代碼有OC及Swift版本，詳情見文末連結

本案例的目的是了解如何用GLSL實作分屏（2/3/4/6/9）濾鏡

案例的效果圖如下

準備工作

自定義着色器

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

• 頂點着色器

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);
}

           

視圖控制器類

在實作分屏濾鏡之前，首先要呈現一個最原始的圖檔，即無濾鏡效果的圖檔，大緻流程如下

主要分為3部分

• setupFilterBar函數:底部濾鏡滾動條
• filterInit函數：濾鏡處理初始化

• startFilterAnimation函數：濾鏡動畫

  濾鏡動畫的入口有兩個：

  • viewDidLoad函數 --> filterInit函數 --> shader加載 & 編譯 & program使用 --> 調用startFilterAnimation函數
  • 當切換底部FilterBar時 --> 選中某一個分屏效果 --> 對應一組shader檔案 --> shader加載 & 編譯 & program使用 --> 調用startFilterAnimation函數

setupFilterBar函數

主要是添加自定義的濾鏡滾動條，利用collectionView實作底部自定義滾動視圖，這部分内容不多做說明，如果有疑問，可以參考文末完整demo

filterInit函數

主要是實作無分屏濾鏡效果時的圖檔顯示，實作流程如下

根據圖示，分為以下幾部分

• setupContext函數：設定上下文

  

• setupLayer函數：建立layer & 綁定渲染和幀緩存區

  

• setupVertexData函數：設定頂點資料 & 頂點緩存區

  

• setupTexture函數：圖檔解壓縮 & 加載紋理

  

• 設定視口
• setupNormalShaderProgram函數：設定預設着色器，即無分屏效果的着色器

  

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

分屏濾鏡實作

分屏濾鏡的實作主要還是分屏算法，而分屏算法主要是在片元着色器中main函數中完成的，是以切換不同分屏效果主要需要改動以下幾部分内容

• 建立一組shader檔案，頂點着色器檔案無任何變化，片元着色器檔案的main函數中增加相應分屏算法的代碼
• 視圖控制器類中增加FilterBar的資料源資料，并增加其item的點選事件，新增加載對應着色器檔案的函數，類似于

  setupNormalShaderProgram函數

  ，隻需要修改着色器檔案的名稱即可

  

下面分别說明下不同分屏效果的分屏算法的實作

二分屏

這裡的二分屏是上下分别顯示圖檔中間的一半，其算法如圖所示

當實作二分屏濾鏡時，圖檔紋理坐标的x值是沒有任何變化的，主要是y值變化

• 當 y 在[0, 0.5]範圍時，螢幕的（0，0）坐标需要對應圖檔的（0，0.25），是以y = y+0.25
• 當 y 在[0.5, 1]範圍時，螢幕的（0，0.5）坐标需要對應圖檔的（0，0.25），是以y = y-0.25

片元着色器中main函數的分屏算法代碼如下

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));
}
           

三分屏

三分屏的顯示是螢幕三等分，分别顯示圖檔中部分三分之一圖檔，其實作原理如下

當實作三分屏濾鏡時，圖檔紋理坐标的x值是沒有任何變化的，主要是y值變化

• 當 y 在[0, 1/3]範圍時，螢幕的（0，0）坐标需要對應圖檔的（0，1/3），是以y = y+1/3
• 當 y 在[1/3, 2/3]範圍時，螢幕的（0，1/3）坐标需要對應圖檔的（0，1/3），是以y 不變
• 當 y 在[2/3, 1]範圍時，螢幕的（0，2/3）坐标需要對應圖檔的（0，1/3），是以y = y-1/3

片元着色器中main函數的分屏算法代碼如下

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);
}
           

四分屏

四分屏的顯示是螢幕四等分，分别顯示縮小的紋理圖檔，其實作原理如下

紋理圖檔與螢幕的映射既可以是一緻的坐标，也可以映射到縮小的坐标，如上圖所示。

當實作四分屏時，紋理坐标x、y均需要變化，且螢幕坐标需要與紋理坐标一一映射，例如（x，y）取值（0.5，0.5）需要映射到紋理坐标（1，1）時，x、y均需要乘以2，即0.5 * 2 = 1，變化規則如下：

• 當 x 在[0, 0.5]範圍時，x = x*2
• 當 x在[0.5, 1]範圍時，x = (x-0.5)*2
• 當 y 在[0, 0.5]範圍時，y = y*2
• 當 y 在[0.5, 1]範圍時，y = (y-0.5)*2

片元着色器中main函數的分屏算法代碼如下

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);
}
           

六分屏

六分屏是二分屏的演變，其實作原理如下

當實作六分屏時，紋理坐标x、y均需要變化，其變化規則如下：

• 當 x 在[0, 1/3]範圍時，x = x+1/3
• 當 x 在[1/3, 2/3]範圍時，x 不變
• 當 x 在[2/3, 1]範圍時，x = x-1/3
• 當 y 在[0, 0.5]範圍時，y = y+0.25
• 當 y 在[0.5, 1]範圍時，y = y-0.24

片元着色器中main函數的分屏算法代碼如下

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分屏的演變，其實作原理如下

當實作九分屏時，紋理坐标x、y均需要變化，其變化規則如下：

• 當 x 在[0, 1/3]範圍時，x = x*3
• 當 x 在[1/3, 2/3]範圍時，x = (x-1/3)*3
• 當 x 在[2/3, 1]範圍時，x = (x-2/3)*3
• 當 y 在[0, 1/3]範圍時，y= y*3
• 當 y 在[1/3, 2/3]範圍時，y = (y-1/3)*3
• 當 y在[2/3, 1]範圍時，y = (y-2/3)*3

片元着色器中main函數的分屏算法代碼如下

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