Chapitre 7 : Shader Graph #

IMPORTANT
Le Shader Graph est compatible avec le Universal Render Pipeline et le High-Definition Render Pipeline. Il n’est compatible avec le Built-in Render Pipeline que depuis la version 2021.2.

Dans une application 3D, il est primordial de modifier le rendu visuel final de certains objets. Ceci se fait en écrivant des Shaders. Pour cela, Unity propose un langage spécifique qui s’appelle ShaderLab. ShaderLab permet en particulier de facilement et rapidement déclarer des aspects importants de nos Shaders comme les passes de rendu, certaines configurations ou la gestion de la transparence. Le corps des shaders est lui écrit en HLSL (pour High-Level Shader Language)¹.

De plus, Unity propose un outil qui s’appelle le Shader Graph². Le Shader Graph permet de créer des Shaders de manière visuelle. Les opérations sont représentées par des Nodes, les données en entrée par des Input Ports, et les données en sortie par des Output Ports. Pour définir comment les données transitent d’un Node vers les autres, les Ports sont connectées entre eux. Enfin, un Shader dans le Shader Graph peut être paramétré par des Properties. Ces Properties sont visibles et éditables directement dans la fenêtre Inspector de l’éditeur.

Un Shader créé avec le Shader Graph est un Asset. Il faut donc le créer directement dans la fenêtre Project ou dans le menu Asset. Ensuite, il faut aller dans le menu Create > Shader puis choisir le type de Shader que nous souhaitons créer.

Une fois créé, nous pouvons ouvrir notre Shader directement dans le Shader Graph en double-cliquant dessus. La fenêtre suivante apparaît :

Nous pouvons noter les éléments suivants :

1. la fenêtre Blackboard qui contient la liste des Properties du Shader, c’est-à-dire l’ensemble des paramètres du Shader qui seront modifiables directement depuis l’éditeur. Pour le moment, elle est vide;
2. la fenêtre Graph Inspector : elle fonctionne de la même manière que la fenêtre Inspector que nous avons déjà utilisée dans l’éditeur. En particulier, elle affiche les informations importantes concernant les éléments actuellement sélectionnés dans le graph;
3. le Shader représenté par un graphe. Pour le moment, il ne contient que la Master Stack. La Master Stack contient en fait le Vertex Shader et le Fragment Shader. Ils représentent les sorties effectives de notre Shader.
4. le Main Preview qui permet de voir directement un aperçu des résultats produits par notre Shader.

ATTENTION

L’emplacement ainsi que la visibilité des fenêtres peuvent varier.

Pour le moment, notre Shader ne fait pas grand chose. Nous allons donc rajouter des Nodes, puis établir les connexions nécessaires entre leurs Ports respectifs. Pour créer un nouveau Node, il suffit de faire un clic droit puis de sélectionner unity Create Node :

La fenêtre qui apparaît vous affiche la liste de tous les Nodes actuellement disponibles pour le Shader Graph.

Il en existe déjà beaucoup et chaque nouvelle version de Unity en intègre de nouveaux. Pour connecter des Ports entre eux, il suffit de sélectionner l’Output Port du Node de départ, et le glisser-déposer sur l’Input Port du Node d’arrivée.

Par exemple, on peut :

1. créer un Node de type Voronoi;
2. créer un Node de type Color;
3. multiplier leurs sorties avec un Node de type Multiply et connecter son Output Port à l’Input Port Base Color du Fragment Shader;
4. Enfin, on peut faire varier l’Input Port Angle Offset du Node Voronoi grâce à un Node de type Time.

Une fois ces étapes effectuées, on obtient le Shader Graph suivant :

Pour tester le résultat dans notre scène, il nous faut enfin :

1. enregistrer l’Asset en cliquant sur le bouton Save Asset dans la barre d’outils;
2. créer un nouveau Material et lui assigner le Shader créé;
3. créer un object et lui affecter le Material.

Au final, nous obtenons un résultat similaire à ce qui suit :

IMPORTANT Il ne faut pas oublier de sauvegarder son Shader en cliquant sur le bouton Save asset pour voir le résultat dans l’éditeur.

Nous avons donc pour le moment créé un Shader qui permet de modifier l’aspect des objects auxquels il est attaché. Cependant, il n’est pas vraiment flexible. En particulier, nous aimerions pouvoir modifier la couleur finale, ainsi que la vitesse d’animation de notre Shader. Pour ce faire, nous pouvons créer des Properties. Ces Properties seront ensuite modifiables depuis l’éditeur, on directement dans un script. Pour cela, nous devons soit :

• créer de nouvelles Properties dans la fenêtre Blackboard en cliquant sur le bouton + et en choisissant le type de Property désiré;
• convertir un Node de type Input existant dans le Shader Graph.

En convertissant le Node de type Color, en rajoutant les Properties speed et density de type Float, et en ajustant les connexions existantes, on obtient le Shader Graph suivant :

Maintenant, nous pouvons voir le résultat dans la scène Unity directement et surtout, nous pouvons modifier les Properties pour produire des effets variés :

INFORMATIONS

Pour les Properties de type Float, on peut spécifier de les afficher avec des Sliders en modifiant leurs paramètres dans la fenêtre Graph Inspector.

La couleur en entrée peut enfin être remplacée par une texture. Dans ce cas, il faut tout simplement créer une Property de type Texture2D. Ensuite, il faut créer un Node de type Sample Texture 2D qui va être en charge d’échantillonner la texture et de retourner les bonnes couleurs, en fonction des UV passées en entrée.

EXERCICE

Rajouter la possibilité d’utiliser une texture en entrée de notre Shader Graph.

Slides #

Références #