iOS開發(fā)之OpenGL ES(五) —— 分屏濾鏡詳解

前言

這篇文章是為了讓大家了解在小視頻或美圖等軟件中扭屁，如何利用OpenGL ES實現(xiàn)分屏濾鏡，并理解實現(xiàn)的原理糟描。

二分屏濾鏡實現(xiàn)

首先看一下下圖中的左邊原圖的紋理坐標(biāo)斩个。在紋理坐標(biāo)系中，原點是在左下角。有關(guān)紋理坐標(biāo)系可以參考紋理坐標(biāo)解析

原圖

下圖是我們需要實現(xiàn)的效果:

二分屏

實現(xiàn)思路是這樣的: 判斷紋理的Y坐標(biāo)思犁，在（0.0,0.5）和（0.5代虾，1.0）坐標(biāo)范圍內(nèi)填充為(0.25, 0.75)的紋理坐標(biāo)區(qū)間进肯，如下圖所示激蹲，其實我們在二分屏中使用的是（0.25，0.75）這個區(qū)間內(nèi)的紋理坐標(biāo)江掩。

為什么要使用(0.25,0.75)這個區(qū)間的紋理呢学辱？
我這里是按一般情況來考慮的，也可以使用（0.15环形，0.65）這種的范圍策泣，根據(jù)自己的需求定吧，如果要使用(0.15,0.65),在計算的時候(0,0.5)區(qū)間內(nèi)y坐標(biāo)就要加上0.15抬吟，(0.5,1.0)區(qū)間內(nèi)y坐標(biāo)就要減去0.35萨咕。

GLSL實現(xiàn)代碼如下，我這里加了注釋火本，但是運行的時候最好刪除中文注釋危队，不然有可能會報錯。

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

void main(void){
    vec2 uv = TextureCoordsVarying.xy;
    //判斷坐標(biāo)范圍
    if(uv.y >= 0.0 && uv.y <= 0.5){
        //（0.0,0.5）->(0.5, 0.75)
        uv.y = uv.y + 0.25;
    }else{
        // （0.5,1.0）->(0.5, 0.75)
        uv.y = uv.y - 0.25;
    }
    vec4 mask = texture2D(Texture,uv);
    gl_FragColor = vec4(mask.rgb,1.0);
}

三分屏濾鏡實現(xiàn)

需要實現(xiàn)的效果如下

實現(xiàn)思路:
和上面的二分屏類似钙畔，我們要填充的y坐標(biāo)的紋理區(qū)間是(1.0/3.0,2.0/3.0),所以在(0,1.0/3.0)區(qū)間內(nèi)的紋理坐標(biāo)要加上1.0/3.0,在（1.0/3.0,2.0/3.0）區(qū)間內(nèi)的紋理坐標(biāo)不需要修改茫陆，在（2.0/3.0,1）區(qū)間內(nèi)的紋理坐標(biāo)要減去1.0/3.0.

GLSL代碼如下:

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

void main(void){
    vec2 uv = TextureCoordsVarying.xy;
    if(uv.y >= 0.0 && 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 ;
    }
    vec4 mask = texture2D(Texture,uv);
    gl_FragColor = vec4(mask.rgb,1.0);
}

四分屏濾鏡實現(xiàn)

需要實現(xiàn)的效果如下:

實現(xiàn)思路: 可以看到我們縮放了圖片，圖片的寬度和高度都變成了原來的一半擎析。那么怎么縮放呢簿盅？
先從Y坐標(biāo)來看，分成了兩個區(qū)間(0,0.5)和(0.5,1)揍魂，要填充的紋理區(qū)間是(0,1),所以當(dāng)uv.y <= 0.5 時桨醋，uv.y * 2 就表示區(qū)間（0,1），uv.y >= 0.5時现斋， (uv.y - 0.5) * 2 表示區(qū)間(0,1)
同理喜最，X坐標(biāo)要填充的紋理區(qū)間也是（0，1）步责，計算方式和計算y坐標(biāo)一樣返顺。

GLSL代碼如下:

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

void main(void){
    vec2 uv = TextureCoordsVarying.xy;
    if(uv.y <= 0.5){
        uv.y = uv.y * 2.0;
    }else{
        uv.y = (uv.y - 0.5) * 2.0 ;
    }
    if(uv.x <= 0.5){
        uv.x = uv.x * 2.0;
    }else{
        uv.x = (uv.x - 0.5) * 2.0 ;
    }
    
    gl_FragColor = texture2D(Texture,uv);
}

九分屏濾鏡實現(xiàn)

需要實現(xiàn)的效果如下:

實現(xiàn)思路: 其實這個和上面的四分屏實現(xiàn)思路是一樣的，只不過這里是把圖片縮小了1/3蔓肯。
同理遂鹊，從Y坐標(biāo)來看，分為三個區(qū)間蔗包，（0秉扑，3/1 ), (3/1, 2/3), (3/2 , 1)

uv.y <= 1.0/3.0時， uv.y = uv.y * 3
uv.y 在1.0/3.0到2.0/3.0之間時， uv.y = (uv.y - 1.0/3.0) * 3
uv.y >= 2.0/3.0時舟陆， uv.y = (uv.y - 2.0/3.0) * 3

GLSL代碼如下:

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

void main(void){
    vec2 uv = TextureCoordsVarying.xy;
     if(uv.y >= 0.0 && 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 ;
    }
    if(uv.x >= 0.0 && 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 ;
    }
    
    gl_FragColor = texture2D(Texture,uv);
}

總結(jié)

以上就是使用OpenGL ES實現(xiàn)的幾種常見的分屏濾鏡效果误澳，理解后可自行實現(xiàn)不同的分屏效果，比如六分屏秦躯，橫向三分屏等忆谓。

Demo地址: 分屏濾鏡處理

最后編輯于：2019.07.09 18:55:43

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者