Dessin avec des cibles de rendu dans Unreal Engine

La cible de rendu est essentiellement une texture sur laquelle vous pouvez écrire lors de l'exécution. Du point de vue du moteur, ils stockent des informations telles que la couleur de base, les normales et l'occlusion ambiante.

Du point de vue de l'utilisateur, les cibles de rendu sont principalement utilisées comme une sorte de caméra supplémentaire. Vous pouvez définir la capture de la scène à un moment donné et enregistrer l'image dans la cible de rendu. Vous pouvez ensuite afficher la cible de rendu sur le maillage, par exemple, pour simuler une caméra de surveillance.

Après la sortie de la version du moteur 4.13, Epic a ajouté la possibilité de dessiner des matériaux directement sur la cible de rendu en utilisant des contours. Cette fonction vous permet de créer des effets complexes, tels que la simulation de fluide et la déformation de la neige. Cela semble incroyable, non? Mais avant de passer à des effets aussi complexes, il est préférable de se familiariser avec quelque chose de simple. Quoi de plus simple que de dessiner sur une cible de rendu?

Dans ce didacticiel, vous apprendrez ce qui suit:

• Créez des cibles de rendu dynamiquement avec des contours
• Afficher la cible de rendu sur le maillage
• Dessiner une texture sur la cible de rendu
• Changer la taille et la texture du pinceau pendant le jeu

Remarque: ce didacticiel suppose que vous connaissez déjà les bases de l'utilisation d'Unreal Engine. Si vous débutez avec Unreal Engine, consultez notre série en dix parties de didacticiels Unreal Engine pour les débutants .

Se rendre au travail

Commençons par télécharger du matériel pour ce tutoriel (vous pouvez les obtenir ici ). Décompressez-les, accédez à CanvasPainterStarter et ouvrez CanvasPainter.uproject . Si vous cliquez sur Lecture , vous verrez ce qui suit:


Le carré au milieu (toile) est ce sur quoi nous allons dessiner. Les éléments de l'interface utilisateur sur la gauche seront la texture que nous allons dessiner et sa taille.

Voyons d'abord la méthode utilisée pour dessiner.

Méthode de dessin

La première chose dont nous avons besoin est une cible de rendu, utilisée comme toile. Pour déterminer où dessiner sur la cible de rendu, nous allons tracer la ligne droite sortant de la caméra vers l'avant. Si la ligne coupe la toile, nous pouvons obtenir l'intersection dans l'espace UV.

Par exemple, si le canevas a une liaison parfaite des coordonnées UV, l'intersection au centre renverra la valeur (0,5, 0,5) . Si la ligne traverse la toile dans le coin inférieur droit, nous obtiendrons la valeur (1, 1) . Ensuite, vous pouvez utiliser des calculs simples pour calculer l'emplacement du dessin.


Mais pourquoi obtenir les coordonnées dans l'espace UV? Pourquoi ne pas utiliser les coordonnées de l'espace réel du monde? Lors de l'utilisation de l'espace du monde, nous devons d'abord calculer l'intersection par rapport au plan. Vous devrez également prendre en compte la rotation et l'échelle de l'avion.

Lorsque vous utilisez l'espace UV, tous ces calculs ne sont pas nécessaires. Sur un plan avec une liaison parfaite des coordonnées UV, l'intersection avec le milieu revient toujours (0,5, 0,5) , quels que soient l'emplacement et la rotation du plan.

Remarque: la méthode considérée dans ce didacticiel ne fonctionne généralement qu'avec des plans ou des surfaces similaires aux plans. D'autres types de géométrie nécessitent une méthode plus complexe, que je couvrirai dans un autre tutoriel.

Tout d'abord, nous allons créer du matériel qui rendra la cible de rendu.

Créer du matériel de toile

Accédez au dossier Matériaux et ouvrez M_Canvas .

Dans ce didacticiel, nous allons créer des cibles de rendu de manière dynamique à l'aide de contours. Cela signifie que nous devons configurer la texture en tant que paramètre afin de pouvoir la passer pour rendre la cible. Pour ce faire, créez un TextureSampleParameter2D et appelez-le RenderTarget . Connectez-le ensuite à BaseColor .


Pour l'instant, ne vous inquiétez pas de choisir une texture - nous le ferons plus tard dans les plans. Cliquez sur Appliquer , puis fermez M_Canvas .

L'étape suivante consiste à créer une cible de rendu, après quoi nous l'utilisons comme matériau de canevas.

Création d'une cible de rendu

Il existe deux façons de créer une cible de rendu. Tout d'abord: créer dans l'éditeur en cliquant sur Add New \ Materials & Textures \ Render Target . Cette méthode vous permet de référencer facilement la même cible de rendu à plusieurs acteurs. Cependant, si nous avons besoin de plusieurs toiles, nous devrons créer une cible de rendu manuellement pour chaque toile.

Par conséquent, il est préférable de créer des cibles de rendu à l'aide de contours. L'avantage de cette approche est que nous créons des cibles de rendu uniquement lorsque cela est nécessaire et qu'elles ne gonflent pas la taille des fichiers de projet.

Nous devons d'abord créer une cible de rendu et l'enregistrer en tant que variable pour une utilisation future. Accédez au dossier Blueprints et ouvrez BP_Canvas . Localisez l' événement BeginPlay et ajoutez les nœuds sélectionnés.


Définissez la largeur et la hauteur sur 1024 . Nous modifions donc la résolution de la cible de rendu à 1024 × 1024 . Plus la valeur est élevée, plus la qualité d'image est élevée, mais aussi plus le coût de la mémoire vidéo est élevé.


Vient ensuite le nœud Clear Render Target 2D . Nous pouvons utiliser ce nœud pour définir la couleur de la cible de rendu. Réglez Clear Color sur (0,07, 0,13, 0,06) . Dans ce cas, la totalité de la cible de rendu se remplira de couleur verdâtre.


Nous devons maintenant afficher la cible de rendu sur le maillage du canevas.

Affichage de la cible de rendu

À ce stade, le maillage du canevas utilise le matériau par défaut. Pour afficher la cible de rendu, vous devez créer une instance dynamique de M_Canvas et lui passer la cible de rendu. Vous devez ensuite appliquer une instance dynamique du matériau au maillage du canevas. Pour ce faire, nous allons ajouter les nœuds sélectionnés:


Tout d'abord, passons au nœud Créer une instance de matériau dynamique et définissons la valeur parent sur M_Canvas . Nous allons donc créer une instance dynamique de M_Canvas .


Ensuite, accédez au nœud Définir la valeur du paramètre de texture et définissez le nom du paramètre sur RenderTarget . Nous passerons donc la cible de rendu au paramètre de texture créé précédemment.


Maintenant, la cible de rendu sera affichée sur le maillage du canevas. Cliquez sur Compiler et revenez à l'éditeur principal. Cliquez sur Lecture pour voir comment la toile change de couleur.


Maintenant que nous avons la toile, nous devons créer un matériau pouvant être utilisé comme pinceau.

Créer un matériau de pinceau

Accédez au dossier Matériaux . Créez le matériau M_Brush et ouvrez-le. Réglez d' abord le mode de fusion sur Translucide . Cela nous permettra d'utiliser des textures avec transparence.


Comme pour la toile, nous définissons la texture du pinceau en émoussant. Créez un TextureSampleParameter2D et nommez-le BrushTexture . Connectez-le comme suit:


Cliquez sur Appliquer , puis fermez M_Brush .

La prochaine chose à faire est de créer une instance dynamique du matériau du pinceau afin de pouvoir changer la texture du pinceau. Ouvrez BP_Canvas et ajoutez les nœuds sélectionnés.


Ensuite, accédez au nœud Créer une instance de matériau dynamique et définissez le parent sur M_Canvas .


Nous avons créé le matériau du pinceau et nous avons maintenant besoin d'une fonction pour peindre avec le pinceau sur la cible de rendu.

Peinture au pinceau sur la cible de rendu

Créez une nouvelle fonction et nommez-la DrawBrush . Nous avons d'abord besoin des paramètres: texture utilisée, taille du pinceau et endroit pour dessiner. Créez l'entrée suivante:

• BrushTexture: sélectionnez le type Texture 2D
  
• BrushSize: sélectionnez le type de flotteur
  
• DrawLocation: sélectionnez le type Vector 2D

Avant de dessiner un pinceau, nous devons définir sa texture. Pour ce faire, créez le circuit illustré ci-dessous. Assurez-vous que BrushTexture est sélectionné comme nom de paramètre .


Maintenant, nous devons faire le rendu dans la cible de rendu. Pour ce faire, créez les nœuds sélectionnés:


Commencer à dessiner le canevas sur la cible de rendu indique au moteur que nous voulons commencer le rendu sur une cible de rendu spécifique. Dessiner un matériau vous permet de dessiner du matériau à un emplacement spécifié avec la taille et la rotation sélectionnées.

Le calcul de la position de rendu est un processus en deux étapes. Nous devons d' abord mettre à l' échelle DrawLocation pour tenir dans la résolution de la cible de rendu. Pour ce faire, multipliez DrawLocation par Size .


Par défaut, le moteur rendra les matériaux en utilisant le coin supérieur gauche comme point de départ. Par conséquent, la texture du pinceau ne sera pas centrée sur nous là où nous voulons effectuer le rendu. Pour résoudre ce problème, nous devons diviser BrushSize par 2 , puis soustraire le résultat de l'étape précédente.


Ensuite, nous connectons tout comme suit:


Enfin, nous devons dire au moteur que nous voulons arrêter le rendu dans la cible de rendu. Ajoutez le nœud End Draw Canvas au rendu cible et connectez-le comme suit:


Maintenant, chaque fois que DrawBrush est exécuté , il définira d'abord la texture transmise comme texture pour BrushMaterial . Elle rendra ensuite le BrushMaterial dans le RenderTarget , en utilisant la position et la taille transmises.

Et là-dessus, la fonction de rendu est prête. Cliquez sur Compiler et fermez BP_Canvas . L'étape suivante consiste à tracer la ligne depuis la caméra et à dessiner à l'endroit de la toile où l'intersection s'est produite.

Trace directe de la caméra

Avant de dessiner sur la toile, nous devons spécifier la texture et la taille du pinceau. Accédez au dossier Blueprints et ouvrez BP_Player . Définissez ensuite la variable BrushTexture sur T_Brush_01 et la variable BrushSize sur 500 . Nous attribuons donc une image au pinceau d'un singe d'une taille de 500 × 500 pixels.


Ensuite, vous devez tracer la ligne. Localisez InputAxis Paint et créez le diagramme suivant:


Nous allons donc tracer la ligne dirigée directement depuis la caméra pendant que le joueur tient la touche assignée à Paint (dans notre cas, c'est le bouton gauche de la souris ).

Maintenant, nous devons vérifier si la toile droite s'est croisée. Ajouter des nœuds sélectionnés:


Maintenant, lorsque la ligne et le canevas se croisent , la fonction DrawBrush sera exécutée, en utilisant les variables de pinceau et les coordonnées UV qui lui sont transmises.

Pour que le nœud Find Collision UV fonctionne, nous devons modifier deux paramètres. Tout d'abord, accédez au nœud LineTraceByChannel et activez Trace Complex .


Ensuite, accédez à Edit \ Project Settings , puis à Engine \ Physics . Activez Support UV From Hit Results et redémarrez le projet.


Après le redémarrage, pour dessiner sur le canevas, cliquez sur Lecture et cliquez avec le bouton gauche .


Vous pouvez même créer plusieurs toiles et dessiner sur chacune d'elles séparément. Cela est possible car chaque canevas crée dynamiquement sa propre cible de rendu.


Dans la section suivante, nous implémentons la fonction de modification de la taille du pinceau d'un joueur.

Redimensionner la brosse

Ouvrez BP_Player et recherchez le nœud InputAxis ChangeBrushSize . Cette liaison d'axe est configurée pour utiliser la molette de la souris . Pour modifier la taille du pinceau, il nous suffit de modifier la valeur BrushSize en fonction de la valeur de l' axe . Pour ce faire, créez le schéma suivant:


Il effectuera l'addition ou la soustraction de BrushSize lorsque le joueur utilise la molette de la souris. La première multiplication détermine le taux d'addition ou de soustraction. Une pince (flotteur) a été ajoutée par mesure de sécurité. Il garantit que la taille de la brosse ne devient pas inférieure à 0 ou supérieure à 1000 .

Cliquez sur Compiler et revenez à l'éditeur principal. Faites tourner la molette de la souris pour redimensionner le pinceau pendant le dessin.


Dans la dernière section, nous allons créer une fonctionnalité qui permet au joueur de changer la texture du pinceau.

Changer la texture du pinceau

Tout d'abord, nous avons besoin d'un tableau pour stocker les textures que le joueur peut utiliser. Ouvrez BP_Player et créez une variable de tableau . Sélectionnez le type de texture 2D et nommez-le Textures .


Créez ensuite trois éléments dans Textures . Attribuez-leur les valeurs suivantes:

• T_Brush_01
• T_Brush_02
• T_Brush_03

Ce seront les textures que le joueur pourra dessiner. Pour ajouter de nouvelles textures, ajoutez-les simplement à ce tableau.

Ensuite, nous avons besoin d'une variable pour stocker l'index actuel du tableau. Créez une variable entière et nommez-la CurrentTextureIndex .


Ensuite, nous avons besoin d'un moyen de parcourir toutes les textures dans une boucle. Pour ce didacticiel, j'ai configuré un mappage d'action appelé NextTexture et je l'ai lié au bouton droit de la souris . Lorsque le joueur appuie sur cette touche, la transition vers la texture suivante doit être effectuée. Pour ce faire, recherchez le nœud InputAction NextTexture et créez le diagramme suivant:


Ce schéma incrémente CurrentTextureIndex chaque fois que vous cliquez avec le bouton droit . Si l'index atteint la fin du tableau, il est à nouveau réinitialisé à 0 . Enfin, BrushTexture définit la texture appropriée.

Cliquez sur Compiler et fermez BP_Player . Cliquez sur Lecture et cliquez avec le bouton droit pour basculer entre les textures.

Où aller ensuite?

Le projet terminé peut être téléchargé ici .

La cible de rendu est un outil extrêmement puissant et dans ce tutoriel, nous n'avons couvert que les bases. Si vous souhaitez savoir de quelles capacités de rendu les cibles sont capables, consultez Rendu Multipass basé sur le contenu dans UE4 . Cette vidéo contient des exemples de dessin de cartes de flux, de dessin volumétrique, de simulations de fluides, etc.

Consultez également notre vidéo de didacticiel Blueprint Drawing to Render Targets pour apprendre à créer une carte de hauteur avec une cible de rendu.