分屏效果的實(shí)現(xiàn)就是通過改變紋理坐標(biāo)對應(yīng)關(guān)系。

二分屏

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紋理坐標(biāo)[0,0.5] t紋理坐標(biāo)范圍是[0,0.5]
因?yàn)樽笙陆秋@示整個紋理，整個紋理坐標(biāo)范圍為[0,1],所以s和t都乘以2
如果紋理范圍[0.5,1],先減去0.5，再乘以2.

六分屏

image.png

s坐標(biāo)通過減去1/3的倍數(shù)，讓s坐標(biāo)的取值范圍定位到[0,1/3]，然后乘以3
t坐標(biāo)通過減去1/2倍數(shù)，讓t坐標(biāo)的取值范圍定位到[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坐標(biāo)通過減去1/3倍數(shù)，讓t坐標(biāo)的取值范圍定位到[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);
}