OpenGL ES入门: 滤镜篇 - 分屏滤镜

·  阅读 2883

系列推荐文章(基础篇):
OpenGL/OpenGL ES入门:图形API以及专业名词解析
OpenGL/OpenGL ES入门:渲染流程以及固定存储着色器
OpenGL/OpenGL ES入门:图像渲染实现以及渲染问题
OpenGL/OpenGL ES入门:基础变换 - 初识向量/矩阵
OpenGL/OpenGL ES入门:纹理初探 - 常用API解析
OpenGL/OpenGL ES入门: 纹理应用 - 纹理坐标及案例解析(金字塔)
OpenGL/OpenGL ES入门: 顶点着色器与片元着色器(OpenGL过渡OpenGL ES)
OpenGL/OpenGL ES入门: GLKit以及API简介
OpenGL/OpenGL ES入门: GLKit使用以及案例
OpenGL/OpenGL ES入门: 使用OpenGL ES 渲染图片
OpenGL/OpenGL ES入门:iOS纹理翻转策略解析
OpenGL ES入门: 渲染金字塔 - 颜色、纹理、纹理与颜色混合填充以及GLKit实现

今天和大家分享一下关于使用OpenGL ES来写图片滤镜,实现图片滤镜的大前提,就是能够把原图给绘制出来,如果这部分内容还不是很熟悉的小伙伴,建议去阅读一下我之前的博客,熟悉一下,这样对后面的文章容易理解一点。

这篇主要介绍关于分屏的滤镜,由简入难,后面的篇章更加精彩哦~ 下面直接进入干货!!!

原图的渲染

有关原图的渲染,大家可以看下这篇博客OpenGL/OpenGL ES入门: 使用OpenGL ES 渲染图片,这里思路和代码基本一致,文章最后会给出demo,所以这里不过多描述。

双屏滤镜

双屏,顾名思义,把渲染出来的原图,分两屏显示(横屏或者竖屏),效果图如下

从上图理解,我们取该图片的想要展示位置的像素,然后获取纹素,进行绘制

假设,这里取的是0.25~0.75这一段的图片显示,则需要获取上图红色框里的纹素。 通过前面的学习,很容易想得到,把纹理传递到片元着色器里,然后提取纹理像素,然后进行渲染,下面看代码:

// 精度
precision highp float;
// 通过uniform传递过来的纹理
uniform sampler2D Texture;
// 纹理坐标
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.xy;
    float y;
    // 0.0~0.5 范围内显示0.25~0.75范围的像素
    if (uv.y >= 0.0 && uv.y <= 0.5) {
        y = uv.y + 0.25;
    }else {
        // 0.5~1.0范围内显示 0.25~0.75范围的像素
        y = uv.y - 0.25;
    }
    
    // 获取纹理像素,用于显示
    gl_FragColor = texture2D(Texture, vec2(uv.x, y));
}
复制代码

上面代码便可实现双屏显示 - 横屏, 如果有需要显示竖屏的,可片元着色器里的y值的改变,改写成x值便可。

四屏滤镜

四屏,我们采用的方式是把原图缩小为原图的1/4,分别放置在左上、左下、右下和右上,看下面效果图

这个思路也很简单,改变纹理的映射关系,显示一张原图时,映射是(0.0,0.0)、(0.0,1.0)、(1.0,1.0)、(1.0,0.0),现在改成(0.0,0.0)、(0.0,0.5)、(0.5,0.5)、(0.5,0.0),道理一样,改变片元着色器代码:

precision highp float;

uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.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);
}
复制代码

更新:2019-06-30
有的小伙伴说片元着色器中的* 2.0,不是很容易理解,所以这里分析一下

通过上图,先理解一下片元着色器中需要判断的点,如果我们要实现四屏,则需要在这四个区域渲染需要的内容,然后把代码中的 * 2.0 替换成 * 1.0,也就是不改变纹理坐标映射关系的时候,看下效果图

也就是说,如果我们要实现理想的四屏渲染,那么在每个区域内,都需要完整的纹理填充,即(0.0,0.0)、(0.0,1.0)、(1.0,1.0)、(1.0,0.0),不改变映射关系时是(0.0,0.0)、(0.0,0.5)、(0.5,0.5)、(0.5,0.0),也就是上面图片的效果,所以需要 * 2.0来达到这个效果

九屏滤镜

道理一样,不在重复,直接上代码

precision highp float;

uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;

void main() {
    
    vec2 uv = varyTextureCoord.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传送门:
分屏滤镜demo

下篇滤镜:

  • 颠倒
  • 灰度
  • 漩涡
  • 马赛克
分类:
iOS
标签:
分类:
iOS
标签: