考虑文件大小,GIF作了一定的压缩,效果有一些损失。
1. 2D雾效果
B站有讲解的一个效果,一步一步告诉你如何实现。
话说高级程序员靠数学。要想做出好的程序,数学是必不可少的工具。
shader_type canvas_item;
uniform vec3 color = vec3(0.9,0.9,0.9); //vec3(0.33,0.48,0.80);
uniform int OCTAVES = 4;
float rand(vec2 coord){
return fract(sin(dot(coord,vec2(56,78))*1000.0)*1000.0);
}
float noise(vec2 coord){
vec2 i = floor(coord); //取整数部份
vec2 f = fract(coord); //取小数部份
float a = rand(i);
float b = rand(i + vec2(1.0,0.0));
float c = rand(i + vec2(0.0,1.0));
float d = rand(i + vec2(1.0,1.0));
vec2 cubic = f * f * (3.0 - 2.0 * f);
return mix(a,b,cubic.x) + (c-a) * cubic.y * (1.0 - cubic.x) + (d - b) * cubic.x * cubic.y;
}
float fbm(vec2 coord){
float value = 0.0;
float scale = 0.5;
for(int i = 0; i < OCTAVES; i++) {
value += noise(coord) * scale;
coord *= 2.0;
scale *= 0.5;
}
return value;
}
void fragment(){
vec2 coord = UV * 1.7;
vec2 motion = vec2(fbm(coord + vec2(TIME * 0.2, TIME * -0.2)));
float final = fbm(coord + motion);
COLOR = vec4(color,final);
}
2. 2D水波效果
原本它是一个插件,我单独把效果扣出来。
shader_type canvas_item;
uniform float blur : hint_range(0,10);
uniform float fade_depth = 20;//0~FLOAT_MAX
uniform float distort_factor : hint_range(0,1);
uniform float distort_speed : hint_range(0,1);
uniform sampler2D distort_texture : hint_normal;
uniform vec4 water_color : hint_color ;//= vec4(20, 30, 30, 230);
uniform bool distort_enable = true;
varying vec2 zoom;
varying float depth;
void vertex() {
zoom = vec2(WORLD_MATRIX[0].x, WORLD_MATRIX[1].y);
depth = VERTEX.y;
}
void fragment(){
vec2 uv = UV;
if(distort_enable) {
vec2 distort = texture(distort_texture, UV + TIME * distort_speed).rg * 2.0 - 1.0;
uv += distort * distort_factor * zoom;
}
COLOR = textureLod(TEXTURE, uv, blur);
if(fade_depth > 0.0) {
COLOR.rgb = mix(COLOR.rgb, water_color.rgb, min(depth / fade_depth, 1.0) * water_color.a);
}
}
3. 2D雨打玻璃的效果
默认是全屏效果,我们经常只会使用当前节点有效 …
请微信扫码打赏,留言中输入文章编号. 附费后将自动刷新出完整内容.