OpenGL ES案例之GLSL分屏滤镜

  今天我们用一个自定义着色器，来实现图片分屏效果。具体效果如下：

  下方可点击的collectionView，我们这里所用的方法就是根据点击的不同，调用不同的顶点和片元着色器，然后达到不同的绘制效果。其余绘制部分，初始化部分，和之前我们的文章中讲述的没有任何差别。所以我们只要领会不同的着色器代码就可以了。且顶点着色器的代码都一样，我们只是修改片元着色器的映射关系，来达到分屏的目的。

2分屏

映射关系图

• 当 y 在[0, 0.5]范围时，屏幕的（0，0）坐标需要对应图片的（0，0.25），所以y = y+0.25
  当 y 在[0.5, 1]范围时，屏幕的（0，0.5）坐标需要对应图片的（0，0.25），所以y = y-0.25

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

3分屏

未

  原理和2分屏一样。取值范围有所修改而已。

• 当 y 在[0, 1/3]范围时，屏幕的（0，0）坐标需要对应图片的（0，1/3），所以y = y+1/3
• 当 y 在[1/3, 2/3]范围时，屏幕的（0，1/3）坐标需要对应图片的（0，1/3），所以y 不变
• 当 y 在[2/3, 1]范围时，屏幕的（0，2/3）坐标需要对应图片的（0，1/3），所以y = y-1/3

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);
}

4分屏，9分屏

  四分屏和9分屏就是把原来的图片缩小映射后显示到屏幕上。

• 当 x 在[0, 0.5]范围时，x = x*2
• 当 x在[0.5, 1]范围时，x = (x-0.5)*2
• 当 y 在[0, 0.5]范围时，y = y*2
• 当 y 在[0.5, 1]范围时，y = (y-0.5)*2

void main(){
    vec2 uv = TextureCoordsVarying.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);
}

6分屏

  六分屏是二分屏的演变，原理一样。

• 当 x 在[0, 1/3]范围时，x = x+1/3
• 当 x 在[1/3, 2/3]范围时，x 不变
• 当 x 在[2/3, 1]范围时，x = x-1/3
• 当 y 在[0, 0.5]范围时，y = y+0.25
• 当 y 在[0.5, 1]范围时，y = y-0.24

void main(){
    
    vec2 uv = TextureCoordsVarying.xy;
    
    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;
    }
    
     if (uv.y <= 0.5) {
         uv.y = uv.y + 0.25;
     }else{
         uv.y = uv.y - 0.25;
       }
    
    gl_FragColor = texture2D(Texture, uv);
}

完整Demo