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

·  阅读 79

实现的分屏效果如下

分屏实现效果.gif

二分屏实现思路

原图纹理坐标.png 从上面的动图中我们可以看到,二分屏滤镜展示的都是图中红色框出的区域(这个区域也可以自己任意选择)。

  • 实现思路: 我们还是使用一个纹理,来实现二分屏。拿到纹理之后我们修改纹理坐标的映射关系。在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);
复制代码

四分屏思路

四分屏.png

  • 实现思路,在四分屏滤镜里面,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 滤镜效果

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改