利用OpenGL ES在iPhone应用中实现分屏的滤镜效果

实现的分屏效果如下

二分屏实现思路

从上面的动图中我们可以看到，二分屏滤镜展示的都是图中红色框出的区域（这个区域也可以自己任意选择）。

• 实现思路： 我们还是使用一个纹理，来实现二分屏。拿到纹理之后我们修改纹理坐标的映射关系。在t轴上我们在[0, 0.5]和[0.5, 1.0]都映射[0.25, 0.75]的内容，
• 核心代码

    vec2 uv = TextureCoordsVarying.st;
    if (uv.t >= 0.0 && uv.t <= 0.5) {
        uv.t = uv.t + 0.25;
    }else{
        uv.t = uv.t - 0.25;
    }
    gl_FragColor = texture2D(Texture, uv);
复制代码

三分屏实现思路

• 实现思路，s轴上保持原来的映射不变，在t轴三，将[0, 1]分为三等分映射各个区域映射同一位置。因为我们是取的原图的[1/3, 2/3]这个区域所以我们可以在这个区间不做处理。
• 核心代码

    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);
复制代码

四分屏思路

• 实现思路，在四分屏滤镜里面，s轴和t轴的坐标映射都会发生变化。在t轴上[0, 0.5]和[0.5, 1]之间我们会映射t轴[0, 1]的纹理坐标。s轴同理；
• 核心代码

    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);
复制代码

以此可以类推6分屏和9分屏的实现思路，其实是我们改变了纹理坐标的映射关系，然后改变映射关系之后的纹理坐标来绘制图片，就达到了分屏的效果。

六分屏的核心代码

    vec2 uv = TextureCoordsVarying.xy;
    if (uv.x < 0.5) {
        uv.x = uv.x + 0.25;
    }else{
        uv.x = uv.x - 0.25;
    }
    
    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);
复制代码

九分屏的核心代码

    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地址OpenGL ES 滤镜效果。