分屏效果的实现就是通过改变纹理坐标对应关系。

二分屏

testDiagram.png

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

void main (void) {

    vec2 temp = TextureCoordsVarying.xy;
    float x;
    if (temp.x > 0.0 && temp.x < 0.5) {
        x = temp.x + 0.25;
    } else {
        x = temp.x - 0.25;
    }
    vec4 mask = texture2D(Texture, vec2(x,temp.y));
    gl_FragColor = vec4(mask.rgb, 1.0);
}

image.png

三分屏

image.png

把整个图片沿竖分三份，保留中间的1/3到2/3。让中间的分别填充上1/3和下面2/3到1.

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

void main (void) {

    vec2 temp = TextureCoordsVarying.xy;
    float x = temp.x;
    if (temp.x > 0.0 && temp.x < 1.0/3.0) {
        x = temp.x + 1.0/3.0;
    } else if(temp.x > 2.0/3.0){
        x = temp.x - 1.0/3.0;
    }
    vec4 mask = texture2D(Texture, vec2(x,temp.y));
    gl_FragColor = vec4(mask.rgb, 1.0);

四分屏

image.png

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

void main (void) {

    vec2 temp = TextureCoordsVarying.xy;
    float x = temp.x;
    float y = temp.y;
    if (temp.y > 0.0 && temp.y < 1.0/2.0) {
        y *=2.0 ;
    } else if(temp.y > 1.0/2.0){
        y = (y - 1.0/2.0)*2.0;
    }
    if (temp.x > 0.0 && temp.x < 1.0/2.0) {
          x *=2.0 ;
      } else if(temp.x > 1.0/2.0){
          x = (x - 1.0/2.0)*2.0;
      }
    vec4 mask = texture2D(Texture, vec2(x,y));
    gl_FragColor = vec4(mask.rgb, 1.0);
}

左下角s纹理坐标[0,0.5] t纹理坐标范围是[0,0.5]
因为左下角显示整个纹理，整个纹理坐标范围为[0,1],所以s和t都乘以2
如果纹理范围[0.5,1],先减去0.5，再乘以2.

六分屏

image.png

s坐标通过减去1/3的倍数，让s坐标的取值范围定位到[0,1/3]，然后乘以3
t坐标通过减去1/2倍数，让t坐标的取值范围定位到[0,1/2],然后乘以2

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

void main (void) {

    vec2 temp = TextureCoordsVarying.xy;
    float x = temp.x;
    float y = temp.y;
    if (temp.y > 0.0 && temp.y < 1.0/2.0) {
        y *=2.0 ;
    } else if(temp.y > 1.0/2.0){
        y = (y - 1.0/2.0)*2.0;
    }
    if (temp.x > 0.0 && temp.x < 1.0/3.0) {
          x *=3.0 ;
    } else if(temp.x > 1.0/3.0 && temp.x < 2.0/3.0){
          x = (x - 1.0/3.0)*3.0;
    } else {
        x = (x - 2.0/3.0)*3.0;

    }
    vec4 mask = texture2D(Texture, vec2(x,y));
    gl_FragColor = vec4(mask.rgb, 1.0);
}

九分屏

image.png

s.t坐标通过减去1/3倍数，让t坐标的取值范围定位到[0,1/3],然后乘以3

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

void main (void) {

    vec2 temp = TextureCoordsVarying.xy;
    float x = temp.x;
    float y = temp.y;
    
   if (temp.y > 0.0 && temp.y < 1.0/3.0) {
             y *=3.0 ;
    } else if(temp.y > 1.0/3.0 && temp.y < 2.0/3.0){
        y = (y - 1.0/3.0)*3.0;
    } else{
          y = (y - 2.0/3.0)*3.0;

    }
    
    if (temp.x > 0.0 && temp.x < 1.0/3.0) {
          x *=3.0 ;
    } else if(temp.x > 1.0/3.0 && temp.x < 2.0/3.0){
          x = (x - 1.0/3.0)*3.0;
    } else {
        x = (x - 2.0/3.0)*3.0;

    }
    vec4 mask = texture2D(Texture, vec2(x,y));
    gl_FragColor = vec4(mask.rgb, 1.0);
}