Créer votre premier graphique de texture

Texture Graph Editor est une interface basée sur des nœuds permettant de créer de manière procédurale une texture dans l'Unreal Engine. Ce document vous guide dans la création d'un graphique de texture qui génère une texture vérificatrice d'UV personnalisée.

Le graphique permet de personnaliser le nombre de tuiles, les couleurs, les lignes de la grille et les flèches. La construction de ce graphique explore certains concepts et flux de travail de base associés à un graphique de texture.

Avant de créer votre premier graphique, il est utile de consulter le guide Premiers pas avec l'éditeur de graphiques pour obtenir un aperçu de l'éditeur et certains concepts généraux utiles.

Chargement du plug-in

Texture Graph Editor est un plug-in expérimental qui n'est pas chargé par défaut au démarrage du moteur.

Pour activer ce plug-in, procédez comme suit :

1. Dans la barre de menus, sélectionnez Modifier > Plug-ins.
2. Dans la barre de recherche, saisissez « Texture Graph ».
3. Activez le plug-in TextureGraph et sélectionnez Oui dans la boîte de dialogue contextuelle.
4. Redémarrez le moteur.

Ressource de graphique de texture

Pour créer un nouveau graphique de texture, procédez comme suit :

1. Ouvrez le tiroir à contenu et cliquez sur **Ajouter > Texture > Graphique de texture.
2. Renommez la nouvelle ressource « TG_UVChecker ».
3. Enregistrez la ressource, puis double-cliquez dessus pour ouvrir l'éditeur.

Créer le carré du vérificateur de base

La base du motif est un carré deux par deux que vous pouvez répéter et modifier.

Ce guide construit le modèle à partir de zéro pour explorer certains flux de travail et contrôles utilisateur.

Si vous souhaitez utiliser un motif de vérificateur rapide, vous pouvez explorer le nœud Pattern, qui propose des options pour plusieurs types de modèles standard.

Pour commencer à créer le motif de vérificateur, procédez comme suit :

1. Depuis la palette de nœuds, accédez à la section Procédural puis faites glisser le nœud Forme dans votre graphique. Développez le nœud en cliquant sur la flèche vers le bas pour afficher toutes les options possibles.
2. Modifiez le type de forme en sélectionnant un rectangle.
3. Cliquez et faites glisser la broche Sortie. Lorsque vous déposez la sélection, la palette de nœuds s'ouvre. Recherchez et sélectionnez Transform dans la liste. Les nœuds Shape et Transform sont automatiquement reliés.
   1. Lorsque vous créez des nœuds à l'aide de cette technique, n'oubliez pas que la connexion est établie sur la valeur d'entrée supérieure.
4. Développez le nœud Tansform et ajustez la Couverture à 0.5, 0.5. Réglage de la couverture dans les échelles de transformation de l'image d'entrée (dans ce cas, un simple rectangle) sur la valeur spécifiée. Par défaut, la couleur de remplissage est vide avec une couleur ou une valeur alpha. Vous pouvez définir la couleur de remplissage dans les détails.
5. À partir du nœud Shape, faites glisser un deuxième nœud Transform. Définissez la Couverture de la deuxième transformation sur 0.5, 0.5 et le Décalage sur 0.5, 0.5. Vous pouvez maintenant minimiser le nœud Transform afin qu'il occupe moins d'espace.
6. Faites un clic droit dans la vue du graphique puis, dans le menu, recherchez le nœud Add en faisant défiler l'écran jusqu'à math ou searching.

7. Reliez les valeurs de sortie des nœuds Transform aux entrées A et B du nœud Add. Cela produit un carré vérificateur à 4 carreaux.

   
8. Au fur et à mesure que vous construisez votre graphique, il est important de le tenir organisé. Sélectionnez tous les nœuds, faites un clic droit sur le graphique, puis recherchez et sélectionnez Nouveau commentaire. La zone de commentaire contient les quatre nœuds. Nommez le commentaire « CheckerBlock ».

Créer des lignes de division

Avec le bloc vérificateur de base, vous pouvez superposer des lignes de séparation et contrôler l'épaisseur et la valeur du rayon d'angle.

Pour ajouter les lignes de division, procédez comme suit :

1. Créez un nœud Shape, définissez la forme sur un rectangle et définissez la largeur et la hauteur sur 0.9.
2. Faites glisser la broche de sortie du nœud Shape, puis recherchez et sélectionnez Transform.
3. Dans le nœud Transform, définissez la valeur Répétition sur 2.0,2.0.
4. Faites glisser la broche de sortie, puis recherchez et sélectionnez Invert. Ce nœud vous donne la valeur appropriée pour votre masque de ligne.

5. Dans le nœud Invert, activez Fixer.

   
6. Une fois la structure de base des lignes créée, vous pouvez ajouter un mécanisme pour ajuster l'épaisseur de la ligne et le rayon d'angle des lignes. Faites un clic droit sur le graphique, puis recherchez et sélectionnez Scalar.
7. Renommez le nœud en « Rounded Corners » en faisant un clic droit sur le nœud et en sélectionnant Renommer. Reliez le nœud à la broche Arrondi du nœud Shape. Définissez la valeur sur 0.25.
8. Répétez le processus à 3 reprises pour créer plusieurs nœuds scalaires et renommez-les en « Linethickness », « SquareBase » et « LineMult ».1. Faites glisser la broche LineThickness, puis recherchez et sélectionnez Multiply dans la liste.
9. Reliez la sortie LineMult à la broche B du nœud Multiply et définissez la valeur sur 0.1.
10. Faites glisser la broche SquareBase, puis recherchez et sélectionnez Soustraire dans la liste.
11. Reliez la sortie du nœud Multiply à la valeur B du nœud Subtract.
12. Reliez la broche de sortie de Subtract à la valeur Largeur et Hauteur du nœud Shape.
13. Sélectionnez tous les nœuds et créez une nouvelle zone de commentaire autour d'eux pour vous aider à organiser votre graphique.

Créer des flèches

Pour déterminer l'orientation du modèle, vous pouvez ajouter des flèches au centre de chaque carré.

Pour ajouter ce dernier élément, procédez comme suit :

1. Faites un clic droit dans le graphique, puis recherchez et sélectionnez Shape. Répétez cette étape pour créer deux nœuds Shape.
2. Définissez la forme du premier nœud sur Triangle, puis réglez la largeur sur 0.6.
3. Faites glisser la broche de sortie, puis recherchez et sélectionnez Transform. Définissez la valeur Décalage sur 0.0,0.05.
4. Réglez le deuxième nœud Shape sur Rectangle, puis réglez la largeur sur 0.1 et la hauteur sur 0.4.
5. Faites glisser la broche de sortie, puis recherchez et sélectionnez Transform. Définissez la valeur Décalage sur 0.0,0.8.
6. Faites un clic droit dans le graphique, puis recherchez et sélectionnez Add. Connectez les broches de sortie du nœud Transform au nœud Add.

7. Sélectionnez le nœud Add, puis dans la fenêtre d’aperçu, cliquez sur l’icône de verrouillage. Cette icône verrouille l'aperçu du nœud même lorsque vous sélectionnez d'autres nœuds. L'aperçu du verrouillage vous permet de modifier les valeurs de transformation et d'afficher le résultat final.

   
8. Transformez la forme de flèche unique en base de carré standard de 4 carreaux. Pour ce faire, faites glisser la broche de sortie du nœud Add, puis recherchez et sélectionnez Transform.
9. Dans le nœud Transform, définissez la valeur Répétition sur 2.0, 2.0.
10. Décochez la case de verrouillage sur l'aperçu pour voir d'autres aperçus de nœuds.
11. Les flèches sont un peu trop grandes. Définissez la valeur Zoom sur -0.1 pour mettre à l'échelle chaque carreau répété. Une valeur négative effectue un zoom arrière, ce qui donne une flèche plus petite.
12. Un zoom arrière expose la zone vide entre chaque carreau. Dans le panneau Détails, cliquez sur la valeur Couleur de remplissage et définissez la valeur A (alpha) sur 1. La couleur est déjà définie sur noir par défaut. Le réglage de ces valeurs crée un masque uni.
13. Sélectionnez tous les nœuds et créez une nouvelle zone de commentaire autour d'eux pour vous aider à organiser votre graphique.

Relier les composants et ajouter la couleur

Vous disposez désormais de vos éléments de base pour créer un motif de vérificateur évolutif. Vous pouvez ajouter des contrôles similaires à la section de ligne de grille pour ajuster le motif pour une utilisation future.

1. Commencez par l'élément le plus important, la couleur du vérificateur. Faites glisser 2 nœuds Color de la palette de nœuds.
2. Renommez les nœuds « CheckerColorA » et « CheckerColorB ».
3. Ajustez le nœud Color aux couleurs de vérificateur souhaitées dans le panneau Détails.
4. Depuis CheckerColorA, faites glisser la broche de sortie, puis recherchez et sélectionnez Blend. Les nœuds Blend sont des fonctions puissantes dotées de nombreuses fonctionnalités pour les opérations de fusion complexes. Dans cet exemple, conservez les paramètres par défaut.
5. Reliez la broche de sortie de CheckerColorB à la valeur Arrière-plan du nœud Blend.
6. À partir de la broche de sortie du nœud Add dans votre Checkerblock, faites glisser un nouveau nœud Transform.
7. Créez un nouveau nœud Scalar et renommez-le « CheckerRepeat ».
8. Définissez la valeur CheckerRepeat sur 2.0.
9. Reliez la broche de sortie de CheckerRepeat à la broche Répétition du nœud Transform nouvellement créé. L'entrée scalaire unique s'applique aux valeurs de répétition X et Y.

10. Reliez la broche de sortie du nœud de Transform à la valeur Masque du nœud Blend.

    

Couleur de la ligne de grille

Vous pouvez répéter un flux de travail similaire pour vos lignes de grille. Vous disposez déjà de contrôles pour l'épaisseur et l'arrondi des lignes, mais vous n'avez pas de paramètre pour la couleur de votre ligne.

1. Créez un nouveau nœud Color et renommez-le « LineColor ».
2. Ajustez le nœud LineColor à la couleur souhaitée dans le panneau Détails.
3. Faites glisser la broche de sortie du nœud LineColor, puis recherchez et sélectionnez Blend.
4. Reliez la broche de sortie du nœud Blend de votre vérificateur précédent à l'entrée Arrière-plan du nouveau nœud Blend.
5. Dans la zone de commentaire GridLines, faites glisser la broche de sortie du nœud Invert, puis recherchez et sélectionnez Transform.
6. Reliez le nœud CheckerRepeat à la commande Répétition du nouveau nœud Transform. Vous pouvez utiliser une broche de sortie à plusieurs reprises.
7. Reliez la broche de sortie du nœud Transform à l'entrée Masque sur le nouveau nœud Blend.

Couleur de la flèche

Répétez ce processus pour ajouter vos flèches sur le modèle de vérificateur.

1. Créez un nœud Couleur et nommez-le « ArrowColor ».
2. Ajustez le nœud ArrowColor sur la couleur souhaitée dans le panneau Détails.
3. Faites glisser la broche de sortie du nœud ArrowColor, puis recherchez et sélectionnez Blend.
4. Reliez la broche de sortie du nœud Blend de votre vérificateur précédent à l'entrée Arrière-plan du nouveau nœud Blend.
5. Dans la zone de commentaire Flèche, faites glisser la broche de sortie du nœud Transform, puis recherchez et sélectionnez Transform.
6. Reliez le nœud CheckerRepeat à la commande Répétition du nouveau nœud Transform.
7. Reliez la broche de sortie du nœud Transform à l'entrée Masque sur le nouveau nœud Blend.
8. Faites glisser la broche de sortie du nœud Blend, puis recherchez et sélectionnez Output. Renommez le nœud Output « BaseColorOutput ».

Sorties et exportation

Le nœud Output dispose de paramètres pour les attributs de texture communs et le nom de sortie, le chemin du dossier et la résolution.

Vous pouvez ajouter plusieurs sorties à un seul graphique. Ce flux de travail est utile lors de la création d'ensembles de textures plus complexes pour des matériaux nécessitant une couleur, une rugosité, une normale et une texture métallique.

Pour configurer plusieurs types de sortie, procédez comme suit :

1. Dans la zone de commentaire GridLines, faites glisser la broche de sortie du nœud Transform, puis recherchez et sélectionnez BrightnessContrast.
2. Réglez la luminosité sur 0.5 pour créer une image en niveaux de gris plus aplanie.
3. Faites glisser la sortie du nœud BrightnessContrast pour créer un nouveau nœud Outpout. Renommez le nœud « RoughnessOutput ».
4. À partir du nœud Transform précédent, faites glisser la broche de sortie, puis recherchez et sélectionnez NormalFromHeightMap.
5. Faites glisser la sortie du nœud NormalFromHeightMap pour créer un nouveau nœud Output. Renommez le nœud « NormalOutput ».

6. Ajustez les noms de sortie et les paramètres de compression pour chaque nœud Output.

   
7. Dans la barre de menus principale, cliquez sur Exporter.

La fenêtre d'exportation s'ouvre et affiche le nœud Output comme textures potentielles à générer. Vous pouvez sélectionner ou désélectionner ces dernières pour itérer sur une ou toutes les textures selon vos besoins. Cliquez sur Exporter dans la fenêtre pour créer les nouvelles textures.

Vous pouvez utiliser l'éditeur de graphiques de texture pour une large gamme de flux de travail de texture, notamment les modifications de base et les textures existantes, en vue de créer de nouvelles textures, de les empaqueter, d'en effectuer un atlasing ou de les combiner avec des blueprints. Vous pouvez utiliser les graphiques de texture comme utilitaires de pipeline pour vous aider à comprendre les processus courants.