1. 程式人生 > >Shader之旅3:通道分離+抖動

Shader之旅3:通道分離+抖動

書寫本文的初衷是為了自我反省記錄。如有表達不當,請批評指正

 

抖音上有類似的故障效果的拍攝特效。

其實就是利用通道分離,並將畫面進行震盪,產生類似的效果。如下效果。

這是我寫在shader上的效果

uniform float time;
float rand(float co) {
    return fract(sin(dot(co,12.9898+78.233)) * 43758.5453);
}
void mainImage( out vec4 fragcolor, in vec2 fragCoord ) {
	vec2 uv = fragCoord.xy / iResolution.xy;
	vec2 uv1 = uv;
    
    uv1.x-=rand(uv.y*iTime)/30.;
    vec4 e = texture(iChannel0,uv1);
    vec4 bn = vec4(vec3(e.r+e.g+e.b)/3.,1.0);
	
	vec2 offset = vec2(sin(iTime)/30.,0.01*rand(iTime));
    // 抖動
    if(iTime<=1.){
        fragcolor=e; 
    }
    //抖動+分通道 
    if(iTime>1.&&iTime<=2.){
        e.r = texture(iChannel0, uv).r;
	    e.g = texture(iChannel0, uv-offset.xy).g;
	    e.b = texture(iChannel0, uv+offset.xy).b;
        fragcolor=mix(e,bn,0.3);     
    }
    // 分通道
    if(iTime>2.&&iTime<=4.5){
        
        e.r = texture(iChannel0, uv).r;
	    e.g = texture(iChannel0, uv-offset.xy).g;
	    e.b = texture(iChannel0, uv+offset.xy).b;
        fragcolor=e;
    }
    // 正常
    if(iTime>4.5){
        fragcolor=texture(iChannel0, uv);
    } 
}