源码:
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;
}
实现原理
使用fract获取时间的小数部分,以小数部分作为周期进行缩放,每个周期相对较大的图会缩放到较小图的位置,这样迭代下去。
-
对纹理图的要求:
- 必须带透明涂层
- 突破带边界必须都为透明
- 导入素材时,关掉贴图的repeat功能
公式
(uv-.5)*ps+.5;
可以按照图片正中央进行缩放从最大图到最小图顺序铺盖,使用
cc_all.rgb = cc_all.rgb*(1.-cc.a)+cc.rgb*cc.a;
方式可以将小图部分从大图中抠出,再填入小图图像,这样将更小的图再填充最小图使用
cc.a *= 1.-smoothstep(0.0, 1.0 ,percent);
进行透明度调节fadeout
有个问题,貌似有时快时慢的感觉,已经去论坛里交流了等大神给建议。
参考
参考了b站:https://b23.tv/av56066511
贴图用了他提供的银河图,他用的是unity shader渲染管线,他的实现原理和我的有些区别,功能类似。
他的源码: https://pan.baidu.com/s/1mxXLW6OR0oQRrTVRikq9Ng
提取码: ahw6