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

系列推荐文章（基础篇）：
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

下篇滤镜：

• 颠倒
• 灰度
• 漩涡
• 马赛克