OpenGL ES分屏濾鏡實現

如今在抖音快手等平臺常見的"左右分屏"的小視頻是如何實現的呢?咱們能夠經過圖片看下,分屏濾鏡是如何實現的?由於這樣的分屏視頻,也是經過對每一幀的靜態圖片處理來實現的.

GLSL渲染圖片

使用GLSL渲染一張圖片的步驟,和以前的案例如出一轍EGL&OpenGL着色語言及案例.咱們能夠再次回憶下大體的過程.

其中咱們重點看如下幾點.

設置渲染&幀緩衝區

編譯着色器源碼

紋理加載

二分屏

• 當y在00.5之間時,取值範圍在0.250.75

• 當y在0.51之間時,取值範圍在0.250.75

片元着色器源碼中,添加取值邏輯

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

void main(){
    vec2 uv = TextureCoordsVarying;
    if (uv.y > 0.0 && uv.y <= 0.5) {
        uv.y = uv.y + 0.25;
    }else{
        uv.y = uv.y - 0.25;
    }
    vec4 mask = texture2D(Texture,uv);
    gl_FragColor = vec4(mask.rgb, 1.0);
}
複製代碼

三分屏

• 當x在01/3之間時,取值範圍在1/32/3
• 當x在2/31之間時,取值範圍在1/32/3
• 中間部分就正常取值

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

void main(){
    vec2 uv = TextureCoordsVarying;
    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;
    }
    vec4 mask = texture2D(Texture,uv);
    gl_FragColor = vec4(mask.rgb, 1.0);
}
複製代碼

四分屏

• 當x在00.5之間時,取值範圍在01
• 當x在0.51之間時,取值範圍在01
• 當y在00.5之間時,取值範圍在01
• 當y在0.51之間時,取值範圍在01

x和y的取值範圍,都存在2倍的關係

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

void main(){
    vec2 uv = TextureCoordsVarying;
    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;
    }
    vec4 mask = texture2D(Texture,uv);
    gl_FragColor = vec4(mask.rgb, 1.0);
}
複製代碼

六分屏

• 當x在01/3之間時,取值範圍在1/32/3
• 當x在2/31之間時,取值範圍在1/32/3
• 當y在00.5之間時,取值範圍在0.250.75
• 當y在0.51之間時,取值範圍在0.250.75

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

void main(){
    vec2 uv = TextureCoordsVarying;
    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.0 && uv.y <= 1.0/2.0) {
        uv.y = uv.y + 1.0/4.0;
    }else {
        uv.y = uv.y - 1.0/4.0;
    }
    vec4 mask = texture2D(Texture,uv);
    gl_FragColor = vec4(mask.rgb, 1.0);
}
複製代碼

九分屏實現和六分屏同理,這裏咱們只是提供了分屏的解決邏輯,實際如何分屏,還要由產品經理來決定.

推薦

OpenGL ES 案例11：分屏濾鏡