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

参考

文章目录

• 效果图
• 开发分析
• • 基本思路
  • 代码分析
  • • shader代码

效果图

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

通道分离

闪屏

开发分析

基本思路

代码与之前一样，只不过是传入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;}
}

项目地址，欢迎点星

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！