Shader de canvas

Um shader de canvas em tela cheia animado pelo TIME. Mude um uniform, salve, e o projeto recarrega.

O editor acima está rodando este projeto. Mude uma linha e ele recarrega.

Classes do Godot usadas

ColorRectShaderMaterialCanvasLayer

O código

scripts/main.gd

extends Node


func _ready() -> void:
	var material: ShaderMaterial = ShaderMaterial.new()
	material.shader = Get.shader('waves')

	var rect: ColorRect = ColorRect.new()
	rect.material = material

	var layer: CanvasLayer = CanvasLayer.new()
	layer.add_child(rect)
	add_child(layer)

	rect.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	print('open waves.gdshader and change the uniforms, the project reloads on save')

shaders/waves.gdshader

shader_type canvas_item;

uniform vec3 deep_color: source_color = vec3(0.02, 0.03, 0.07);
uniform vec3 crest_color: source_color = vec3(0.0, 0.6, 1.0);
uniform float rows = 14.0;
uniform float speed = 0.7;
uniform float thickness = 0.08;

void fragment() {
	float total = 0.0;

	for (int i = 0; i < 3; i++) {
		float layer = float(i) * 0.35;
		float wave = sin(UV.x * 6.2831 * (1.0 + layer) + TIME * speed * (1.0 + layer)) * 0.12;
		float line = fract((UV.y + wave) * rows);

		total += smoothstep(thickness, 0.0, min(line, 1.0 - line));
	}

	COLOR = vec4(mix(deep_color, crest_color, clamp(total, 0.0, 1.0)), 1.0);
}

Mais exemplos de Shaders