分屏效果的实现就是通过改变纹理坐标对应关系。
二分屏
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);
}
网友评论