OpenGL ES（4）— 滤镜篇之分屏滤镜

demo效果

分屏滤镜.gif

一、二分屏

幻灯片2.jpg

幻灯片3.jpg

我们取该图片的想要展示位置的像素，然后获取纹素，进行绘制
假设我们取的是0.25～0.75这一段的图片显示，则需要获取上图黑色框里的纹素。 通过前面的学习，很容易想得到，把纹理传递到片元着色器里，然后提取纹理像素，然后进行渲染

• 当 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

下面看代码：

// 精度
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值便可。

二、三分屏滤镜

幻灯片8.jpg

幻灯片4.jpg

三分屏滤镜原理很简单，即通过改变纹理坐标的映射关系

• 当 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

片元着色器中的代码：

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

三、四分屏

幻灯片9.jpg

幻灯片5.jpg

实现四分屏时，纹理坐标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{[图片上传中...(幻灯片10.jpg-87f21a-1597331937085-0)]

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

四、六分屏

幻灯片10.jpg

幻灯片6.jpg

实现六分屏时，结合2分屏与六分屏的算法，其变化规则如下：

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

五、九分屏

幻灯片11.jpg

幻灯片7.jpg

当实现九分屏时，纹理坐标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);
}