Unity Shader Graph Basics

Un shader est un petit programme qui contient des instructions pour le GPU. Il décrit comment calculer la couleur de l'écran pour un matériau spécifique.

Bien que Unity dispose d'un shader standard, vous devez parfois implémenter un effet dont un shader standard n'est pas capable.

Auparavant, cela nécessitait la connaissance d'un langage de shader spécifique, tel que Cg ou HLSL, et les approches qu'ils contiennent sont légèrement différentes de la création habituelle de scripts de gameplay. Pour de nombreuses personnes, l'écriture de shaders est un aspect impopulaire du développement de jeux, car il nécessite le développement d'une courbe d'apprentissage supplémentaire.

Unity a introduit Shader Graph , qui facilite l'écriture de shaders avec presque aucun code. Mieux encore, Shader Graph vous permet de travailler avec une interface visuelle interactive.

Dans ce tutoriel, vous allez créer votre premier shader Unity!

Se rendre au travail

Ce didacticiel utilise la version 2019.1 ou plus récente d'Unity. Téléchargez la nouvelle version d'Unity ici .

Remarque : bien que ce didacticiel soit destiné aux débutants dans Shader Graph, il est supposé que vous connaissez les bases du développement dans Unity et que vous maîtrisez l'interface du moteur. Si vous débutez avec Unity, consultez l'excellent didacticiel Mise en route dans Unity .

Téléchargez le didacticiel ici . Décompressez ensuite le contenu et ouvrez Intro to Shader Graph Starter in Unity.

Le dossier RW dans la fenêtre Projet est organisé comme suit:

• Polices : polices utilisées dans la scène.
• Matériaux : matériaux pour la scène.
• Modèles : maillages 3D pour les formes et les arrière-plans du jeu.
• PostFX : effets de post-traitement pour le rendu de scène.
• Préfabriqués : divers composants pré-construits.
• Scènes : scène de jeu.
• Scripts : scripts avec logique de jeu.
• Shaders : graphiques Shader créés pour ce didacticiel.
• Sprites : un sprite utilisé dans le cadre des instructions.
• Textures : cartes de texture pour les formes et les arrière-plans du jeu.

Chargez maintenant la scène TangramPuzzle depuis le dossier Scenes .


Il s'agit d'un jeu simple appelé Tangram , qui est apparu en Chine au 19e siècle. La tâche du joueur est de déplacer sept formes géométriques plates, ce qui en fait des pictogrammes ou silhouettes stylisés.

Lancez le mode Play dans l'éditeur et testez les jeux de démonstration.

Vous pouvez cliquer sur les formes et les faire glisser. Utilisez les touches de direction pour faire pivoter les formes. Faites pivoter et décaler les formes afin qu'elles ne se chevauchent pas.

Pouvez-vous comprendre comment déplacer les sept formes pour créer de tels motifs?


Donc, d'un point de vue technique , le jeu fonctionne, mais il ne donne aucun retour visuel sur la figure sélectionnée.

Et si nous pouvons faire briller la forme quand une souris est dessus? Cela améliorera l'interface utilisateur.


Et c'est une excellente occasion de démontrer les capacités de Shader Graph!

Vérification des paramètres de pipeline pour le Shader Graph

Shader Graph ne fonctionne qu'avec le pipeline de rendu scriptable relativement nouveau, c'est-à-dire avec le pipeline de rendu haute définition ou avec le pipeline de rendu léger .

Lors de la création d'un nouveau projet pour travailler avec Shader Graph, sélectionnez le modèle correct.


L'exemple de projet est déjà configuré pour fonctionner avec le pipeline de rendu léger . Tout d'abord, confirmez dans PackageManager que Lightweight RP et ShaderGraph sont installés en choisissant Fenêtre ► PackageManager .

Sélectionnez ensuite l'une des versions disponibles et, si nécessaire, cliquez sur le bouton Mettre à jour vers . Habituellement, la meilleure option est la dernière version vérifiée .


Après la mise à jour des packages, vérifiez soigneusement l'exactitude des paramètres du pipeline dans Édition ► Paramètres du projet .

Sous l'onglet Graphiques , le paramètre Scriptable Render Pipeline Settings doit être défini sur LWRP-HighQuality . Grâce à cela, le projet utilisera le paramètre par défaut le plus élevé pour le pipeline de rendu léger.

Après vous être assuré que vous utilisez l'un des actifs Scriptable Render Pipeline , fermez cette fenêtre.

Création d'un graphique PBR

Lors du rendu d'un maillage 3D à l'écran, le matériau et le shader fonctionnent toujours ensemble. Par conséquent, avant de commencer à créer un shader, nous avons besoin de matériel.

Tout d'abord, cliquez sur le bouton Créer dans la fenêtre Projet pour générer un nouveau matériau dans le dossier RW / Matériaux . Sélectionnez Créer ► Matériau , puis renommez-le Glow_Mat .

Ensuite, dans le dossier RW / Shaders , créez un graphique PBR en choisissant Créer ► Shader ► Graphique PBR . Il s'agit d'un graphique shader qui prend en charge un rendu physiquement précis , ou PBR.

Nommez-le HighlightShaderGraph .


Le matériau Glow_Mat utilise jusqu'à présent un shader standard pour LightweightRenderPipeline appelé LightweightRenderPipeline / Lit.


Remplacez-le par le nouveau graphique de shader nouvellement créé. Glow_Mat étant sélectionné, cliquez sur le menu déroulant Shader en haut de l'inspecteur et sélectionnez Shader Graphs ► HighlightShaderGraph .

Glow_Mat prendra une teinte de gris légèrement plus claire, mais restera plutôt terne. Ne vous inquiétez pas, nous allons le réparer bientôt.

Maintenant, double-cliquez sur l'actif HighlightShaderGraph ou cliquez sur l' Open Shader Editor dans l'inspecteur. Cela ouvrira la fenêtre Shader Graph .


Découvrez les principales parties de cette interface:

• L'espace de travail principal est une zone gris foncé dans laquelle les opérations du graphique seront stockées. Vous pouvez cliquer avec le bouton droit sur l'espace de travail pour ouvrir le menu contextuel.
• Un nœud est un élément unique d'un graphique. Chaque nœud a une entrée, une sortie ou une opération, selon ses ports. Les nœuds sont connectés les uns aux autres à l'aide de bords .
• Le nœud maître est le dernier nœud de sortie du graphique. Dans cet exemple, nous utilisons une option de rendu physiquement précise, également appelée nœud maître PBR. Vous pouvez y remarquer certaines propriétés, telles que l'albédo, la normale, l'émission et la métallisation, qui sont utilisées dans le shader standard.
• Blackboard peut donner accès à certaines parties du graphique dans l'inspecteur. Cela permet à l'utilisateur de configurer les paramètres sans modifier directement le graphique lui-même.
• L'aperçu principal affiche de manière interactive la sortie actuelle du shader sous forme de sphère.

En connectant les différents nœuds, vous pouvez créer un graphique de shader que Unity compile et transfère au GPU.

Création d'un nœud de couleur

Tout d'abord, donnons au shader une couleur de base. Pour ce faire, connectez le nœud de couleur au composant Albedo du nœud maître PBR. Cliquez avec le bouton droit sur l'espace de travail pour créer le premier nœud à partir du menu contextuel en choisissant Créer un nœud ► Entrée ► De base ► Couleur .


Notez qu'il y a des centaines de nœuds dans le menu Créer un nœud ! Au début, cela semble déroutant, mais vous découvrirez bientôt les plus utilisés.

Ensuite, faites glisser le nœud sur l'espace de travail, en maintenant sa barre de titre. Ensuite, laissez-le quelque part à gauche du nœud maître PBR .

Le nœud Couleur vous permet de spécifier une seule couleur. Cliquez sur le champ de couleur et sélectionnez une belle teinte rouge, par exemple R: 128, G: 5, B: 5 .

Pour sortir la couleur vers le nœud maître PBR , faites glisser le port de sortie vers le port Albedo , qui indique la couleur de base du shader.

En connectant les nœuds côte à côte, vous devriez voir comment la sphère dans l' aperçu principal devient rouge.


Super! Dans le domaine de l'écriture de shaders, la création d'un shader monochrome est un analogue de Hello, world!

Bien que vous ne puissiez pas encore comprendre cela, mais vous venez de créer votre premier shader!

Travailler avec l'interface

Bien qu'il n'y ait que quelques nœuds dans le graphique, c'est le meilleur moment pour vous familiariser avec l'interface du graphique Shader.

Essayez de faire glisser les nœuds et notez que les bords entre le port de sortie Couleur et le port d'entrée PBR Master restent connectés.

Les nœuds peuvent contenir différents types de données. Tout comme nous avons créé un nœud contenant une seule couleur d'entrée, nous pouvons créer un nœud représentant un seul nombre; Sélectionnez Créer un nœud ► Entrée ► De base ► Entier . Nous ne ferons rien avec ce noeud, il suffit seulement d'illustrer le principe.


Connectez le port Integer Out au port Alpha du nœud maître PBR .

Notre graphique est encore très petit, mais nous avons déjà suffisamment de nœuds pour vérifier l'action des touches de raccourci. Sélectionnez une paire de nœuds et appuyez sur les touches suivantes:

• F : encadrer les nœuds sélectionnés.
• A : encadrez l'ensemble du graphique.

Vous pouvez également utiliser les boutons en haut de la fenêtre pour basculer entre l' aperçu principal et le tableau noir . Le bouton Afficher dans le projet permet de trouver le graphique de shader actuel dans la fenêtre Projet.

Après avoir traité la gestion du graphe, nous le nettoyons. Tout ce dont nous avons besoin, ce sont les nœuds Master Couleur et PBR .

Cliquez avec le bouton droit sur la connexion entre les nœuds entier et maître , puis sélectionnez Supprimer . Cela séparera le nœud du graphique.


De même, vous pouvez supprimer entièrement le nœud entier. Cliquez avec le bouton droit sur le nœud et sélectionnez Supprimer .


Une fois terminé, cliquez sur le bouton Enregistrer l'actif dans le coin supérieur gauche de l'interface. Unity enregistre toutes les modifications, puis compile et active le shader. Cette étape doit être effectuée chaque fois que vous souhaitez voir les dernières modifications dans l'éditeur.

Revenez maintenant à la fenêtre et sélectionnez le matériau Glow_Mat .


Lorsque le shader s'étend jusqu'au matériau, la sphère de la fenêtre d'aperçu de l'inspecteur doit devenir rouge.

Faites maintenant glisser le matériau Glow_Mat sur les formes de tangram dans la fenêtre Scene .


Comme prévu, le matériau avec le shader a peint le maillage dans une belle couleur rouge uniforme.

Ajoutez un effet d'éclat

Si vous voulez que le matériau Glow_Mat ait une lueur plus mystérieuse, vous devez à nouveau modifier le graphique du shader.

Maintenant, la sortie couleur est transférée à l'entrée du nœud maître Albedo PBR .

Vous pouvez également faire glisser un autre bord de Out à Emission . Maintenant, la même couleur est utilisée deux fois: à la fois comme couleur de base et comme couleur du rayonnement.


Les ports de sortie peuvent avoir plusieurs bords et les ports d'entrée ne peuvent en avoir qu'un.

Basculez maintenant le menu déroulant Mode du nœud Couleur en mode HDR . Nous allons donc inclure la gamme dynamique étendue de couleurs.


Modifiez maintenant le champ de couleur. En mode HDR , une option d' intensité supplémentaire est apparue. Cliquez sur +1 plusieurs fois dans la palette du bas ou faites glisser le curseur d'environ 2,5 . Enregistrez maintenant les modifications et revenez à l'éditeur.


Dans l'éditeur, la figure brillera en orange vif. Le post-traitement de la scène est déjà activé et améliore la couleur de la plage dynamique étendue.

Sélectionnez maintenant l'objet de jeu PostProcessing dans la hiérarchie. La lueur est due à l'effet Bloom .

Ouvrez les options Bloom et définissez l' intensité ( intensité de la luminosité) et le seuil (le seuil d'apparition de la lueur). L'exemple montre les valeurs 3 et 2 .


Wow, cet éclat!

Création d'un script de surbrillance

Nous ne voulons pas que le chiffre brille constamment. Nous avons besoin que la lueur ne s'allume qu'en fonction de la position de la souris.

Lorsque le curseur de la souris se trouve sur la forme, nous devons activer le matériau Glow_Mat. Dans d'autres cas, la figure doit être affichée avec le matériau standard Wood_Mat.

Tout d'abord, créez un nouveau script C # dans RW / Scripts et appelez-le Highlighter . Il nous aidera à basculer entre les deux matériaux lors de l'exécution du programme. Remplacez toutes les lignes du script par le code suivant:

using UnityEngine; // 1 [RequireComponent(typeof(MeshRenderer))] [RequireComponent(typeof(Collider))] public class Highlighter : MonoBehaviour { // 2 // reference to MeshRenderer component private MeshRenderer meshRenderer; [SerializeField] private Material originalMaterial; [SerializeField] private Material highlightedMaterial; void Start() { // 3 // cache a reference to the MeshRenderer meshRenderer = GetComponent<MeshRenderer>(); // 4 // use non-highlighted material by default EnableHighlight(false); } // toggle betweeen the original and highlighted materials public void EnableHighlight(bool onOff) { // 5 if (meshRenderer != null && originalMaterial != null && highlightedMaterial != null) { // 6 meshRenderer.material = onOff ? highlightedMaterial : originalMaterial; } } } 

Analysons ce script:

1. Le script ne peut être appliqué qu'à un objet contenant les composants MeshRenderer et Collider . Ceci est contrôlé en ajoutant les attributs [RequireComponent] en haut du script.
2. Ce sont des liens vers MeshRenderer , originalMaterial et highlightedMaterial . Les matériaux sont marqués avec l'attribut [SerializeField] , qui vous permet de les affecter à partir de l'inspecteur.
3. Dans la méthode Start , nous MeshRenderer automatiquement le MeshRenderer aide de GetComponent .
4. Appelé EnableHighlight(false) . Cela garantit que, par défaut, le contenu non mis en surbrillance est affiché. Vous trouverez ci-dessous la méthode publique EnableHighlight , qui change le matériau de rendu. Il reçoit le paramètre booléen onOff , qui détermine l'état du rétroéclairage.
5. Prévention de toutes les erreurs NullReference
6. Pour économiser de l'espace, nous utilisons l'opérateur ternaire.

Ajouter des événements de souris

Puisque ce script s'applique aux formes qui ont un MeshCollider , nous pouvons utiliser les méthodes OnMouseOver et OnMouseOver . Ajoutez le code suivant après la méthode EnableHighlight :

  private void OnMouseOver() { EnableHighlight(true); } private void OnMouseExit() { EnableHighlight(false); } 

Lorsque la souris survole la forme, elle appelle EnableHighlight(true) . De même, lorsque la souris quitte Collider, elle appellera EnableHighlight(false) .

C'est tout! Enregistrez le script.

Fait saillant de la figure

Si, dans les sections précédentes du didacticiel, vous avez appliqué Glow_Mat à l'une des figures, dans l'éditeur, vous devez renvoyer le matériau Wood_Mat à toutes les figures du jeu. Maintenant, pour allumer la lueur, nous allons utiliser le surligneur pendant que le programme est en cours d'exécution.

Tout d'abord, nous allons sélectionner sept objets à l'intérieur du Tangram de transformation, qui sont des formes distinctes. Ensuite, nous leur ajoutons tous le script Highlighter en même temps.


Faites ensuite glisser Wood_Mat dans le champ Original Material et Glow_Mat dans le champ Highlighted Material . Maintenant, lancez le mode Play et vérifiez le résultat de notre travail.

Pas mal! Lorsque vous survolez la forme du tangram, elle commence à briller en rouge vif. Si vous en supprimez le curseur, il revient à son état d'origine.


Dans le jeu lui-même, rien n'a changé, mais l'effet de surbrillance a ajouté un intérêt visuel et permet au joueur de se concentrer.

Utilisation de nœuds de texture

À l'heure actuelle, notre shader simple a une couleur rouge vif solide. Nous allons changer le shader pour qu'il ne perde pas sa texture bois d'origine. Pour ce faire, nous allons faire apparaître le rétro-éclairage comme un bord lumineux autour de la surface.

Tout d'abord, modifiez le HighlightShaderGraph en double-cliquant dessus ou en sélectionnant
dans l' éditeur Open Shader .

Supprimez le nœud Couleur en cliquant dessus avec le bouton droit et en sélectionnant Supprimer . Nous allons tout créer à partir de zéro.

Au lieu d'une seule couleur, nous substituons la texture à l'aide du nœud Sample Texture 2D .

Créez un nœud, soit dans le menu contextuel, en cliquant avec le bouton droit et en choisissant Créer un nœud , soit en utilisant une touche de raccourci (espace). Sélectionnez Entrée ► Texture ► Exemple de texture 2D .

Le nœud Sample Texture 2D lit les informations de couleur d'un élément de texture et génère ses valeurs RVB.

Sélectionnez une texture dans le port d'entrée Texture . Cliquez sur le point à côté du champ vide pour ouvrir le navigateur de fichiers.

Sélectionnez l'élément de texture WoodAlbedo.


Connectez le port de sortie RGBA du nœud Sample Texture 2D au port PBR Master Albedo .

Voila! La texture de l'arbre est maintenant affichée sur la surface de la sphère d'aperçu.


Si vous ajoutez une carte normale, vous pouvez créer des pièces sur la surface. Commencez par créer un autre nœud Exemple de texture 2D en choisissant Créer un nœud ► Entrée ► Texture ► Exemple de texture 2D .

Sélectionnez une texture WoodNormal dans le port d'entrée Texture.


Modifiez le menu déroulant Type de Par défaut à Normal .

Sortez les valeurs RGBA sur le port Normal du nœud maître PBR .


La portée de l' aperçu principal devrait maintenant être plus approximative. La carte normale imite de petites irrégularités et indentations en surface. Cela vous permet de simuler l'apparence d'un arbre.

Remarque : le type de données de chaque port est indiqué entre parenthèses à côté du port. (T2) signifie que le port est compatible avec une texture bidimensionnelle et (4) signifie que le port utilise Vector4 . Selon le contexte, le graphique Shader peut ignorer les valeurs à virgule flottante supplémentaires.

Ajout de l'effet Fresnel

Maintenant que la couleur rouge unie a changé pour la texture de base et la carte normale, ajoutons un effet de surbrillance en utilisant une autre méthode.

Au lieu d'une lueur uniforme de l'objet entier, nous limiterons la lueur à ses bords uniquement. Cela peut être réalisé en utilisant l'effet Fresnel .

Créez un nouveau nœud en cliquant avec le bouton droit ou sur la barre d'espace, puis sélectionnez Créer un nœud ► Mathématiques ► Vecteur ► Effet Fresnel .

Ce nouveau nœud montre une sphère avec un anneau rayonnant blanc de diamètre. Vous pouvez régler la largeur de ce halo à l'aide du port d'entrée d' alimentation . Cliquez et faites glisser le X à gauche du champ ou saisissez les chiffres souhaités.

Plus la valeur est élevée, plus le halo devient mince et les valeurs plus petites le rendent très large. Pour créer une lueur subtile autour du bord, vous pouvez utiliser la valeur 4 .


Pour transmettre ce halo au matériau, nous allons connecter la sortie de l' effet Fresnel à l'entrée Emission du nœud maître PBR .


Maintenant, MainPreview affiche une sphère en bois avec un halo blanc brillant, obtenue grâce à l' effet Fresnel .

Remarque : l'effet Fresnel doit son nom au physicien français Augustin Jean Fresnel. Il a remarqué que la lumière rend les surfaces très lumineuses et ressemble à un miroir lorsqu'un observateur s'approche d'un angle de glissement .

Vous pouvez expérimenter avec la table de cuisine. Nous utilisons la version Unity de ce phénomène pour donner un éclat à la géométrie.

Multiplication par couleur

Vous pouvez ajouter des couleurs au contour lumineux à l'aide de calculs de couleurs simples.

Créez un nouveau nœud de couleur qui indiquera la couleur de l'anneau lumineux. Cliquez avec le bouton droit ou sur la barre d'espace pour ouvrir le menu contextuel, puis sélectionnez Créer un nœud ► Entrée ► De base ► Couleur . Basculez le mode couleur sur HDR .

Sélectionnez une couleur qui indiquera la couleur du rétroéclairage. Par exemple, choisissez un beau vert vif: R: 5, G: 255, B: 5 .

Augmentez l' intensité à 3,5 .


Nous ne pouvons pas combiner la nouvelle couleur avec l'effet Fresnel. car il n'a pas d'entrée pour la couleur. Par conséquent, nous devrons combiner la sortie de l'effet avec la sortie du nœud de couleur. Cela peut être fait en utilisant le nœud Multiply .

Créez un nœud Multiplier en cliquant avec le bouton droit de la souris , puis sélectionnez Créer un nœud ► Mathématiques ► Basique ► Multiplier .

Supprimez le bord entre l' effet Fresnel et le maître PBR . Connectez la sortie de l' effet Fresnel à l'entrée A du nœud Multiplier .

Connectez le nœud Out du nœud Color à l'entrée B du nœud Multiply .


Connectez ensuite Out of the Multiply node au port Emission of the PBR Master node. Voila! Nous voyons maintenant comment la couleur HDR vert vif entoure la sphère de prévisualisation principale .


N'oubliez pas que vous pouvez utiliser la puissance de l'effet Fresnel pour augmenter ou diminuer le halo. Si vous réduisez la valeur à 1,5, vous obtenez une large lueur verte.

Pour notre exemple de jeu, une valeur de 4 à 5 est bonne, mais vous pouvez expérimenter avec vos valeurs.


Enregistrez le graphique du shader et revenez à l'éditeur. Vous verrez immédiatement votre HighlightShaderGraph en action.

Lancez le mode de lecture .

Lorsque vous survolez une forme, elle conserve sa texture d'arbre. Cependant, une lueur verte brillante est maintenant apparue sur ses bords. Formellement, rien n'a changé dans le jeu, seul le rétro-éclairage est devenu plus faible.

Ajouter des propriétés de tableau noir

Si vous souhaitez modifier l'apparence de l'effet de lueur, vous devez revenir à la fenêtre de l'éditeur de graphique de shader et apporter ces modifications. Par exemple, en utilisant Fresnel Effect Power, étendez ou rétrécissez la bande de halo.

Ce n'est pas très pratique si nous voulons tester différents changements. Heureusement, Shader Graph a un concept de propriétés.

Vous pouvez rendre une partie du graphique visible publiquement dans l'inspecteur, ce qui vous permet d'effectuer de petites modifications de manière interactive. Cela se fait à l'aide de l'interface Blackboard .

Revenez au Shader Graph et activez l'affichage Blackboard . S'il est masqué, cliquez sur le bouton Tableau noir dans le coin supérieur droit.

Ajout de propriétés de texture de base et de carte normale

Nous allons maintenant ouvrir à la fois la texture de base et la carte normale afin qu'elles soient accessibles via l'inspecteur.

Cliquez sur l'icône + dans le coin supérieur droit du tableau noir . Sélectionnez Texture 2D dans la liste déroulante. L'élément devrait apparaître sur le tableau noir . Renommez-le BaseTexture .


Assurez-vous que la case exposée est cochée. Si vous ouvrez une propriété, elle deviendra publique et accessible dans l'inspecteur.


Pour ajouter une propriété au graphique, faites-la simplement glisser par l'étiquette dans l'espace de travail. Laissez-le quelque part à gauche du nœud Sample Texture 2D .

Connectez le port BaseTexture au port d'entrée Texture du nœud SampleTexture 2D connecté à Albedo. Cela remplacera le point de consigne précédent.

Répétez le même processus pour la carte normale . Cliquez sur l'icône + et créez une nouvelle texture 2D . Renommez-le en Normal Map .

Faites glisser la propriété dans l'espace de travail et attachez-la à l' exemple de texture 2D pour la carte normale.


Cliquez sur Enregistrer l'actif et revenez à la fenêtre principale de l'éditeur.

Sélectionnez le matériau Glow_Mat et notez deux nouveaux champs dans l'inspecteur: Texture de base et Carte normale .

Comme aucune texture n'a encore été définie pour eux, une surbrillance verte sur la sphère grise s'affiche dans la fenêtre d'aperçu.


Sélectionnez WoodAlbedo et WoodNormal pour BaseTexture et NormalMap .

Maintenant, sous les bords lumineux, la texture de l'arbre sera affichée correctement.


Les propriétés publiques permettent à l'utilisateur d'entrer des données directement dans le shader sans avoir à modifier le graphique du shader. Expérimentez par vous-même avec une sélection de différentes textures de base et de cartes normales.

Ajouter des propriétés Taille de lueur et couleur de lueur

Nous allons maintenant révéler d'autres types de propriétés dans Blackboard. Par exemple, il sera utile de laisser la valeur de la puissance de l'effet Fresnel changer.

Cliquez sur l'icône + sur Blackboard et créez la propriété Vector1 . Il désigne un seul paramètre de type float.

Renommez-le GlowSize .

Vous pouvez limiter la plage de valeurs entrées pour cette propriété en la convertissant en curseur . Basculez le mode sur le curseur , puis définissez Min sur 0,05 et Max sur 6 pour spécifier une plage. Définissez la valeur par défaut sur 5 .


Faites glisser la propriété GlowSize dans l'espace de travail. Connectez le port de sortie à l'entrée d' alimentation de l'effet Fresnel .

Maintenant, laissez l'utilisateur définir la couleur de la lueur. Au lieu de créer une propriété dans Blackboard, nous transformons le nœud existant dans le graphique.


Sélectionnez le nœud Couleur , puis cliquez avec le bouton droit et sélectionnez Convertir en propriété .

Le nœud Couleur est converti en une propriété de couleur dans le tableau noir , qui ne peut plus être modifiée directement dans le graphique. Renommez la propriété en GlowColor .


Cliquez sur Enregistrer l'actif et revenez à la fenêtre principale de l'éditeur.


Sélectionnez le matériau Glow_Mat dans la fenêtre Projet. Vous devriez voir que le curseur GlowSize et le champ GlowColor sont maintenant disponibles dans l'inspecteur.


Modifiez les valeurs des matériaux à votre goût. Lancez le mode Lecture pour tester votre travail.


Vous disposez maintenant d'un rétroéclairage personnalisable qui peut être modifié à votre guise!

Où aller ensuite

Félicitations! Vous pouvez maintenant créer vos propres shaders à l'aide du Shader Graph!

En utilisant vos propres capacités créatives, vous serez vous-même surpris de réussir. Vous voulez créer un faisceau laser fantastique ou un champ de force fantastique? Adaptez le résultat de notre travail au shader dont vous avez besoin.

Bien qu'il y ait littéralement des centaines de nœuds, ce tutoriel aurait dû vous aider à apprendre le Shader Graph.