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

效果图:

demo传送门:

分屏滤镜demo

下篇滤镜:

  • 颠倒
  • 灰度
  • 漩涡
  • 马赛克
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章