VisualShaders

Tout comme VisualScript est une alternative pour les utilisateurs qui préfèrent une approche graphique du code, VisualShaders est l’alternative visuelle pour créer des 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 Que sont les 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.

../../_images/shader_material_create_mesh.png

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

../../_images/visual_shader_create.png

Cliquez sur la nouvelle ressource VisualShader et l’éditeur Visual Shader s’ouvrira automatiquement. La présentation de l’éditeur Visual Shader comprend deux parties : la barre d’outils supérieure et le graphique lui-même.

../../_images/visual_shader_editor2.png

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.

../../_images/vs_popup.png

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.

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.

../../_images/vs_expression.gif

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 :

../../_images/vs_expression2.png

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.

../../_images/vs_fresnel.png

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.

../../_images/vs_boolean.gif

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.

../../_images/vs_if.png

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.

../../_images/vs_switch.png

Note

Le nœud Switch n’est disponible que sur le GLES3. Si vous ciblez les appareils GLES2, vous ne pouvez pas utiliser de déclarations switch.