参考
书写本文的初衷是为了自我学习
承接上一篇文章
效果图
目前只引入两个效果,后期加入新效果
通道分离
闪屏
开发分析
基本思路
代码与之前一样,只不过是传入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;
}
}