(费) Godot 免费跨平台游戏引擎: Shader 着色器 代码收集

请微信扫码打赏,留言中输入文章编号. 附费后将自动刷新出完整内容.

考虑文件大小,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水波效果

Git下载原版更多功能

原本它是一个插件,我单独把效果扣出来。

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雨打玻璃的效果

Git下载原版更多功能

默认是全屏效果,我们经常只会使用当前节点有效 …

请微信扫码打赏,留言中输入文章编号. 附费后将自动刷新出完整内容.

相关文章