OpenGL ES入門： 濾鏡篇 - 分屏濾鏡

系列推薦文章（基礎篇）：
OpenGL/OpenGL ES入門：圖形API以及專業名詞解析
OpenGL/OpenGL ES入門：渲染流程以及固定存儲着色器
OpenGL/OpenGL ES入門：圖像渲染實現以及渲染問題
OpenGL/OpenGL ES入門：基礎變換 - 初識向量/矩陣
OpenGL/OpenGL ES入門：紋理初探 - 經常使用API解析
OpenGL/OpenGL ES入門： 紋理應用 - 紋理座標及案例解析(金字塔)
OpenGL/OpenGL ES入門： 頂點着色器與片元着色器（OpenGL過渡OpenGL ES）
OpenGL/OpenGL ES入門： GLKit以及API簡介
OpenGL/OpenGL ES入門： GLKit使用以及案例
OpenGL/OpenGL ES入門： 使用OpenGL ES 渲染圖片
OpenGL/OpenGL ES入門：iOS紋理翻轉策略解析
OpenGL ES入門： 渲染金字塔 - 顏色、紋理、紋理與顏色混合填充以及GLKit實現

今天和你們分享一下關於使用OpenGL ES來寫圖片濾鏡，實現圖片濾鏡的大前提，就是可以把原圖給繪製出來，若是這部份內容還不是很熟悉的小夥伴，建議去閱讀一下我以前的博客，熟悉一下，這樣對後面的文章容易理解一點。

這篇主要介紹關於分屏的濾鏡，由簡入難，後面的篇章更加精彩哦～ 下面直接進入乾貨！！！

原圖的渲染

有關原圖的渲染，你們能夠看下這篇博客OpenGL/OpenGL ES入門： 使用OpenGL ES 渲染圖片，這裏思路和代碼基本一致，文章最後會給出demo，因此這裏不過多描述。

雙屏濾鏡

雙屏，顧名思義，把渲染出來的原圖，分兩屏顯示（橫屏或者豎屏），效果圖以下

從上圖理解，咱們取該圖片的想要展現位置的像素，而後獲取紋素，進行繪製

假設，這裏取的是0.25～0.75這一段的圖片顯示，則須要獲取上圖紅色框裏的紋素。 經過前面的學習，很容易想獲得，把紋理傳遞到片元着色器裏，而後提取紋理像素，而後進行渲染，下面看代碼：

// 精度
precision highp float;
// 經過uniform傳遞過來的紋理
uniform sampler2D Texture;
// 紋理座標
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.xy;
    float y;
    // 0.0～0.5 範圍內顯示0.25～0.75範圍的像素
    if (uv.y >= 0.0 && uv.y <= 0.5) {
        y = uv.y + 0.25;
    }else {
        // 0.5～1.0範圍內顯示 0.25～0.75範圍的像素
        y = uv.y - 0.25;
    }
    
    // 獲取紋理像素，用於顯示
    gl_FragColor = texture2D(Texture, vec2(uv.x, y));
}
複製代碼

上面代碼即可實現雙屏顯示 - 橫屏， 若是有須要顯示豎屏的，可片元着色器裏的y值的改變，改寫成x值即可。

四屏濾鏡

四屏，咱們採用的方式是把原圖縮小爲原圖的1/4，分別放置在左上、左下、右下和右上，看下面效果圖

這個思路也很簡單，改變紋理的映射關係，顯示一張原圖時，映射是(0.0,0.0)、(0.0,1.0)、(1.0,1.0)、(1.0,0.0)，如今改爲(0.0,0.0)、(0.0,0.5)、(0.5,0.5)、(0.5,0.0)，道理同樣，改變片元着色器代碼：

precision highp float;

uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.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);
}
複製代碼

更新：2019-06-30
有的小夥伴說片元着色器中的* 2.0，不是很容易理解，因此這裏分析一下

經過上圖，先理解一下片元着色器中須要判斷的點，若是咱們要實現四屏，則須要在這四個區域渲染須要的內容，而後把代碼中的 * 2.0 替換成 * 1.0，也就是不改變紋理座標映射關係的時候，看下效果圖

也就是說，若是咱們要實現理想的四屏渲染，那麼在每一個區域內，都須要完整的紋理填充，即(0.0,0.0)、(0.0,1.0)、(1.0,1.0)、(1.0,0.0)，不改變映射關係時是(0.0,0.0)、(0.0,0.5)、(0.5,0.5)、(0.5,0.0)，也就是上面圖片的效果，因此須要 * 2.0來達到這個效果

九屏濾鏡

道理同樣，不在重複，直接上代碼

precision highp float;

uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.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 - 1.0 / 3.0) * 3.0;
    }else {
        uv.x = (uv.x - 2.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 - 1.0 / 3.0) * 3.0;
    }else {
        uv.y = (uv.y - 2.0 / 3.0) * 3.0;
    }
    
    gl_FragColor = texture2D(Texture, uv);
}
複製代碼

效果圖：

demo傳送門：
分屏濾鏡demo

下篇濾鏡：

• 顛倒
• 灰度
• 漩渦
• 馬賽克