Shader之旅3：通道分离+抖动

最新推荐文章于 2023-12-28 06:57:28 发布

Action_花粥

最新推荐文章于 2023-12-28 06:57:28 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Shader之旅文章标签： shader 通道分离着色器抖动

本文链接：https://blog.youkuaiyun.com/liuyizhou95/article/details/85494152

Shader之旅专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用Shader实现的故障艺术效果，通过通道分离和画面震荡技巧，模仿了抖音上流行的特效。作者详细分享了GLSL shader代码，展示了如何在不同时间段应用抖动、分通道和正常显示等效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

书写本文的初衷是为了自我反省记录。如有表达不当，请批评指正

抖音上有类似的故障效果的拍摄特效。

其实就是利用通道分离，并将画面进行震荡，产生类似的效果。如下效果。

这是我写在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);
    } 
}