Attention: Here be dragons

This is the latest (unstable) version of this documentation, which may document features not available in or compatible with released stable versions of Godot.

Checking the stable version of the documentation...

Utilisation de VisualShaders

VisualShaders are the visual alternative for creating shaders.

Les shaders étant intrinsèquement liés aux visuels, l'approche graphique avec aperçu des textures, des matériaux, etc. offre beaucoup plus de commodité que les shaders purement basés sur des scripts. D'autre part, les VisualShaders n'exposent pas toutes les caractéristiques du script de shader et l'utilisation des deux en parallèle peut être nécessaire pour des effets spécifiques.

Note

Si vous n'êtes pas familier avec les shaders, commencez par lire Introduction aux shaders.

Création d'un VisualShader

Les VisualShaders peuvent être créés dans n'importe quel ShaderMaterial. Pour commencer à utiliser les VisualShaders, créez un nouveau ShaderMaterial dans un objet de votre choix.

Ensuite, attribuez une ressource Shader à la propriété Shader.

Cliquez sur la nouvelle ressource Shader et la fenêtre Créer Shader s'ouvrira automatiquement. Changer l'option Type à VisualShader dans le menu déroulant, puis donnez lui un nom.

Click on the visual shader you just created to open the Shader Editor. The layout of the Shader Editor comprises four parts, a file list on the left, the upper toolbar, the graph itself, and a material preview on the right that can be toggled off

De gauche à droite dans la barre d'outils :

• The arrow can be used to toggle the files panel's visibility.

• The File button opens a dropdown menu for saving, loading, and creating files.

• Le bouton Add Node affiche un menu contextuel pour vous permettre d'ajouter des nœuds au graphe de shaders.

• Le menu déroulant est le type de shader : Vertex, Fragment et Lumière. Comme pour les shaders script, il définit les nœuds intégrés qui seront disponibles.

• Les boutons suivants et la saisie de chiffres contrôlent le niveau de zoom, l'accrochage à la grille et la distance entre les lignes de la grille (en pixels).

• The toggle controls if the graph minimap in the bottom right of the editor is visible or not.

• The automatically arrange selected nodes button will try to organize any nodes you have selected as efficiently and cleanly as possible.

• The Manage Varyings button opens a dropdown that lets you add or remove a varying.

• The show generated code button shows shader code corresponding to your graph.

• The toggle turns the material preview on or off.

• The Online Docs button opens this documentation page in your web browser.

• The last button allows you to put the shader editor in its own window, separate from the rest of the editor.

Note

Bien que les VisualShaders ne nécessitent pas de code, ils partagent la même logique que les shaders script. Il est conseillé d'apprendre les bases des deux pour avoir une bonne compréhension du pipeline de shading.

Le graphique du visual shader est converti en un script shader en arrière-plan, et vous pouvez voir ce code en appuyant sur le dernier bouton de la barre d'outils. Cela peut être pratique pour comprendre ce que fait un nœud donné et comment le reproduire dans des scripts.

Utilisation de l'éditeur Visual Shader

Par défaut, chaque nouveau VisualShader aura un nœud de sortie. Chaque connexion de nœud se termine par une des prises du nœud de sortie. Un nœud est l'unité de base pour créer votre shader. Pour ajouter un nouveau nœud, cliquez sur le bouton Add Node dans le coin supérieur gauche ou cliquez avec le bouton droit sur un emplacement vide du graphique, et un menu apparaîtra.

Ce popup a les propriétés suivantes :

• Si vous cliquez sur le graphique avec le bouton droit de la souris, ce menu sera appelé à la position du curseur et le nœud créé, dans ce cas, sera également placé sous cette position ; sinon, il sera créé au centre du graphique.

• Il peut être redimensionné horizontalement et verticalement, ce qui permet de montrer plus de contenu. La transformation de la taille et la position du contenu de l'arbre sont enregistrées entre les appels, de sorte que si vous fermez soudainement la fenêtre contextuelle, vous pouvez facilement restaurer son état précédent.

• Les options Expand All et Collapse All du menu déroulant peuvent être utilisées pour lister facilement les nœuds disponibles.

• Vous pouvez également glisser et déposer des nœuds de la popup sur le graphique.

Bien que le popup comporte des nœuds triés par catégories, il peut sembler écrasant au premier abord. Essayez d'ajouter certains des nœuds, branchez-les dans la prise de sortie et observez ce qui se passe.

En connectant une sortie scalar à une entrée vector, toutes les composantes du vecteur prendront la valeur du scalaire.

Lorsque l'on connecte une sortie vector à une entrée scalar, la valeur du scalaire sera la moyenne des composantes du vecteur.

Visual Shader node interface

Visual shader nodes have input and output ports. The input ports are located on the left side of the node, and output ports are located on the right side of the node.

These ports are colored to differentiate type of port:

Types de port

Type	Couleur	Description	Exemple
Scalaire	Grise	Scalaire est une valeur unique.
Vecteur	Violet	Vector is a set of values.
Booléen	Vert	On or off, true or false.
Transformation	Rose	A matrix, usually used to transform vertices.
Sampler	Orange	A texture sampler. It can be used to sample textures.

All of the types are used in the calculations of vertices, fragments, and lights in the shader. For example: matrix multiplication, vector addition, or scalar division.

There are other types but these are the main ones.

Nœuds Visual Shader

Vous trouverez ci-dessous quelques nœuds spéciaux qui méritent d'être connus. La liste n'est pas exhaustive et pourrait être complétée par d'autres nœuds et exemples.

Nœud d'expression

Le nœud Expression vous permet d'écrire des expressions en langage Godot Shading (GLSL-like) à l'intérieur de vos shaders visuels. Le nœud dispose de boutons permettant d'ajouter n'importe quel nombre de ports d'entrée et de sortie requis et peut être redimensionné. Vous pouvez également définir le nom et le type de chaque port. L'expression que vous avez saisie s'appliquera immédiatement au matériau (une fois que le focus aura quitté la zone de texte de l'expression). Toute erreur d'analyse ou de compilation sera imprimée dans l'onglet Output. Les sorties sont initialisées par défaut à leur valeur zéro. Le nœud est situé sous l'onglet Spécial et peut être utilisé dans tous les modes de shaders.

Les possibilités de ce nœud sont presque illimitées - vous pouvez écrire des procédures complexes, et utiliser toute la puissance des shaders basés sur le texte, tels que les boucles, le mot-clé discard, les types étendus, etc. Par exemple :

Reroute node

The Reroute node is used purely for organizational purposes. In a complicated shader with many nodes you may find that the paths between nodes can make things hard to read. Reroute, as its name suggests, allows you to adjust the path between nodes to make things easier to read. You can even have multiple reroute nodes for a single path, which can be used to make right angles.

To move a reroute node move your mouse cursor above it, and grab the handle that appears.

Nœud Fresnel

Le nœud Fresnel est conçu pour accepter des vecteurs normaux et de vision et produit un scalaire qui est le produit de points saturés entre eux. De plus, vous pouvez régler l'inversion et la puissance de l'équation. Le nœud Fresnel est idéal pour ajouter un effet de lumière sur les objets.

Nœud booléen

Le nœud Boolean peut être converti en Scalar ou Vector pour représenter respectivement 0 ou 1 et (0, 0, 0) ou (1, 1, 1). Cette propriété peut être utilisée pour activer ou désactiver certaines parties de l'effet en un seul clic.

Nœud if

Le nœud If vous permet de configurer un vecteur qui sera renvoyé comme résultat de la comparaison entre a et b. Trois vecteurs peuvent être renvoyés : a == b (dans ce cas, le paramètre de tolérance est fourni comme seuil de comparaison - par défaut, il est égal à la valeur minimale, c'est-à-dire 0.00001), a > b et a < b.

Nœud switch

The Switch node returns a vector if the boolean condition is true or false. Boolean was introduced above. If you want to convert a vector to a true boolean, all components of the vector should be non-zero.

Mesh Emitter

The Mesh Emitter node is used for emitting particles from mesh vertices. This is only available for shaders that are in Particles mode.

Keep in mind that not all 3D objects are mesh files. a glTF file can't be dragged and dropped into the graph. However, you can create an inherited scene from it, save the mesh in that scene as its own file, and use that.

You can also drag and drop obj files into the graph editor to add the node for that specific mesh, other mesh files will not work for this.