OpenGL ES 如何实现分屏滤镜效果

要想实现分屏滤镜效果，首先我们需要知道如何使用OpenGL ES GLSL加载一张图片，然后在片元控制器中处理加载纹理的坐标，最终实现分屏效果。

分屏效果图

一、首先我们需要加载一张图片，在上一篇文章中有具体描述OpenGL ES --使用GLSL语言加载一张图。

二、我们需要创建两个文件`Normal.vsh`顶点着色器文件和`Normal.fsh`片元着色器文件，根据OpenGL ES --使用GLSL语言加载一张图设置基本的顶点着色器代码和片元着色器的代码。注意：分屏效果我们只需要设置纹理坐标，所以我们仅仅在片元着色器中修改

二分屏的fsh文件代码实现
思路剖析

二分屏实现的思路

，当纹理坐标的y值：y >=0.0 && uv.y <= 0.5的时候，我们就取y+0.25的纹理坐标值；
2，当纹理坐标的y值：y > 0.5的时候，我们就取y-0.25的纹理坐标值；
这样就将原纹理坐标取得颜色值固定在了A、B、C、D这个方框中了

二分屏实现效果图

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

void main (void) {

    vec2 uv = TextureCoordsVarying.xy;
    float y;
    
    if (uv.y >=0.0 && uv.y <= 0.5) {
        y = uv.y + 0.25;
    }else{
        y=uv.y - 0.25;
    }
    
    gl_FragColor = texture2D(Texture, vec2(uv.x,y));
}

三分屏的实现

三分屏和二分屏实现的思路一致，同样的只需要更改片元着色器纹理坐标位置来获取颜色值即可，我们将原有的图片平分三等分，然后按照如下判断条件进行获取相应位置的纹理颜色。

三分屏

当y < 1.0/3.0时，我们将小于1/3部分的纹理颜色值采用y+1/3处的纹理坐标的颜色值；
当y > 2.0/3.0时，我们将大于2/3部分的纹理颜色值采用y-1/3的纹理坐标颜色值；
当y>1/3 && y<2/3，我们采用当前范围的纹理坐标下的颜色值即可。

三分屏效果图

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

void main (void) {

    vec2 uv = TextureCoordsVarying.xy;
    float y;
    if (uv.y < 1.0/3.0) {
         y = uv.y + 1.0/3.0;
     } else if (uv.y > 2.0/3.0){
         y = uv.y - 1.0/3.0;
     }else{
         y = uv.y;
     }
    gl_FragColor = texture2D(Texture, vec2(uv.x,y));
}

四分屏的实现
四分屏的时候，我们将原来的纹理坐标平分四份，每一份都从原有图片的纹理坐标重新赋值即可。

四分屏

当y >=0.0 && y <= 0.5时，y要从0.0开始取值，即需要y * 2.0；
当y > 0.5时，y要从0.0开始取值，即需要(y - 0.5)* 2.0；
当x >=0.0 && x <= 0.5时，x要从0.0开始取值，即需要x * 2.0；
当y >=0.0 && y <= 0.5时，x要从0.0开始取值，即需要`(x
0.5)* 2.0`；

四分屏效果图

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

void main (void) {

   vec2 uv = TextureCoordsVarying.xy;
   float y;
   float x;
  if (uv.y >=0.0 && uv.y <= 0.5) {
      y = uv.y * 2.0;
     }else{
         y=(uv.y - 0.5)* 2.0;
     }
   
    if (uv.x >=0.0 && uv.x <= 0.5) {
        x = uv.x * 2.0;
     }else{
         x=(uv.x - 0.5) * 2.0;
     }
      
   gl_FragColor = texture2D(Texture, vec2(x,y));
}

六分屏的实现过程和四分屏的一样这里不再赘述

截屏2020-08-12 09.58.25.png

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

void main (void) {
    
    vec2 uv = TextureCoordsVarying.xy;
    float y;
    float x;
    if (uv.y <= 1.0/3.0) {
        y = uv.y * 3.0;
    } else if (uv.y < 2.0/3.0){
        y = (uv.y - 1.0/3.0) * 3.0;
    }else{
        y = (uv.y - 2.0/3.0) * 3.0;
    }
    
    if (uv.x >=0.0 && uv.x <= 0.5) {
        x = uv.x * 2.0;
    }else{
        x=(uv.x - 1.0/2.0)*2.0;
    }
    
    
    gl_FragColor = texture2D(Texture, vec2(x,y));
}

九分屏实现过程和四分屏的一样这里不再赘述

九分屏实现效果图

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

void main (void) {
    
    vec2 uv = TextureCoordsVarying.xy;
    float y;
    float x;
    if (uv.y <= 1.0/3.0) {
        y = uv.y * 3.0;
    } else if (uv.y < 2.0/3.0){
        y = (uv.y - 1.0/3.0) * 3.0;
    }else{
        y = (uv.y - 2.0/3.0) * 3.0;
    }
    if (uv.x < 1.0/3.0) {
        x = uv.x * 3.0;
    } else if (uv.x < 2.0/3.0){
        x = (uv.x - 1.0/3.0)*3.0;
    }else{
        x = (uv.x - 2.0/3.0)*3.0;
    }
    
    gl_FragColor = texture2D(Texture, vec2(x,y));
}

最后编辑于：2020.08.12 16:13:10