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

OpenGL ES 系列

• GLKit初探
• 简介与渲染流程
• GLKit应用加载图片
• 滤镜1-分屏滤镜
• 滤镜2-灰度,颠倒,旋涡,马赛克
• 滤镜3-缩放,灵魂出窍,闪白,毛刺

原图

一.三分屏

1.需求:

y轴方向三分,每部分都显示原图像Y方向中间三分之一的部分.

2.代码实现:

precision highp float;
uniform sampler2D Texture;
//纹理坐标
varying highp vec2 TextureCoordsVarying;

void main() {
    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);
}

二.四分屏

1.需求:

X轴2分屏,Y轴2分屏,即四块.每部分显示原图(即缩放效果).

2.代码实现:

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    //纹理坐标
    vec2 uv = TextureCoordsVarying.xy;
    //X轴每屏显示对应的纹理部分
    if(uv.x <= 0.5){
        //第一屏对应的纹理坐标(间隔取了所有的一半纹理,等于缩小了一半)
        uv.x = uv.x * 2.0;
    }else{
        //第二屏对应的纹理坐标
        uv.x = (uv.x - 0.5) * 2.0;
    }
    //Y轴每屏显示对应的纹理部分,同X轴原理一样.
    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);
}

三.六分屏

1.需求:

• X轴方向三分,y轴方向二分.
• 每部分都显示原图像X方向中间三分之一的部分,Y方向中间二分之一的部分.

precision highp float;
uniform sampler2D Texture;
varying highp vec2 TextureCoordsVarying;

void main() {
    //纹理坐标
    vec2 uv = TextureCoordsVarying.xy;
    //X轴每屏显示对应的纹理部分
    if(uv.x <= 1.0 / 3.0){
        uv.x = uv.x + 1.0/3.0;
    }else if(uv.x >= 2.0/3.0){
        uv.x = uv.x - 1.0/3.0;
    }
    //Y轴每屏显示对应的纹理部分
    if(uv.y <= 0.5){
        uv.y = uv.y + 0.25;
    }else {
        uv.y = uv.y - 0.25;
    }
    gl_FragColor = texture2D(Texture, uv);
}