0
点赞
收藏
分享

微信扫一扫

OpenGL ES 仿抖音四屏镜像乱画

南柯Taylor 2021-09-19 阅读 35
blog

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


摄像头的预览及四分屏效果参见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轴的镜像坐标。其他情况的处理类似。

实际效果

举报

相关推荐

0 条评论