Guide complet pour la création d’un foliage interactif sur Unreal Engine 4

Hello! Dans le tutoriel d’aujourd’hui nous allons voir ensemble comment créer du foliage interactif sur Unreal Engine 4 en utilisant l’outil Pivot Painter pour Blender. Ce dernier est un plugin développé par Gvgeo (plus d’infos ici) qui permet de stocker l’orientation et la position du pivot d’un modèle 3D directement dans sa texture. Grâce à ce plugin, nous pourrons ainsi créer de l’herbe interactive qui se courbe au souffle du vent et sous les pieds du joueur. A la fin de ce tuto, vous obtiendrez le résultat affiché ci-contre. Pour ceux qui ne souhaiteraient pas passer par la case modélisation de l’herbe sur Blender, vous pouvez télécharger les ressources nécessaires à ce tuto en cliquant sur le bouton ci-dessous. C’est parti! 🙂

Introduction

Pour donner l’impression que les brins d’herbes bougent au gré du vent tout en étant plantés dans le sol, nous allons implémenter sur Unreal Engine 4 un material qui fixera la base des brins tout en faisant bouger leur pointe à l’aide de fonctions mathématiques. Par design, les materials sont capables de traiter des informations liées aux vertices d’un modèle (couleur, normale, etc.) et aux pixels de l’écran (depth buffer, color buffer, etc.), mais n’ont aucune information de hiérarchie concernant ces éléments. Il leur est donc difficile de récupérer des informations telles que le blueprint actuellement situé sous un pixel traité ou la position du pivot d’un mesh. Pour pallier ce problème, nous pouvons par exemple utiliser des custom buffers ou encore, comme dans le cas présenté ici, stocker les informations que nous avons besoin directement dans une texture qui sera traité par notre material.

Création des brins d'herbe sur Blender

Pré-requis: installation des plugins

Au moment où j’écris ces lignes, j’utilise la version 2.79b de Blender. Avant de modéliser nos brins d’herbes, nous avons besoin d’installer les trois plugins suivant:

  • UE4 Tools (Télécharger): cet excellent plugin optimise grandement le workflow entre Blender et Unreal Engine 4. Dans notre cas, nous allons principalement l’utiliser pour paramétrer les unités de Blender de manière à ce qu’elles correspondent à celles de UE4.
  • BS Modify Pivot (Télécharger): celui-ci nous permet de modifier simplement la position et l’orientation du pivot d’un mesh.
  • Pivot Painter (Télécharger): le plus important. A la base, l’outil pivot painter était un script développé exclusivement pour 3D Studio Max. Grâce à Gvgeo, nous pouvons avoir accès à cet équivalent Blender 🙂
Une fois les trois plugins téléchargés, il vous suffit de les installer sur Blender. Pour ce faire, cliquez sur File > User Preferences, puis rendez-vous dans l’onglet Add-ons. Ensuite, répétez les étapes suivantes pour chacun des plugins:
  1. Cliquez sur le bouton « Install Add-on from File… » situé en bas à gauche de la fenêtre.
  2. Dans l’explorateur de fichier qui s’ouvre, cherchez l’archive téléchargée ou le fichier portant l’extension .py situé dans le dossier téléchargé et cliquez encore une fois sur le bouton « Install Add-on from File… » situé cette fois-ci en haut à droite de la fenêtre. Si l’installation n’a pas fonctionné en choisissant une archive zip, tentez d’en extraire le contenu et choisissez cette fois-ci le fichier portant l’extension .py.
  3. Une fois le plugin installé, cochez la petite case située à côté du nom du plugin pour l’activer. Si ce n’est pas fait, vous ne pourrez pas l’utiliser dans Blender.
  4. Cliquez sur « Save User Settings » pour ne pas avoir à les réactiver lorsque vous créerez un nouveau projet Blender, puis fermez la fenêtre.
Modélisation 3D d'un brin d'herbe

Lorsque vous modélisez les brins d’herbe sur Blender, vous devez vous assurer de deux choses. Premièrement, le pivot de chaque brin doit se trouver à la base de ce dernier. Deuxièmement, l’axe X du pivot doit aller de la base du brin jusqu’à sa pointe. La position du pivot vous permettra de « planter » vos brins dans le sol pour qu’ils ne puissent pas bouger. L’axe X du pivot vous indiquera quant à lui l’orientation du brin dans l’espace. Ci-dessous vous trouverez les étapes à suivre pour modéliser les brins d’herbes. Attention, je pars du principe que vous avez déjà quelques notions de bases concernant Blender. Je risque donc de beaucoup trop survoler le processus pour certains d’entre vous.

  1. Ouvrez un nouveau projet Blender. Dans la partie gauche du viewport, cliquez sur UE4 Tools > Open UE4 Tools > Scene Tools > Set UE Scale. Cela vous permettra d’utiliser les centimètres comme unité de mesure afin d’éviter des problèmes de scale lorsque vous importerez vos brins d’herbe dans Unreal Engine 4. Ajoutez un plane dans votre scène.
  2. En Edit Mode, déplacez le plane le long de l’axe X de manière à ce que son pivot se trouve à la base du mesh et que son axe X pointe dans la bonne direction.
  3. Redimensionnez le plane de manière à ce qu’il ait une forme allongée puis ajoutez-y des loops (Ctrl+R). Dans mon cas j’en mets trois. 
  4. Passez en Edge Edit Mode et redimensionnez les arêtes du mesh de manière à obtenir la forme de brin d’herbe recherchée. 
  5. Toujours en Edge Edit Mode, activez le mode édition proportionnelle (touche O), sélectionnez un falloff de type sphère. Puis, sélectionnez l’arête horizontale du centre et déplacez la de manière à courber le brin d’herbe.
  6. Sélectionnez toutes les arêtes de votre brin (touche A) et faites Ctrl+N pour corriger l’orientation des normales des faces.Passez en Object Mode, sélectionnez le mesh, mettez le shading de ce dernier en smooth et appliquez-y une rotation de -90° autour de l’axe Y.
  7. Sélectionnez les arêtes situés à la surface du brins d’herbe et faites Ctrl+E > Mark Seam.
  8. Sélectionnez toutes les arêtes (touche A) puis faites U > Unwrap. Cette commande générera les UVs du mesh.
  9. Il ne vous reste plus qu’à arranger les UVs de manière à ce que la base du brin se situe en bas de la texture et la pointe en haut (voir image ci-contre).

La modélisation du brin d’herbe est terminée, mais avant de continuer, vérifiez bien que son pivot se situe bien à sa base et que son vecteur X pointe bien de sa base vers sa pointe. Si ce n’est pas le cas, je vous invite à utiliser le plugin BS Modify Pivot présenté en début de cet article pour corriger le problème. Cliquez ici pour voir un tutoriel vidéo expliquant comment l’utiliser.

Utilisation du plugin Pivot Painter

Afin d’ajouter de la variété dans votre foliage, vous allez dupliquer plusieurs fois votre brin d’herbe et faire en sorte que chaque copie de votre mesh ait sa propre orientation et sa propre taille. Une fois ceci fait, sélectionnez l’ensemble des brins (touche A) puis dans la partie gauche de votre viewport, sélectionnez l’onglet Unreal Tools pour ouvrir le plugin Pivot Painter.

  1. Décochez la case « Always create new texture » et cochez la case « Save Texture to folder » .
  2. Dans la partie « Save location » , choisissez le dossier dans lequel vous voulez sauvegarder les textures qui vont être générées par le plugin. Pour ma part j’ai choisi le même dossier que celui contenant mon fichier .blend.
  3. Toujours en ayant l’ensemble des brins sélectionnés, cliquez sur le bouton « Create Textures« . Vous verrez qu’une nouvelle map a été générée dans la liste de vos UV Maps en plus de celle crée plus tôt.
  4. Il ne nous reste plus qu’à exporter notre modèle! Cliquez sur File > Export > FBX et sélectionnez le dossier dans lequel vous voulez exporter votre modèle 3D. Et voila! 😀

Création du matérial sur Unreal Engine 4

Pré-requis: préparation du projet et importation des fichiers

Si vous avez bien suivi ce tutoriel depuis le début (ou si vous avez téléchargé l’archive proposée en début de cet article), vous devriez avoir dans un dossier trois fichiers dont les extensions sont: fbx, exr et png. Afin d’être sûr qu’on parle des mêmes fichiers dans la suite de ce tutoriel, je vous invite à renommer ces trois fichiers de la manière suivante:

  • Grass.fbx : ce fichier représente l’ensemble des brins d’herbes créés plus tôt.
  • PivotPointsLocations.exr : celui-ci a été créé par le plugin Pivot Painter et stocke la position des pivots de chacun des brins d’herbe.
  • XAxisXExtent.png : et ce dernier contient l’ensemble des vecteurs X pointant de la base des brins vers leurs pointes.
Une fois les fichiers renommés, vous pouvez commencer à préparer votre projet Unreal Engine 4. Pour ce faire, suivez les étapes suivantes:
  1. Lancez UE4 et créez un nouveau projet blueprint Third Person Template.
  2. Dans votre dossier Content, créez un dossier Grass et importez-y votre fichier Grass.fbx en le glissant-déposant dans l’éditeur. Dans la fenêtre « FBX Import Options » qui s’affiche, assurez-vous de cocher la case « Combine Meshes » située dans la catégorie Mesh et décochez les cases « Import Materials » et « Import Textures » dans la catégorie Material. Cliquez ensuite sur Import.
  3.  Toujours dans le dossier Grass, glissez-déposez les fichiers PivotPointsLocations.exr et XAxisXExtent.png. Ouvrez la texture PivotPointsLocations et dans la catégorie Texture, mettez l’attribut Filter à Nearest. Ouvrez ensuite la texture XAxisXExtent, mettez également le Filter à Nearest, puis dans la catégorie Compression mettez l’attribut « Compression Settings » à « VectorDisplacementmap (RGBA8)« . Enfin, sélectionnez l’option World pour l’attribut « Texture Group » dans la catégorie « Level Of Detail« .
Communication entre le joueur et le material

C’est l’heure de passer aux choses sérieuses! Pour que votre foliage puisse prendre en compte les mouvements du joueur, créez un Material Parameter Collection (Add New > Materials and Textures > Material Parameter Collection) et nommez le MPC_Grass. Durant l’exécution de votre jeu, ce dernier va permettre au joueur de communiquer au material sa position dans l’espace pour que le foliage réagisse correctement en se courbant à son passage. Ouvrez MPC_Grass et ajoutez-y un « vector parameter » que vous allez nommer PlayerLocation. Sauvegardez votre fichier puis fermez-le.

Ouvrez le ThirdPersonCharacter puis dans l’EventGraph ajoutez les noeuds suivants à son Event Tick. Ces noeuds vont faire en sorte que le ThirdPersonCharacter communique constamment sa position actuelle au Material Parameter Collection.

Création du material

Etape 1. Dans le dossier Grass, créez un material et nommez-le M_Grass. Ouvrez ce dernier, sélectionnez le noeud central (celui sur lequel il y a écrit M_Grass) et dans le panneau détail situé à gauche changez les paramètres suivants:

  • Dans la catégorie Material, mettez l’attribut « Shading Model » à « Two Sided Foliage » et cochez la case « Two Sided« .
  • Dans la catégorie Usage, cochez les cases « Used with Instanced Static Meshes » et « Used with Static Lighting« .
Etape 2. Une fois les paramètres initialisés correctement, vous pouvez commencer à implémenter le material. Modifiez le code de votre material afin de correspondre au code ci-dessous. Ce dernier permet de paramétrer les attributs de couleur de vos brins d’herbe.

Etape 3. Une fois la couleur du matérial paramétrée, vous allez implémenter le code permettant de faire courber les brins d’herbe au passage du joueur. Pour ce faire recopiez le code ci-dessous dans votre material. La sortie du noeud RotateAboutAxis sera connectée dans l’une des étapes suivantes.

Etape 4. Maintenant recopiez le code ci-dessous dans votre material. Comme il est expliqué dans les commentaires, ce code permet de calculer la courbure des brins d’herbe en fonction du vent.Tout comme le code présenté à l’étape précédente, la sortie du nœud RotateAboutAxis sera connectée à un autre morceau de code dans une étape suivante.

Etape 5. Il est maintenant temps de finaliser votre material. Pour ce faire, connectez les noeuds RotateAboutAxis des étapes 3 et 4 aux entrées A et B du noeud Add présenté dans le code ci-dessous. Puis reliez la sortie du code ci-dessous à l’entrée « World Position Offset » du noeud principal du material. Le code ci-dessous permet de créer un motion mask qui va « planter » l’herbe dans le sol et ne fera bouger que les pointes des brins d’herbe, donnant ainsi cet effet de mouvement réaliste.

Etape 6. Le code du material est enfin terminé, il ne vous reste plus qu’à l’appliquer, le sauvegarder puis le fermer.

Création du foliage et application au level

Cette partie est la plus simple de tout ce tutoriel. En effet, il ne vous reste plus qu’à paramétrer votre foliage pour pouvoir le placer dans votre level. Pour ce faire, suivez le guide 🙂

Etape 1. Faites un clic droit sur votre material M_Grass, puis sélectionnez l’option « Create Material Instance« . Donnez au material instance qui est créé le nom MI_Grass puis sauvegardez.

Etape 2. Ouvrez votre mesh S_Grass et appliquez-y le material instance fraîchement créé (attribut « Element 0 » dans la catégorie « Material Slots« ). Sauvegardez et fermez le fichier.

Etape 3. Dans la partie gauche du level editor, sous l’onglet Modes, sélectionnez le bouton foliage (celui en forme de branche avec des feuilles). Vous devriez voir une zone dans laquelle il y a écrit « Drop Foliage Here« . Déposez-y votre mesh S_Grass.

Etape 4. Sélectionnez votre foliage et vous pouvez commencer à peindre dans votre level. Si vous trouvez qu’il n’y a pas suffisamment de brins d’herbes qui sont créés lors du passage de votre pinceau, vous pouvez augmenter l’attribut « Density / 1Kuu » dans le panneau details de votre foliage.

Etape 5. Il ne vous reste plus qu’à lancer un Build de vos lumières pour finaliser le rendu 🙂

Que font les paramètres du Material Instance?

Avant de terminer ce tutoriel, et pour que vous puissiez paramétrer correctement votre material en fonction de vos besoins, nous allons faire un point sur l’ensemble de ses paramètres.

  • Bottom Color: couleur de la base des brins d’herbes.
  • Top Color: couleur de la pointe des brins d’herbes.
  • Base Color Factor: permet d’éclaircir ou d’assombrir les deux couleurs ci-dessus.
  • Opacity: opacité des brins d’herbes.
  • Subsurface Color: couleur renvoyée par l’intérieure des brins.
  • Subsurface Color Factor: permet d’éclaircir ou d’assombrir la couleur ci-dessus.
  •  X Axis Texture: texture générée par le plugin Pivot Painter référençant les vecteurs X des brins.
  • Pivot Points Locations: texture générée par le plugin Pivot Painter référençant la position des pivots des brins.
  • Sphere Mask Radius: définie la distance minimale qu’il doit y avoir entre le joueur et un brin pour que ce dernier commence à se courber.
  • Rotation Intensity: l’intensité de la courbure d’un brin lorsque le joueur le traverse.
  • Wind Direction: couleur représentant le vecteur direction du vent (R pour X, G pour Y, B pour Z).
  • Wind Grid Resolution: ajoute plus ou moins de bruit dans le vent pour que les brins ne bougent pas de manière synchronisée.
  • Wind Time Speed: durée de l’intervalle entre deux coups de vents.
  • Wind Intensity: force du vent.
  • Motion Mask Size: définie dans un brin les zones qui peuvent se courber. Pour une valeur de 64 par exemple, le pivot du brin ne bougera pas et plus on s’éloignera de ce dernier, plus le brin se courbera, avec une courbure maximale à partir d’une distance de 64 unités par rapport au pivot.

Conclusion

C’est tout pour aujourd’hui! 🙂 J’espère sincèrement que ce looong tutoriel vous aura apporté des compétences utiles. Si vous aimez ce que je propose, n’hésitez pas à partager mon article sur les réseaux sociaux. Sachez-aussi que je tiens une chaîne YouTube sur laquelle je tente de poster un nouveau tuto vidéo toutes les deux semaines environs. Je vous mets ci-dessous une petite bannière présentant la chaîne et ses vidéos.

Posted in Unreal Engine and tagged , .

2 Comments

  1. That is very fascinating, You are a very professional blogger.
    I have joined your feed and sit up for in search of more of your wonderful post.
    Also, I’ve shared your web site in my social networks

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *