Your first 2D shader


Shaders are special programs that execute on the GPU and are used for rendering graphics. All modern rendering is done with shaders. For a more detailed description of what shaders are please see What are shaders.

This tutorial will focus on the practical aspects of writing shader programs by walking you through the process of writing a shader with both vertex and fragment functions. This tutorial targets absolute beginners to shaders.


If you have experience writing shaders and are just looking for an overview of how shaders work in Godot, see the Shading Reference.


CanvasItem Shader werden zum Zeichnen aller 2D

objects in Godot, while Spatial shaders are used to draw all 3D objects.

In order to use a shader it must be attached inside a Material which must be attached to an object. Materials are a type of Resource. To draw multiple objects with the same material, the material must be attached to each object.

All objects derived from a CanvasItem have a material property. This includes all GUI elements, Sprites, TileMaps, MeshInstance2Ds etc. They also have an option to inherit their parent's material. This can be useful if you have a large number of nodes that you want to use the same material.

To begin, create a Sprite node. You can use any CanvasItem, but for this tutorial we will use a Sprite.

In the Inspector, click beside "Texture" where it says "[empty]" and select "Load", then select "Icon.png". For new projects, this is the Godot icon. You should now see the icon in the viewport.

Schauen Sie im Inspektor nach unten im Abschnitt CanvasItem, klicken Sie neben "Material" und wählen Sie "Neues ShaderMaterial". Dadurch wird eine neue Materialressource erstellt. Klicken Sie auf die erscheinende Kugel. Godot weiß derzeit nicht, ob Sie einen CanvasItem-Shader oder einen Spatial-Shader schreiben, und zeigt eine Vorschau der Ausgabe von räumlichen Shadern an. Was Sie also sehen, ist die Ausgabe des Standard Spatial-Shaders.

Click beside "Shader" and select "New Shader". Finally, click on the new shader resource and the shader editor will open. You are now ready to begin writing your first shader.

Ein erster CanvasItem-Shader

In Godot, all shaders start with a line specifying what type of shader they are. It uses the following format:

shader_type canvas_item;

Because we are writing a CanvasItem shader, we specify canvas_item in the first line. All our code will go beneath this declaration.

Diese Zeile teilt der Engine mit, welche integrierten Variablen und Funktionen Sie bereitstellen soll.

In Godot you can override three functions to control how the shader operates; vertex, fragment, and light. This tutorial will walk you through writing a shader with both vertex and fragment functions. Light functions are significantly more complex than vertex and fragment functions and so will not be covered here.

Ihre erste Fragmentfunktion

The fragment function runs for every pixel in a Sprite and determines what color that pixel should be.

They are restricted to the pixels covered by the Sprite, that means you cannot use one to, for example, create an outline around a Sprite.

Die einfachste Fragmentfunktion tut nichts anderes, als jedem Pixel eine einzelne Farbe zuzuweisen.

We do so by writing a vec4 to the built-in variable COLOR. vec4 is shorthand for constructing a vector with 4 numbers. For more information about vectors see the Vector math tutorial COLOR is both an input variable to the fragment function and the final output from it.

void fragment(){
  COLOR = vec4(0.4, 0.6, 0.9, 1.0);

Herzlichen Glückwunsch! Sie sind fertig. Sie haben erfolgreich Ihren ersten Shader in Godot geschrieben.

Lassen Sie uns die Dinge jetzt komplexer machen.

There are many inputs to the fragment function that you can use for calculating COLOR. UV is one of them. UV coordinates are specified in your Sprite (without you knowing it!) and they tell the shader where to read from textures for each part of the mesh.

In the fragment function you can only read from UV, but you can use it in other functions or to assign values to COLOR directly.

UV variiert zwischen 0-1 von links nach rechts und von oben nach unten.

void fragment() {
  COLOR = vec4(UV, 0.5, 1.0);

Verwenden der integrierten TEXTURE

When you want to adjust a color in a Sprite you cannot just adjust the color from the texture manually like in the code below.

void fragment(){
  //this shader will result in an all white rectangle
  COLOR.b = 1.0;

The default fragment function reads from a texture and displays it. When you overwrite the default fragment function, you lose that functionality, so you have to implement it yourself. You read from textures using the texture function. Certain nodes, like Sprites, have a dedicated texture variable that can be accessed in the shader using TEXTURE. Use it together with UV and texture to draw the Sprite.

void fragment(){
  COLOR = texture(TEXTURE, UV); //read from texture
  COLOR.b = 1.0; //set blue channel to 1.0

Auf Eingabe prüfen (Uniform)

Uniform input is used to pass data into a shader that will be the same across the entire shader.

Sie können Uniforms verwenden, indem Sie sie oben im Shader wie folgt definieren:

uniform float size;

Genauere Informationen über Godots Shader-Sprache gibt es im eigenen Artikel: Shading Language.

Fügen Sie ein Uniform hinzu, um den Blauanteil in unserem Sprite zu ändern.

uniform float blue = 1.0; // you can assign a default value to uniforms

void fragment(){
  COLOR = texture(TEXTURE, UV); //read from texture
  COLOR.b = blue;

Now you can change the amount of blue in the Sprite from the editor. Look back at the Inspector under where you created your shader. You should see a section called "Shader Param". Unfold that section and you will see the uniform you just declared. If you change the value in the editor, it will overwrite the default value you provided in the shader.

Interaktion mit Shadern aus Code

You can change uniforms from code using the function set_shader_param() which is called on the node's material resource. With a Sprite node, the following code can be used to set the blue uniform.

var blue_value = 1.0
material.set_shader_param("blue", blue_value)

Note that the name of the uniform is a string. The string must match exactly with how it is written in the shader, including spelling and case.

Ihre erste Vertex Funktion

Da wir nun eine Fragment-Funktion haben, schreiben wir eine Vertex-Funktion.

Verwenden Sie die Vertex-Funktion zur Berechnung, wo auf dem Bildschirm jeder Vertex landen soll.

The most important variable in the vertex function is VERTEX. Initially, it specifies the vertex coordinates in your model, but you also write to it to determine where to actually draw those vertices. VERTEX is a vec2 that is initially presented in local-space (i.e. not relative to the camera, viewport, or parent nodes).

Sie können die Eckpunkte versetzen, indem Sie diese direkt zu VERTEX hinzufügen.

void vertex() {
  VERTEX += vec2(10.0, 0.0);

In Kombination mit der integrierten Variablen TIME kann dies für einfache Animationen verwendet werden.

void vertex() {
  // Animate Sprite moving in big circle around its location
  VERTEX += vec2(cos(TIME)*100.0, sin(TIME)*100.0);


At their core, shaders do what you have seen so far, they compute VERTEX and COLOR. It is up to you to dream up more complex mathematical strategies for assigning values to those variables.

For inspiration, take a look at some of the more advanced shader tutorials, and look at other sites like Shadertoy and The Book of Shaders.