Shaders on Godot 4 レシピ

Shaders: intro

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want to get started coding shaders.

Solution

A shader is a special program that runs on the computer’s GPU (graphics card). The GPU is optimized to perform certain types of math very efficiently. Shader code can be attached to objects to affect how they’re rendered on the screen.

The output of a shader program is the color of the set of pixels of the object. Shaders can be used in 2d (canvas_item shaders) and 3D (spatial shaders).

Interacting with Shaders

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want to interact with a Godot shader from GDScript.

Solution

To access the uniform’s value from GDScript, you can use set_shader_param() on the object’s material property. If the attached material is a ShaderMaterial, then you can access it like so:

node.material.set_shader_param("param_name", value)

You can also get the value with get_shader_param().

For an example of this, see the Blur Shader recipe.

Greyscale (monochrome) shader

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want a shader to convert an image to greyscale.

Solution

Let’s start with a canvas_item (2D) shader. To convert to greyscale but also preserve pixel contrast, we need to average the pixel’s color value. Add the color channels together and divide by 3:

shader_type canvas_item;

void fragment() {
 COLOR = texture(TEXTURE, UV);
 float avg = (COLOR.r + COLOR.g + COLOR.b) / 3.0;
 COLOR.rgb = vec3(avg);
}

Blur shader

Mon, 01 Jan 0001 00:00:00 +0000

Tip

This article is being updated from Godot 3 to Godot 4.

Problem

You want a shader to blur an object or the screen.

Solution

shader_type canvas_item;

uniform float blur_amount : hint_range(0, 5);

void fragment() {
 COLOR = textureLod(SCREEN_TEXTURE, SCREEN_UV, blur_amount);
}

For example, to gradually blur the entire screen, such as for a scene transition effect:

You can also animate the blurring: