默认
顶点着色器代码:
attribute vec4 Position; //顶点坐标
attribute vec2 TextureCoords; //纹理坐标
varying vec2 TextureCoordsVarying; //传递到片元着色器中的纹理坐标
void main (void) {
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}
片元着色器代码:
precision highp float; //设置片元着色器的精度
uniform sampler2D Texture; //纹理
varying vec2 TextureCoordsVarying; //纹理坐标
void main (void) {
//文素
vec4 mask = texture2D(Texture, TextureCoordsVarying);
gl_FragColor = vec4(mask.rgb, 1.0);
}
二分屏
image1.png当实现二分屏滤镜时,图片纹理坐标的x值是没有任何变化的,主要是y值变化
当 y 在[0, 0.5]范围时,屏幕的(0,0)坐标需要对应图片的(0,0.25),所以y = y+0.25
当 y 在[0.5, 1]范围时,屏幕的(0,0.5)坐标需要对应图片的(0,0.25),所以y = y-0.25
顶点着色器代码不变,片元着色器代码:
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
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));
}
三分屏
image2.png当实现三分屏滤镜时,图片纹理坐标的x值是没有任何变化的,主要是y值变化
当 y 在[0, 1/3]范围时,屏幕的(0,0)坐标需要对应图片的(0,1/3),所以y = y+1/3
当 y 在[1/3, 2/3]范围时,屏幕的(0,1/3)坐标需要对应图片的(0,1/3),所以y 不变
当 y 在[2/3, 1]范围时,屏幕的(0,2/3)坐标需要对应图片的(0,1/3),所以y = y-1/3
顶点着色器代码不变,片元着色器代码:
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);
}
四分屏
image3.png当实现四分屏时,纹理坐标x、y均需要变化,且屏幕坐标需要与纹理坐标一一映射,例如(x,y)取值(0.5,0.5)需要映射到纹理坐标(1,1)时,x、y均需要乘以2,即0.5 * 2 = 1,变化规则如下:
当 x 在[0, 0.5]范围时,x = x2
当 x在[0.5, 1]范围时,x = (x-0.5)2
当 y 在[0, 0.5]范围时,y = y2
当 y 在[0.5, 1]范围时,y = (y-0.5)2
顶点着色器代码不变,片元着色器代码:
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);
}
六分屏
image4.png当实现六分屏时,纹理坐标x、y均需要变化,其变化规则如下:
当 x 在[0, 1/3]范围时,x = x+1/3
当 x 在[1/3, 2/3]范围时,x 不变
当 x 在[2/3, 1]范围时,x = x-1/3
当 y 在[0, 0.5]范围时,y = y+0.25
当 y 在[0.5, 1]范围时,y = y-0.24
顶点着色器代码不变,片元着色器代码:
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);
}
九分屏
image5.png当实现九分屏时,纹理坐标x、y均需要变化,其变化规则如下:
当 x 在[0, 1/3]范围时,x = x3
当 x 在[1/3, 2/3]范围时,x = (x-1/3)3
当 x 在[2/3, 1]范围时,x = (x-2/3)3
当 y 在[0, 1/3]范围时,y= y3
当 y 在[1/3, 2/3]范围时,y = (y-1/3)3
当 y在[2/3, 1]范围时,y = (y-2/3)3
顶点着色器代码不变,片元着色器代码:
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);
}
网友评论