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

今天和大家分享一下关于使用 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);
}
复制代码

九屏滤镜

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

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

效果图：