Godot Shader特效:流光效果

效果图

流光效果

实现原理

使用一个渐变图来引导流光的走向

渐变图

代码如下

shader_type canvas_item;
uniform sampler2D light_vector;
uniform float width = 0.08;

void fragment(){
    vec4 color = texture(TEXTURE,UV);
        if(color.a != 0.0){
            float v = texture(light_vector,UV).r;
        float diff = v - cos(TIME*0.5);
        if(abs(diff) < width){
            color = vec4(0.3,0.3,0.0,0.3)*(1.0 - abs(diff)/width) + color;
        }
    }
    COLOR = color;
}

小结
渐变图的渐变走向决定了流光的运动方向。可以把代码中所需的参数定义为uniform变量，此处略。

---

后记
用内置函数简化一下代码

shader_type canvas_item;
uniform sampler2D light_vector;
uniform float width = 0.08;
uniform  vec4 flowlight = vec4(0.3,0.3,0.0,0.3);//定义一个uniform变量

void fragment(){
    vec4 color = texture(TEXTURE,UV);
        if(color.a != 0.0){
            float v = texture(light_vector,UV).r;
            float diff = v - cos(TIME*0.5);
            if(abs(diff) < width){
            color = color + mix(flowlight,vec4(0.0),abs(diff)/width);//使用flowlight
        }
    }
    COLOR = color;
}

使用mix后

效果并没有什么变化，可能更柔和一点点？