Up to date

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

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 VisualShader à la propriété Shader.

Click on the new Shader resource and the Create Shader dialog will open automatically. Change the Type option to VisualShader in the dropdown.

The layout of the Visual Shader Editor comprises two parts: the upper toolbar and the graph itself.

De gauche à droite dans la barre d'outils :

• 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).

• La dernière icône affiche le code du shader généré correspondant à votre graphique.

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:

Port types

Type	Couleur	Description	Exemple
Scalar	Cyan	Scalar is a single value.
Vecteur	Purple	Vector is a set of values.
Boolean	Blue	On or off, true or false.
Transformation	Orange	A matrix, usually used to transform vertices.
Sampler	Yellow	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 :

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

Le nœud Switch renvoie un vecteur si la condition booléenne est true ou false. Boolean a été introduit ci-dessus. Si vous convertissez un vecteur en un vrai booléen, toutes les composantes du vecteur doivent être supérieures à zéro.