分屏滤镜(2)

WechatIMG6.jpeg

顶点着色器源码:

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

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

片元着色器源码:

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

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

分屏滤镜(3)

WechatIMG7.jpeg

顶点着色器不变
片元着色器源码:

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

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

分屏滤镜(4)

WechatIMG8.jpeg

顶点着色器不变
片元着色器源码:

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

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

分屏滤镜(9)

WechatIMG9.jpeg

顶点着色器不变
片元着色器源码:

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

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

总结:分屏滤镜实际上是对纹理重新映射。