美文网首页OpenGL ES
六:GLSL分屏滤镜

六:GLSL分屏滤镜

作者: 凯歌948 | 来源:发表于2020-08-11 17:48 被阅读0次

    默认

    顶点着色器代码:

    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= y
    3
    当 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);
    }
    

    分屏滤镜demo

    相关文章

      网友评论

        本文标题:六:GLSL分屏滤镜

        本文链接:https://www.haomeiwen.com/subject/rcuydktx.html