在 iOS 中使用 GLSL 实现分屏滤镜

首先使用 OpenGL ES 加载原图，可以参考我的另一篇文章《OpenGL ES 加载图片并翻转》。顶点着色器代码不变，主要 attribute 属性传入顶点坐标和纹理坐标。

顶点着色器

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main()
{
    TextureCoordsVarying = TextureCoords;
    gl_Position = Position;
}

片元着色器 uniform 传入纹理图片，我们将根据修改纹理坐标的对应关系实现对应的分屏效果。

片元着色器（原图）

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

void main()
{
    TextureCoordsVarying = TextureCoords;
    gl_Position = Position;
}

原图.png

2分屏

片元着色器（2分屏）

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main()
{
    vec2 xy = TextureCoordsVarying;
    float y;
    if (xy.y >= 0.0 && xy.y <= 0.5)
    {
        y = xy.y + 0.25;
    }
    else
    {
        y = xy.y - 0.25;
    }
    gl_FragColor = texture2D(Texture, vec2(xy.x, y));
}

分屏_2.png

3分屏

片元着色器（3分屏）

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main()
{
    vec2 xy = TextureCoordsVarying;
    if (xy.y < 1.0/3.0)
    {
        xy.y = xy.y + 1.0/3.0;
    }
    else if (xy.y > 2.0/3.0)
    {
        xy.y = xy.y - 1.0/3.0;
    }
    gl_FragColor = texture2D(Texture, xy);
}

分屏_3.png

4分屏

片元着色器（4分屏）

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main()
{
    vec2 xy = TextureCoordsVarying;
    if (xy.x <= 0.5)
    {
        xy.x = xy.x * 2.0;
    }
    else
    {
        xy.x = (xy.x - 0.5) * 2.0;
    }
    
    if (xy.y <= 0.5)
    {
        xy.y = xy.y * 2.0;
    }
    else
    {
        xy.y = (xy.y - 0.5) * 2.0;
    }
    
    gl_FragColor = texture2D(Texture, xy);
}

分屏_4.png

6分屏

片元着色器（6分屏）

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main()
{
    vec2 xy = TextureCoordsVarying;
    if (xy.x <= 1.0/3.0)
    {
        xy.x = xy.x + 1.0/3.0;
    }
    else if (xy.x >= 2.0/3.0)
    {
        xy.x = xy.x - 1.0/3.0;
    }
    
    if (xy.y <= 1.0/3.0)
    {
        xy.y = xy.y + 1.0/3.0;
    }
    else if (xy.y >= 2.0/3.0)
    {
        xy.y = xy.y - 1.0/3.0;
    }
    
    gl_FragColor = texture2D(Texture, xy);
}

分屏_6.png

9分屏

片元着色器（9分屏）

precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

void main()
{
    vec2 xy = TextureCoordsVarying;
    if (xy.x <= 1.0/3.0)
    {
        xy.x = xy.x * 3.0;
    }
    else if (xy.x <= 2.0/3.0)
    {
        xy.x = (xy.x - 1.0/3.0) * 3.0;
    }
    else
    {
        xy.x = (xy.x - 2.0/3.0) * 3.0;
    }
    
    if (xy.y <= 1.0/3.0)
    {
        xy.y = xy.y * 3.0;
    }
    else if (xy.y <= 2.0/3.0)
    {
        xy.y = (xy.y - 1.0/3.0) * 3.0;
    }
    else
    {
        xy.y = (xy.y - 2.0/3.0) * 3.0;
    }
    
    gl_FragColor = texture2D(Texture, xy);
}

分屏_9.png