Up to date

This page is up to date for Godot 4.2. If you still find outdated information, please open an issue.

Votre premier shader 2D

Introduction

Les shaders sont des programmes spéciaux qui s'exécutent sur le GPU et sont utilisés pour le rendu graphique. Tous les rendus modernes sont effectués avec des shaders. Pour une description plus détaillée de ce que sont les shaders, veuillez consulter Que sont les shaders.

Ce tutoriel se concentre sur les aspects pratiques de l'écriture de programmes de shaders en vous guidant à travers le processus d'écriture d'un shader et ses fonctions de vertex et de fragment. Ce tutoriel s'adresse aux débutants absolus en matière de shaders.

Note

Si vous avez de l'expérience dans l'écriture de shaders et que vous cherchez simplement un aperçu du fonctionnement des shaders dans Godot, consultez Shading Reference.

Configuration

CanvasItem shaders are used to draw all 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, Sprite2Ds, 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 Sprite2D node. You can use any CanvasItem, so long as it is drawing to the canvas, so for this tutorial we will use a Sprite2D, as it is the easiest CanvasItem to start drawing with.

Dans l'inspecteur, cliquez à côté de "Texture" où il est indiqué "[empty]" et sélectionnez "Load", puis "Icon.png". Pour les nouveaux projets, c'est l'icône Godot. Vous devriez maintenant voir l'icône dans le viewport.

Ensuite, regardez dans l'inspecteur, sous la section CanvasItem, cliquez à côté de "Material" et sélectionnez "New ShaderMaterial". Cela crée une nouvelle ressource matérielle. Cliquez sur la sphère qui apparaît. Actuellement, Godot ne sait pas si vous écrivez un CanvasItem Shader ou un Spatial Shader et il prédit la sortie de shaders spatiaux. Ce que vous voyez est donc la sortie du Spatial Shader par défaut.

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

Votre premier shader de CanvasItem

Dans Godot, tous les shaders commencent par une ligne précisant de quel type de shader il s'agit. Il utilise le format suivant :

shader_type canvas_item;

Comme nous écrivons un shader CanvasItem, nous spécifions canvas_item à la première ligne. Tout notre code sera sous cette déclaration.

Cette ligne indique au moteur quelles variables et fonctionnalités intégrées doivent vous être fournies.

Dans Godot, vous pouvez passer outre trois fonctions pour contrôler le fonctionnement du shader : vertex, fragment, et light. Ce tutoriel vous guidera dans l'écriture d'un shader avec les fonctions vertex et fragment. Les fonctions lumières sont beaucoup plus complexes que les fonctions vertex et fragments et ne seront donc pas traitées ici.

Votre première fonction fragment

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

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

La fonction fragment la plus élémentaire ne fait rien d'autre qu'attribuer une seule couleur à chaque pixel.

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);
}
../../../_images/blue-box.png

Félicitations ! Vous avez fini. Vous avez réussi à écrire votre premier shader dans Godot.

Maintenant, rendons les choses plus complexes.

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 Sprite2D (without you knowing it!) and they tell the shader where to read from textures for each part of the mesh.

Dans la fonction de fragment, vous ne pouvez lire qu'à partir de UV, mais vous pouvez l'utiliser dans d'autres fonctions ou pour attribuer des valeurs à COLOR directement.

Le UV varie entre 0-1 de gauche à droite et de haut en bas.

../../../_images/iconuv.png
void fragment() {
  COLOR = vec4(UV, 0.5, 1.0);
}
../../../_images/UV.png

Utilisation de TEXTURE intégrée

When you want to adjust a color in a Sprite2D 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 Sprite2Ds, have a dedicated texture variable that can be accessed in the shader using TEXTURE. Use it together with UV and texture to draw the Sprite2D.

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

Entrée uniforme

Une entrée uniforme est utilisée pour faire passer les données dans un shader qui sera le même dans tout le shader.

Vous pouvez utiliser des variables uniformes en les définissant en haut de votre shader de cette manière :

uniform float size;

Pour plus d'informations sur l'utilisation, voir le document Shading Language doc.

Add a uniform to change the amount of blue in our Sprite2D.

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 Sprite2D 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.

Interagir avec les shaders à partir du code

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

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

Notez que le nom de la variable uniforme est une chaîne de caractères. La chaîne doit correspondre exactement à la façon dont elle est écrite dans le shader, y compris l'orthographe et la casse.

Votre première fonction vertex

Maintenant que nous avons une fonction fragment, écrivons une fonction vertex.

Utilisez la fonction vertex pour calculer où chaque vertex devrait se trouver à l'écran.

La variable la plus importante dans la fonction de sommet est VERTEX. Au départ, il spécifie les coordonnées des sommets dans votre modèle, mais vous y écrivez également pour déterminer où dessiner réellement ces sommets. VERTEX est un vec2 qui est initialement présenté dans l'espace local (c'est-à-dire non relatif à la caméra, viewport ou aux nœuds parents).

Vous pouvez décaler les sommets en ajoutant directement à VERTEX.

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

Combined with the TIME built-in variable, this can be used for basic animation.

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

Conclusion

Au fond, les shaders font ce que vous avez vu jusqu'à présent, ils calculent VERTEX et COLOR. C'est à vous d'imaginer des stratégies mathématiques plus complexes pour attribuer des valeurs à ces variables.

Pour vous inspirer, jetez un coup d'œil à certains des tutoriels de shaders les plus avancés, et consultez d'autres sites comme Shadertoy et The Book of Shaders.