【Godot】Fragment Shader Basics and First Steps - Achieving Color Modification and Effects

Introduction: Why You Should Learn Shaders

When developing games with Godot Engine, shaders are a powerful tool you can't avoid. Shaders are small programs that run on the graphics processing unit (GPU), controlling the appearance, color, light reflection of objects, and screen-wide effects at the pixel level.

Why are shaders important? Because they can dramatically enhance visual appeal while achieving high performance. By leveraging the GPU's parallel processing capabilities instead of performing complex calculations on the CPU, you can smoothly implement expressions that would be difficult or slow with GDScript alone, such as fire, water, custom lighting, and unique screen transitions.

In this article, we'll focus on Fragment Shaders, which are particularly responsible for visual expression, and explain the basics along with the first steps to create color modifications and simple effects through specific code examples.

Basic Structure of Godot Shaders

Godot Engine's shaders use a proprietary shading language similar to [GLSL ES 3.0][1]. When creating a shader file (.gdshader), you first need to define what the shader applies to.

shader_type canvas_item; // Applied to 2D objects
// shader_type spatial; // Applied to 3D objects

canvas_item is applied to 2D sprites and UI elements, while spatial is applied to 3D meshes.

Godot shaders are mainly composed of the following three functions (entry points):

Function	Role	Execution Timing
vertex	Manipulates object vertices (positions). Used for deformation, waving, rotation, etc.	Once per vertex
fragment	Calculates pixel (fragment) colors. The core of texture sampling, color adjustment, and effects.	Once per pixel
light	Calculates the effect of light hitting objects. Used for implementing custom lighting.	Once per combination of light source and pixel

The fragment function, the protagonist of this article, is executed for every pixel on the screen and plays the role of determining the final color of that pixel.

Role and Basics of Fragment Shader

The basic structure of a Fragment Shader is very simple.

shader_type canvas_item;

void fragment() {
    // Write pixel-by-pixel color calculation logic here
}

Inside this fragment function, we mainly work with two important built-in variables:

1. UV (vec2): The texture coordinates (UV coordinates) of the pixel currently being processed. Values are typically normalized in the range from top-left (0.0, 0.0) to bottom-right (1.0, 1.0).
2. COLOR (vec4): A variable that stores the final output color of the Fragment Shader. By assigning a value to this variable, you determine the pixel's color.

COLOR is a vec4 type, consisting of four floating-point numbers (in the range of 0.0 to 1.0) in the format (R, G, B, A).

Practice 1: Changing Colors with Fragment Shader

The most basic use of Fragment Shader is to change the entire object's color to a single color.

Code Example: Changing to a Single Color

shader_type canvas_item;

void fragment() {
    // Directly assign a new color to the COLOR variable.
    // In vec4(R, G, B, A) format, each component is in the range 0.0 to 1.0.
    // Example: Vivid magenta (maximum red and blue, zero green, opacity 1.0)
    COLOR = vec4(1.0, 0.0, 1.0, 1.0); // Magenta
}

When you apply this shader to a sprite, the entire sprite will be filled with magenta color regardless of the texture.

Code Example: Inverting Texture Colors

If you want to manipulate colors while preserving the existing texture, use the texture() function to get the current texture color and perform calculations based on it.

shader_type canvas_item;

void fragment() {
    // 1. Get the texture color at the current UV coordinates.
    vec4 texture_color = texture(TEXTURE, UV);

    // 2. Invert the colors. (Subtract original color from 1.0)
    // Keep the alpha value (transparency) as is.
    vec3 inverted_rgb = vec3(1.0) - texture_color.rgb;

    // 3. Set the final output color to COLOR.
    COLOR = vec4(inverted_rgb, texture_color.a);
}

As you can see, Fragment Shaders read texture colors pixel by pixel, perform calculations, and write out new colors at high speed.

Practice 2: Effects Using UV Coordinates and Time

The true value of Fragment Shaders lies in their ability to create dynamic effects using input values like UV coordinates and the built-in TIME variable.

Code Example: Simple Gradient

Let's create a gradient from black to white from left to right using the x component (horizontal direction) of UV coordinates.

shader_type canvas_item;

void fragment() {
    // UV.x takes values from 0.0 at the left edge to 1.0 at the right edge.
    float gradient = UV.x;

    // Set this value to each of the R, G, B components.
    // Example: Grayscale gradient
    COLOR = vec4(gradient, gradient, gradient, 1.0);
}

Code Example: Circular Mask Using UV Coordinates

Let's create a circular mask effect using the distance from the center of UV coordinates. This serves as the foundation for various effects like spotlights or explosion ripples.

shader_type canvas_item;

void fragment() {
    // 1. Transform UV coordinates so that the center (0.5, 0.5) becomes the origin.
    vec2 centered_uv = UV - vec2(0.5);

    // 2. Calculate the distance from the origin. (using the length function)
    float distance = length(centered_uv);

    // 3. Determine the alpha value (transparency) based on distance.
    // Use the smoothstep function to smoothly become transparent at distances from 0.3 to 0.4.
    float alpha = 1.0 - smoothstep(0.3, 0.4, distance);

    // 4. Get the original texture color.
    vec4 texture_color = texture(TEXTURE, UV);

    // 5. Apply the calculated alpha value to the final output color.
    COLOR = vec4(texture_color.rgb, texture_color.a * alpha);
}

With this code, a circular mask is applied that gradually makes the object transparent beyond a certain distance from the sprite's center (0.4 in this example). By manipulating UV coordinates, you can see that complex shape control at the pixel level is possible.

Code Example: Color Animation Changing with Time

Using the built-in TIME uniform (elapsed time since shader execution, in seconds), you can easily implement animations.

shader_type canvas_item;

void fragment() {
    // Use sin function to periodically change TIME in the range of 0.0 to 1.0.
    // Since sin(x) ranges from -1.0 to 1.0, convert to 0.0 to 1.0 with (sin(x) * 0.5 + 0.5).
    float r = sin(TIME * 2.0) * 0.5 + 0.5; // Red component changes with time
    float g = cos(TIME * 1.5) * 0.5 + 0.5; // Green component changes with time
    float b = 0.5; // Blue component is fixed

    // Set the final output color.
    COLOR = vec4(r, g, b, 1.0);
}

When you apply this code, the sprite's color will continuously change smoothly over time, creating a psychedelic effect. By using TIME, animations are completed on the GPU without using the node's _process() function, making it very efficient.

Practice 3: Texture Scrolling Animation

One of the most practical applications of Fragment Shader is texture scrolling, which is essential for expressing water surfaces, fire, conveyor belts, etc.

Code Example: Horizontal Texture Scrolling

By adding TIME to UV coordinates, you can move textures over time.

shader_type canvas_item;

void fragment() {
    // 1. Slowly add TIME to the x component of UV coordinates.
    // 0.1 is a coefficient for adjusting scroll speed.
    vec2 scrolled_uv = UV + vec2(TIME * 0.1, 0.0);

    // 2. Sample the texture with the new UV coordinates.
    vec4 texture_color = texture(TEXTURE, scrolled_uv);

    // 3. Set the final output color.
    COLOR = texture_color;
}

This technique is very effective for flowing starry skies in the background or expressing flowing water. Manipulating UV coordinates is one of the most important concepts in Fragment Shader applications.

Summary: Next Steps for Fragment Shader

In this article, we learned the basic role and structure of Fragment Shaders in Godot Engine, and how to achieve color modifications and simple animations.

Fragment Shaders are powerful tools that calculate pixel-by-pixel colors, and by utilizing built-in variables like UV coordinates and TIME, you can create infinite visual effects.

Key Points from This Article:

• Shaders are executed on the GPU and control visual expression with high performance.
• The fragment function determines pixel-by-pixel colors and outputs to the COLOR variable.
• UV coordinates indicate position on the texture and are essential for gradients and coordinate-based effects.
• Using the TIME uniform enables efficient time-based animations.

After mastering these basics, the next step is to learn Uniforms, which allow you to pass values from outside, controlling shader parameters from GDScript, and then challenge yourself with object deformation using vertex shaders. Knowledge of Fragment Shaders should be the key to elevating your game's visuals to the next level.

Next Steps: Controlling Shaders with Uniforms

To use Fragment Shaders more practically, understanding Uniforms is essential. Uniforms are like a "window" for sending values from CPU-side code like GDScript to variables inside the shader.

For example, you use Uniforms when you want to dynamically change effect strength, colors, or animation speed during game execution.

Uniform Declaration Example

Declare Uniforms at the beginning of the shader file as follows:

shader_type canvas_item;

// Make effect strength settable from GDScript
uniform float effect_strength : hint_range(0.0, 1.0) = 0.5;

// Make effect color settable from GDScript
uniform vec4 effect_color : hint_color = vec4(1.0, 0.0, 0.0, 1.0);

Variables declared this way can be accessed and modified from GDScript through methods like material.set_shader_parameter("effect_strength", value). This evolves shaders from being merely static appearance settings into dynamic expression tools that work with game logic.

Knowledge of Fragment Shaders should be the key to elevating your game's visuals to the next level.