OpenGL ES 分屏滤镜

分屏

分屏滤镜的实现(分屏算法)：主要渲染区域与纹理坐标映射对应关系。
解析案例中2、3、4、6、9分屏中纹理坐标与渲染区域的对应关系。

1、二分屏

分屏坐标对应

分屏坐标对应

按照上图进行上下分屏时，

• x值：纹理坐标的x不需要进行变化。
• y值：变换对应到截取显示部分 [0.25,0.75]之间。
  • 在(0,0.5)部分对应纹理(0.25,0.75) ,y+ 0.25
  • 在(0.5,1)部分对应纹理(0.25,0.75) ,y- 0.25

在片元着色器中完成上图的顶点变化操作

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

2、三分屏

三分屏坐标对应

• x值：纹理坐标的x不需要进行变化。
• y值：
  • 在(0,1/3)对应纹理(1/3,2/3)。y + 1/3
  • 在(1/3,2/3)对应纹理(1/3,2/3)。y值不变
  • 在(2/3,1)对应纹理(1/3,2/3)。y - 1/3

片元着色器纹理坐标处理

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

3、四分屏

四分屏

• x值:
  • 在(0,0.5)对应纹理(0,1),x = x * 2
  • 在(0.5,1)对应纹理(0,1),x = (x-0.5) * 2
• y值
  • 在(0,0.5)对应纹理(0,1),y = y * 2
  • 在(0.5,1)对应纹理(0,1),y = (y-0.5) * 2

片元着色器纹理坐标处理

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

4、六分屏

六分屏

• x值:
  • 在(0,1/3)对应纹理(1/3,2/3),x = x + 1/3
  • 在(1/3,2/3)对应纹理(1/3,2/3),x = x,值不变
  • 在(2/3,1)对应纹理(1/3,2/3),x = x - 1/3
• y值
  • 在(0,0.5)对应纹理(0.25,0.75),y = y + 0.25
  • 在(0.5,1)对应纹理(0.25,0.75),y = y - 0.25

片元着色器纹理坐标处理

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

5、九分屏

九分屏

• x值:
  • 在(0,1/3)对应纹理(0,1),x = x * 3
  • 在(1/3,2/3)对应纹理(0,1),x = (x - 1/3) * 3
  • 在(2/3,1)对应纹理(0,1),x = (x - 2/3) * 3
• y值
  • 在(0,1/3)对应纹理(0,1),y = y * 3
  • 在(1/3,2/3)对应纹理(0,1),y = (y - 1/3) * 3
  • 在(2/3,1)对应纹理(0,1),y = (y - 2/3) * 3

片元着色器纹理坐标处理

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

案例demo