Godot着色器案例-斑马纹滚动

标签

• #片段着色器

原理

• 该着色器较为简单，基本思路为先绘制两半的斑马纹，然后再按倍数缩小形成纹理，然后再根据y坐标对x坐标添加偏移实现倾斜，再添加TIME变量实现滚动动画。
• 由于滚动速度可能为0，会导致除法错误，所以需要额外判断。

代码

shader_type canvas_item;

uniform vec4 color1: source_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform vec4 color2: source_color = vec4(0.0, 0.0, 0.0, 1.0);
uniform float tilt_angle = 1;
uniform int times: hint_range(4, 30, 1) = 10;
uniform float scroll_speed: hint_range(0, 10, 0.1) = 3.0;

void fragment() {
	float x = UV.x * float(times) + UV.y * tilt_angle;
	if (scroll_speed != 0.0) {
		x += TIME / scroll_speed;
	}
	float patten = mod(x, 1.0);
	if (patten < 0.4) {
		COLOR = color1;
	} else {
		COLOR = color2;
	}
}

案例效果

•