OpenGL ES 仿抖音四屏镜像乱画

最近抖音上有个四分镜像的特效挺有意思，通过四分镜像一通乱画，能画出相当于窗花的效果。实现原理看着也比较简单，就随手实践下。

摄像头的预览及四分屏效果参见OpenGL ES入门4-预览摄像头并叠加三角形
。其实原理很简单，只要对片元着色器进行处理就可以。

片元着色器代码如下：

#extension GL_OES_EGL_image_external : require
precision mediump float;
uniform samplerExternalOES videoTex;
varying vec2 textureCoordinate;

void main() {
    vec2 uv = textureCoordinate;
    if(uv.x <= 0.5 && uv.y <= 0.5){
        uv.x = uv.x * 2.0;
        uv.y = uv.y * 2.0;
    }else if(uv.x >=0.5 && uv.y <=0.5){
        uv.x = 1.0 -(uv.x - 0.5) * 2.0;
        uv.y = uv.y * 2.0;
    }else if(uv.x <= 0.5 && uv.y >=0.5){
        uv.x = uv.x * 2.0;
        uv.y = 1.0 -(uv.y - 0.5) * 2.0;
    }else if(uv.x >= 0.5 && uv.y >= 0.5){
        uv.x = 1.0 -(uv.x - 0.5) * 2.0;
        uv.y = 1.0 -(uv.y - 0.5) * 2.0;
    }

    vec4 tc = texture2D(videoTex, fract(uv));
    float color = tc.r * 0.3 + tc.g * 0.59 + tc.b * 0.11;
    gl_FragColor = vec4(tc.r,tc.g,tc.b,1.0);
}

因为要进行四分屏，所以原来顶点坐标对应的纹理坐标x，y要进行转换。如uv.x >= 0.5(即x坐标取值0.5～1),除了要将坐标取值范围放大到0～1,还要进行镜像处理，通过如下：

1.0 -（放大后的坐标值）

来取x轴的镜像坐标。其他情况的处理类似。

实际效果