Copy LinkCopied!Shaders

Shaders are programs that run on the computer's graphics card, usually to produce visual effects. They can manipulate pixels drawn to the screen, the vertices that make up 3D models, and more.

We can even use shader programs to run general-purpose calculations on graphics cards. This is used for machine learning and other high-performance computing tasks.

In games, shaders are used to create a myriad of effects, like adding an outline around a sprite, making things glow, faking reflections in a water puddle, and more.

This example is from Learn 2D Gamedev From Zero with Godot 4, M6. Looting!. It shows a shader drawing an outline around a chest.

Shaders are also at the heart of modern graphics. When using Godot, you are using shaders without even knowing it. The engine uses them to draw the 2D and 3D scenes you create.

Copy LinkCopied!Shaders use a specific programming language

We code shaders in a specific programming language similar to the C programming language. There are a handful of shader languages; the most widespread is GLSL, the OpenGL Shading Language. Godot's shaders use a variant of the GLSL language.

Here's an example of a shader that makes leaves sway in the wind.

The code looks like this. Don't worry if you can't understand it; it's just to give you an idea of what a shader looks like:

shader_type canvas_item;

uniform sampler2D wind_sampler : repeat_enable;
uniform vec2 offset = vec2(0.0);
uniform float sway_amount = 1.0;

// Rotates a 2D vector by a given angle
vec2 rotate_2d(vec2 position, float angle) {
    float cosa = cos(angle);
    float sina = sin(angle);
    return vec2(
        cosa * position.x - sina * position.y,
        cosa * position.y + sina * position.x 
    );
}

void vertex() {
    float angle = 0.5 - texture(wind_sampler, vec2(TIME * 0.04691, TIME * 0.0264) + offset).x;
    VERTEX = rotate_2d(VERTEX, angle * sway_amount);
}

If you already have some programming experience, notice how we have to write our own function in the code to rotate something in 2D space.

That is because shaders are low-level programs where performance and control are essential, so languages like GLSL don't have many built-in functions like Godot has. You have to code a lot of things yourself.

The code above can animate sprites to make them look like the wind is moving them.

We used this shader to move the leaves in this clip:

Shaders rely a lot on math and are their own sub-domain in game development. Usually, in a sizeable team, a technical artist or graphics programmer will write them while other developers use them to add visual effects to the game.