13-1.GLSL-分屏滤镜分析

全屏

默认

顶点着色器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);
}

实现分屏只需要修改片元着色器,无需修改顶点着色器
Normal.vsh,SplitScreen_2.vsh,SplitScreen_3.vsh,SplitScreen_4.vsh,SplitScreen_6.vsh,SplitScreen_9.vsh顶点着色器代码都是一样的

着色器文件

二分屏

这里的二分屏是上下分别显示图片中间的一半,其算法如图所示

二分屏

当实现二分屏滤镜时,图片纹理坐标的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

片元着色器中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));
}

三分屏

三分屏的显示是屏幕三等分,分别显示图片中部分三分之一图片,其实现原理如下

三分屏

当实现三分屏滤镜时,图片纹理坐标的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

片元着色器中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);
}

四分屏

四分屏的显示是屏幕四等分,分别显示缩小的纹理图片,其实现原理如下

四分屏

纹理图片与屏幕的映射既可以是一致的坐标,也可以映射到缩小的坐标,如上图所示。

当实现四分屏时,纹理坐标x、y均需要变化,且屏幕坐标需要与纹理坐标一一映射,例如(x,y)取值(0.5,0.5)需要映射到纹理坐标(1,1)时,x、y均需要乘以2,即0.5 * 2 = 1,变化规则如下:

  • 当 x 在[0, 0.5]范围时,x = x*2
  • 当 x在[0.5, 1]范围时,x = (x-0.5)*2
  • 当 y 在[0, 0.5]范围时,y = y*2
  • 当 y 在[0.5, 1]范围时,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);
}

六分屏

六分屏是二分屏的演变,其实现原理如下

六分屏

当实现六分屏时,纹理坐标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

片元着色器中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);
}

九分屏

九分屏是四分屏的演变,其实现原理如下

九分屏

当实现九分屏时,纹理坐标x、y均需要变化,其变化规则如下:

  • 当 x 在[0, 1/3]范围时,x = x*3
  • 当 x 在[1/3, 2/3]范围时,x = (x-1/3)*3
  • 当 x 在[2/3, 1]范围时,x = (x-2/3)*3
  • 当 y 在[0, 1/3]范围时,y= y*3
  • 当 y 在[1/3, 2/3]范围时,y = (y-1/3)*3
  • 当 y在[2/3, 1]范围时,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);
}

你可能感兴趣的:(13-1.GLSL-分屏滤镜分析)