6.OpenglES——类抖音动态图像效果（闪屏、通道分离等）

参考

书写本文的初衷是为了自我学习
承接上一篇文章

效果图

目前只引入两个效果，后期加入新效果

通道分离

闪屏

开发分析

基本思路

代码与之前一样，只不过是传入time变量，模拟时间，这样根据时间的不同，对图像进行动态的变换。

代码分析

shader代码

如何搭建openGLES的环境，并将图片传入shader不在赘述，可自行下载，这里直接贴出闪屏和通道分离的shader，滤镜代码省略

precision mediump float;

uniform sampler2D vTexture;
uniform int vChangeType;
uniform vec3 vChangeColor;
uniform int vIsHalf;
uniform float uXY;
uniform float time;

varying vec4 gPosition;

varying vec2 aCoordinate;
varying vec4 aPos;

void modifyColor(vec4 color){
    color.r=max(min(color.r,1.0),0.0);
    color.g=max(min(color.g,1.0),0.0);
    color.b=max(min(color.b,1.0),0.0);
    color.a=max(min(color.a,1.0),0.0);
}
//分通道
void separateColor(vec4 nColor){
    vec4 bn = vec4(vec3(nColor.r+nColor.g+nColor.b)/3.,1.0);
    vec2 offset = vec2(abs(sin(time))/30.,0.02);
    nColor.r = texture2D(vTexture,aCoordinate).r;
    nColor.g = texture2D(vTexture,aCoordinate-offset).g;
    nColor.b = texture2D(vTexture,aCoordinate+offset).b;
    gl_FragColor=mix(nColor,bn,0.3);
}
//闪屏
void lightFrameColor(vec4 nColor){
    const float SRGB_GAMMA = 1.0 / 2.2;


    //黑屏
    float dayNightCycle = sin(time *1000.) / 2.0 + 0.5;

    vec3 nightColor = vec3(0.0078, 0.0078, 0.0078);
    vec3 dayColor = vec3(1.0, 1.0, 1.0);
    vec3 lightColor = nightColor * (dayNightCycle+0.2) + dayColor * (1.0 - dayNightCycle-0.2);

    gl_FragColor = vec4(nColor.rgb * lightColor, 1.0);

}

void main(){
    vec4 nColor=texture2D(vTexture,aCoordinate);


    if(aPos.x>0.0||vIsHalf==0){
        if(vChangeType==1){
            whiteBlackColor(nColor);
        }else if(vChangeType==2){
            coolwarmColor(nColor );
        }else if(vChangeType==3){
            bulrColor(nColor);
        }else if(vChangeType==4){
            bigCameraColor(nColor);
        }else if(vChangeType==5){
            separateColor( nColor);
        }else if(vChangeType==6){
            lightFrameColor( nColor);
        }
        else{
            gl_FragColor=nColor;
        }
    }else{
        gl_FragColor=nColor;
    }
}

项目地址，欢迎点星