Godot - Shader - 制作星空缩放效果

源码：

https://github.com/zszen/godot_lesson/tree/master/shaders/effect

//v2
shader_type canvas_item;

uniform float speed:hint_range(.01,10.0) = 1.0;
uniform float scale:hint_range(.01,1.0) = 1.0;
uniform float distance:hint_range(.5,10.0) = 3.;

void fragment(){
    vec4 cc_all = vec4(vec3(.0),1.0);
    float scale_base = 1./scale/distance;
    float percent = fract(TIME*speed);
    for(int i=3;i>=1;i--){
        float scale_small = scale_base/pow(1.05,float(i*10));
        float scale_big = scale_base/pow(1.05,float((i+1)*10));
        vec2 uv = ((UV-.5)*(percent*(scale_small-scale_big)+scale_big)+.5);
        vec4 cc = texture(TEXTURE, uv);
        if(i==1){
            cc.a *= 1.-smoothstep(0.0, 1.0 ,percent);
        }
        cc_all.rgb = mix(cc_all.rgb,cc.rgb,cc.a);
    }
    COLOR = cc_all;
}

实现原理

1. 使用fract获取时间的小数部分，以小数部分作为周期进行缩放，每个周期相对较大的图会缩放到较小图的位置，这样迭代下去。

2. 对纹理图的要求：

   • 必须带透明涂层
   • 突破带边界必须都为透明
   • 导入素材时，关掉贴图的repeat功能

3. 公式 (uv-.5)*ps+.5; 可以按照图片正中央进行缩放

4. 从最大图到最小图顺序铺盖，使用cc_all.rgb = cc_all.rgb*(1.-cc.a)+cc.rgb*cc.a;方式可以将小图部分从大图中抠出，再填入小图图像，这样将更小的图再填充

5. 最小图使用cc.a *= 1.-smoothstep(0.0, 1.0 ,percent);进行透明度调节fadeout

有个问题，貌似有时快时慢的感觉，已经去论坛里交流了等大神给建议。

参考

参考了b站:https://b23.tv/av56066511
贴图用了他提供的银河图，他用的是unity shader渲染管线，他的实现原理和我的有些区别，功能类似。
他的源码: https://pan.baidu.com/s/1mxXLW6OR0oQRrTVRikq9Ng
提取码: ahw6