一.先看看整体效果
分屏效果
说明:所有分屏原理操作的是片元着色器。顶点着色器不变，这里附上顶点着色器代码，下面不在涉及顶点着色器，至于自定义顶点/片元着色器请看我以前的博客，顶点着色器如下:
attribute vec4 Position;
attributevec2TextureCoords;
varyingvec2TextureCoordsVarying;
voidmain (void) {
gl_Position= Position;
TextureCoordsVarying = TextureCoords;
}
二.二分屏实现原理
2.1我们先来看看二分屏片元着色器代码:
precision highp float;--------------->定义精度，最后都写一下
uniform sampler2D Texture;----------->纹理
varyinghighpvec2TextureCoordsVarying;---------->纹理坐标
voidmain() {
vec2uv = TextureCoordsVarying.xy;
floaty;
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));
}
所谓二分屏，就是当显示一张图片的时候，截取纹理Y坐标下0.25-0.75的位置，为什么是0.25至0.75了，因为在我们拍摄的过程，大多图片的核心内容显示在这个区域，当然，在自定义着色器中，这个值你可以修改，但最后的效果不是很理想，你可以试一试哈。我们知道纹理的坐标范围是（0，1），流程示意图如下：
二分屏示意图
效果图
三.三分屏实现原理
三分屏片元着色器代码:
precision highp float;
uniform sampler2D Texture;
varyinghighpvec2TextureCoordsVarying;
voidmain() {
vec2uv = TextureCoordsVarying.xy;
if(uv.y <1.0/3.0) {
uv.y = uv.y +1.0/3.0;
}elseif(uv.y >2.0/3.0){
uv.y = uv.y -1.0/3.0;
}
gl_FragColor=texture2D(Texture, uv);
}
三分屏和二分屏的原理一样，判断的位置变成了1/3处:
三分屏示意图
三分屏效果图
四.四分屏实现原理
四分屏片元着色器代码:
precision highp float;
uniform sampler2D Texture;
varyinghighpvec2TextureCoordsVarying;
voidmain() {
vec2uv = 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);
}
四分屏特点:原样显示图片的大小，不放大缩小，从代码中我们可以看出，当纹理坐标（x，y）在0-0.5的时候，我们让其乘以2，为什么？原来纹理坐标在0到0.5的时候，获取纹理的时候，只能对应纹理0到0.5，使其乘以2，原本0到0.5的范围就变成了0到1，当纹理坐标（x，y）大于0.5的时候，先减去0.5，再乘以2，也使其0.5到1的范围先变成0到0.5，最后变成0到1，这样，当获取纹理的时候，无论从0到0.5的范围，还是0.5到1的范围，都是变成获取（0，1）整张图片。究其根本原因就是改变纹理坐标获取的纹理位置。原理示意图如下:
四分屏示意图
四分屏效果图
五。六分屏实现原理
六分屏片元着色器代码:
precision highp float;
uniform sampler2D Texture;
varyinghighpvec2TextureCoordsVarying;
voidmain() {
vec2uv = TextureCoordsVarying.xy;
if(uv.x <=1.0/3.0){
uv.x = uv.x +1.0/3.0;
}elseif(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);
}
你看懂了2/3/4分屏原理，6和9分屏原理就很简单了，6分屏实现原理就是同时改变纹理坐标的值，x坐标取三分之一处，Y坐标取0.5之处，主要是看你的图拍你的样子，原理示意图参照2/3/4分屏
六分屏效果图
六.九分屏实现原理
九分屏片元着色器代码:
precision highp float;
uniform sampler2D Texture;
varyinghighpvec2TextureCoordsVarying;
voidmain() {
vec2uv = TextureCoordsVarying.xy;
if(uv.x <1.0/3.0) {
uv.x = uv.x *3.0;
}elseif(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;
}elseif(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);
}
九分屏原理和四分屏原理一样，只是x，y分屏的地方选择的是1/3，2/3处，相关流程示意图，请参照4分屏示意图
九分屏效果图
最后附上代码地址:链接: https://pan.baidu.com/s/1bzJpt2Nq6h7DGpfx8PQYdQ 提取码: cck8
网友评论