Comment rendre ses textures réaliste avec des “Normal Map” facilement ?

Game Development, Non classéNo Comments

You Are Here:, Non classéComment rendre ses textures réaliste avec des “Normal Map” facilement ?

Le nombre de personne qui veulent crée des jeux-vidéo ne cesse d’augmenter, ainsi que le nombre de gens qui jouent aux jeux-vidéo. Et le public devient de plus en plus exigeant en ce qui concerne la beauté des graphismes. La plupart des gamer veulent un jeux qui sois à la fois fluide et jolie à regarder, et ce que j’ai pus remarquer durant toutes ces année c’est que les textures réalistes ne sont pas les plus belles. En effet, en 2017 il y a des jeux qui ont énormément marché avec des texture style cartoon, je veux bien-sur parler de Overwatch et Fortnite (même si overwatch date de 2016), ou même Paladins. Et je pense que tu ne me dira pas le contraire si je te dit que ces jeux sont beau graphiquement parlant et c’est normal car c’est simple. Et comme dirais Steve Jobs :

“C’est un de mes mantras – focus et simplicité. La simplicité peut être plus difficile à atteindre que la complexité : il faut travailler dur pour bien penser et faire simple. Mais cela vaut le coup à la fin parce qu’une fois que tu y arrives, tu peux déplacer des montagnes”.

Mais la n’est pas le sujet de l’article, puisque aujourd’hui je vais non pas t’apprendre à faire des graphisme style cartoon, mais bel et bien t’apprendre à donner plus de réalisme à tes texture. Je tiens à préciser que même si je parle beaucoup de jeux-vidéo, cet article ne s’adresse pas uniquement au créateur de jeux-vidéo. Mais aussi à ceux qui veulent faire ce qu’on appelle du “bump-mapping” sur Blender, ou texturer des objets ou décors sur des logiciels de modélisation. Peu importe ce que tu feras avec les normal map, l’important c’est que tu arrive à en faire très facilement. Et pour en crée on ne va pas utiliser Photoshop comme tout le monde, mais Smart-Normal qui est 100 fois plus rapide d’utilisation et beaucoup plus simple, sans rien télécharger ! Et en plus de t’apprendre à crée une normal-map, je vais t’apprendre à le mettre dans Unreal Engine 4.

 

Pour suivre cet espèce de cours pratique, il ne te faut aucun prérequis, il n’y a rien à savoir pour faire des normal-map (surtout avec la technique que je vais te montrer) et rien n’a télécharger ce qui doit surement te rassurer, car personnellement quand on me demande de télécharger un vieux logiciel très louche, je suis méfiant et je me demande ce que veux me faire télécharger ce mec la 😀 Bref, il faut tout de même que tu es un projet sur lequel mettre ton normal-map ta, tes fin je sais pas comment on dit sa en français, car ce terme “normal-map” est Anglais ! Et je vais t’apprendre à l’incorporer dans le logiciel Unreal Engine 4 pour ton jeux-vidéo, si tu utilise un autre logiciel tu devras te débrouiller tout seule. Mais la partie sur Unreal n’est que du bonus, par conséquent si sa ne va pas vraiment en profondeur c’est volontaire car le sujet de l’article n’est pas sa ! Ceci étant dit on va pouvoir commencer la pratique!

 

C’est  quoi une Normal-Map ?

C’est normal de ne pas savoir ce qu’est une normal-map (je voulais absolument la mettre désolé :p). Non plus sérieusement, lorsque l’on cherche à améliorer le rendu d’une texture il existe plusieurs autre texture à rajouter comme la Normal-Map, Bump-Map, Relief Normal-Map, Relief Normal Map, il doit en exister d’autre mais je connais que ceux la. Je ne vais pas te parler de leur différence, ni comment tous les réaliser, mais si tu est curieux regarde sa.

 

Pour en revenir à la normal-map, comme j’ai pus le dire c’est une texture, mais une texture qui sert à donner du relief à une surface plane. Elle est en bleu clair avec des teintes bleu foncé/rouge/vert. Chacune de ces 3 teinte définie la façon dont la lumière réfléchira à cet endroit, autrement dit la façon dont le relief sera géré. La Normal-Map enregistre la direction des normales (orientation des faces d’un objet). Ce qui permet d’avoir un rendu beaucoup plus précis, surtout lorsque l’on fait de l’animation ou un jeux-vidéo. Et enfin, il faut s’avoir qu’elle s’allume plus ou moins en fonction de l’inclinaison des polygones en fonction de la lumière émise.

 

C’est quoi Smart-Normal ?

Déjà non Smart-Normal, n’est pas une sorte de texture style bump-map ou normal-map, mais bel et bien le site que l’on va utiliser pour crée nos Normal-Map. Je ne sais pas quel est le nom des développeurs de ce site, mais je sais qu’ils ont un blog : Smart-Page.net. Le site Smart-Normal est actuellement dans sa version 2.0 et utilise la technologie WebGL, si tu ne sais pas ce que sais et bien disons que c’est la 3D de internet ! Avant sa ils utilisaient Flash Player, la version 1.0 est d’ailleurs toujours disponible depuis les paramètre de la version 2.0. Bref, ce site va te permettre d’importer une texture, de générer la normal-map, de la modifier et enfin de l’enregistrer tout sa en un temps record ! C’est pas Génial ?! :O Cependant, puisqu’il est totalement gratuit je ne serais pas te dire s’il est fiable ou non, certes au premier abord les normal paraissent parfaite. Mais je suis sur que si on les compares à des normal-map faite avec le plug-in nvidia pour Photoshop, au sculpt de Blender ou à ZBrush, le résultat ne sera surement pas le même. Personnellement je vais utiliser ce site un bon moment, mais je t’invite à te faire ton propre avis et à ne pas te limité à un seule logiciel !

 

Comment crée une Normal-Map ?

Je vais essayer de t’expliquer le mieux que je peux comment utiliser ce site, même s’il est très simple d’utilisation il y a tout de même certaine fonctionnalité que tu te dois de connaître ! Pour commencer il faut que tu ouvre le site Smart-Normal 2.0, l’interface devrais normalement ressembler à sa. Ensuite tu n’a plus qu’à cliquer sur “Load” pour importer ta texture !

 

Après l’avoir importer tu peux remarquer qu’il y a des options à droite. Tu n’a besoin de toucher que au “Invert R” et au “Invert G” , le reste nous est inutile, mais tu peux t’amuser à les modifier pour voir l’effet produit.

  • L’Invert R va te permettre d’inverser ce qu’on pourrais comparer à l’axe des X, et ainsi pouvoir rendre ta Normal-Map plus cohérente avec la texture de base !
  • L’Invert G va te permettre d’inverser la profondeur, au lieu que sa ressorte les fissures, en cochant la case sa va les rentrer et ainsi donner un effet de profondeur !

Si tu ne comprend pas bien leur utilité et bien j’ai un très bon exemple à te donner, notamment pour “l’Invert G“. Ici j’ai choisi une texture de lave (comme tu peut le voir ci-dessous), je ne veut donc pas que ma lave sorte et sois donc plus haut que la roche (sa rendrais la texture bizarre et pas logique).

 

Et c’est justement en utilisant l’optionInvert G” que je peux faire rentrer ma lave et ainsi crée un effet de profondeur ! J’espère que cet exemple ta convaincu, tu peux comparer (ci-dessous) la différence entre la lave sortit (à droite) et la lave rentrée (à gauche).

 

Après avoir configurer ce qui devais être ou configurer même si tu n’as eu rien besoin de faire, tu va pouvoir désormais cliquer sur “Save” pour sauvegarder ta Normal-Map ! Et tu as fini, c’était simple non ?! Sauf si tu veux l’incorporer dans Unreal Engine 4 car tu dois suivre le tuto suivant, dans le cas contraire tu peux quitter cet article sans oublier de donner ton avis et partager. Je sais que tu vas le faire car tu es un Outsider ! Bref passons à la suite !

 

Comment l’appliquer à une texture dans Unreal Engine 4 ?

Ce n’est pas compliqué et sa va être rapide parce que je vais partir du principe que tu maîtrise déjà Unreal Engine 4, par conséquent je vais directement parler de la mise en place de la texture. Tu va commencer par crée un matériaux, en faisant clique droit, puis Material.

 

Ensuite, tu peux l’ouvrir et glisser ta texture de base ainsi que ta normal map.

 

Sache qu’il est possible d’importer plusieurs textures et de les relier grâce à un “Layer Blend” mais je en vais pas t’apprendre à le faire désolé. Après les avoir importées, tu va tout simplement mettre le “node” (nœud en français, qui correspond à un trait sur Ue4) de ta texture de base sur “Base Color” et de mettre le “node” de ta normal map sur “Normal“.

 

Et voilà tu sais comment mettre la Normal-Map sur une texture Unreal, cependant comme je te l’ai dit je ne t’apprend pas comment l’utiliser ou comment mettre plusieurs textures dans un même matériaux. Tu devras faire tes propres recherches pour sa !

 

Je pense que si tu as bien suivi cet article et que tu sais comment mettre une normal-map à une texture que tu doit être content du résultat. Cependant, comme j’ai pus te le dire le site utilisé dans cet article est gratuit il se peut donc qu’il n’équivaut pas à Photoshop ou le sculpt de Blender ou zBrush. A toi de te faire ton propre avis sur son efficacité, mais il est tout de même gratuit, rapide et simple d’utilisation, ce qui n’est pas négligeable. Je tiens aussi à te dire que ce tuto peut être obsolète à l’heure ou tu le lis, je te demande donc de bien vouloir me le signaler si c’est le cas, merci ! Dans tout les cas j’arrête cet article ici ! Mais je voudrais savoir si cet article ta été utile ou du moins ta plus, n’hésite pas à me donner ton avis en commentaire ou sur mes réseaux sociaux ! Aller bonne apprentissage jeune Outsider !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top