全屏
頂點(diǎn)著色器
Normal.vsh代碼
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main (void) {
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}
片元著色器Normal.fsh代碼
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec4 mask = texture2D(Texture, TextureCoordsVarying);
gl_FragColor = vec4(mask.rgb, 1.0);
}
實(shí)現(xiàn)分屏只需要修改
片元著色器,無(wú)需修改頂點(diǎn)著色器
Normal.vsh,SplitScreen_2.vsh,SplitScreen_3.vsh,SplitScreen_4.vsh,SplitScreen_6.vsh,SplitScreen_9.vsh頂點(diǎn)著色器代碼都是一樣的
二分屏
這里的二分屏是上下分別顯示圖片中間的一半举塔，其算法如圖所示
當(dāng)實(shí)現(xiàn)二分屏濾鏡時(shí)，圖片紋理坐標(biāo)的x值是沒(méi)有任何變化的陶贼，主要是y值變化
- 當(dāng) y 在[0, 0.5]范圍時(shí)啤贩，屏幕的（0，0）坐標(biāo)需要對(duì)應(yīng)圖片的（0拜秧，0.25）痹屹，所以y = y+0.25
- 當(dāng) y 在[0.5, 1]范圍時(shí)，屏幕的（0枉氮，0.5）坐標(biāo)需要對(duì)應(yīng)圖片的（0志衍，0.25），所以y = y-0.25
片元著色器中SplitScreen_2.fsh代碼如下
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));
}
三分屏
三分屏的顯示是屏幕三等分聊替，分別顯示圖片中部分三分之一圖片楼肪，其實(shí)現(xiàn)原理如下
當(dāng)實(shí)現(xiàn)三分屏濾鏡時(shí)，圖片紋理坐標(biāo)的x值是沒(méi)有任何變化的惹悄，主要是y值變化
- 當(dāng) y 在[0, 1/3]范圍時(shí)春叫，屏幕的（0，0）坐標(biāo)需要對(duì)應(yīng)圖片的（0，1/3）暂殖，所以y = y+1/3
- 當(dāng) y 在[1/3, 2/3]范圍時(shí)价匠，屏幕的（0，1/3）坐標(biāo)需要對(duì)應(yīng)圖片的（0呛每，1/3）踩窖，所以y 不變
- 當(dāng) y 在[2/3, 1]范圍時(shí)，屏幕的（0晨横，2/3）坐標(biāo)需要對(duì)應(yīng)圖片的（0洋腮，1/3），所以y = y-1/3
片元著色器中SplitScreen_3.fsh代碼如下
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);
}
四分屏
四分屏的顯示是屏幕四等分手形，分別顯示縮小的紋理圖片啥供，其實(shí)現(xiàn)原理如下
紋理圖片與屏幕的映射既可以是一致的坐標(biāo)，也可以映射到縮小的坐標(biāo)叁幢，如上圖所示滤灯。
當(dāng)實(shí)現(xiàn)四分屏?xí)r坪稽，紋理坐標(biāo)x曼玩、y均需要變化，且屏幕坐標(biāo)需要與紋理坐標(biāo)一一映射窒百，例如（x黍判，y）取值（0.5，0.5）需要映射到紋理坐標(biāo)（1篙梢，1）時(shí)顷帖，x、y均需要乘以2渤滞，即0.5 * 2 = 1贬墩，變化規(guī)則如下：
- 當(dāng) x 在[0, 0.5]范圍時(shí)，x = x*2
- 當(dāng) x在[0.5, 1]范圍時(shí)妄呕，x = (x-0.5)*2
- 當(dāng) y 在[0, 0.5]范圍時(shí)陶舞，y = y*2
- 當(dāng) y 在[0.5, 1]范圍時(shí)，y = (y-0.5)*2
片元著色器中SplitScreen_4.fsh代碼如下
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);
}
六分屏
六分屏是二分屏的演變绪励，其實(shí)現(xiàn)原理如下
當(dāng)實(shí)現(xiàn)六分屏?xí)r肿孵，紋理坐標(biāo)x、y均需要變化疏魏，其變化規(guī)則如下：
- 當(dāng) x 在[0, 1/3]范圍時(shí)停做，x = x+1/3
- 當(dāng) x 在[1/3, 2/3]范圍時(shí)，x 不變
- 當(dāng) x 在[2/3, 1]范圍時(shí)大莫，x = x-1/3
- 當(dāng) y 在[0, 0.5]范圍時(shí)蛉腌，y = y+0.25
- 當(dāng) y 在[0.5, 1]范圍時(shí)，y = y-0.24
片元著色器中SplitScreen_6.fsh代碼如下
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);
}
九分屏
九分屏是四分屏的演變，其實(shí)現(xiàn)原理如下
當(dāng)實(shí)現(xiàn)九分屏?xí)r烙丛，紋理坐標(biāo)x贯吓、y均需要變化，其變化規(guī)則如下：
- 當(dāng) x 在[0, 1/3]范圍時(shí)蜀变，x = x*3
- 當(dāng) x 在[1/3, 2/3]范圍時(shí)悄谐，x = (x-1/3)*3
- 當(dāng) x 在[2/3, 1]范圍時(shí)，x = (x-2/3)*3
- 當(dāng) y 在[0, 1/3]范圍時(shí)库北，y= y*3
- 當(dāng) y 在[1/3, 2/3]范圍時(shí)爬舰，y = (y-1/3)*3
- 當(dāng) y在[2/3, 1]范圍時(shí)，y = (y-2/3)*3
片元著色器中SplitScreen_9.fsh代碼如下
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);
}
