Outils du site

fr:tuto_creer_des_textures_dessinees_pour_des_batiments

Créer des textures dessinées pour des bâtiments

La méthode que je présente est du type de celle expliquée en détail par Jamin Shoulet dans son atelier dans la School of Game Design en 2012. La grosse différence vient du fait que je l'ai adaptée pour Gimp (dont les calques et groupes de calques ne fonctionnent pas comme Photoshop, du moins pas tant que GEGL n'aura pas fini d'être intégré).
Pour le reste, vous pouvez vous faire votre propre idée en regardant la vidéo en ligne disponible à cette adresse (ainsi que la suivante), pour une durée totale d'environ quatre heures.

Il y explique de façon abordable et détaillée la technique du dessin de texture. Selon lui, le principe en est simple, on part d'une couleur de base qu'on modèle à l'aide des ombres et des lumières (rien que de très classique donc). Ce qui est lumineux a tendance à être perçu comme plus proche et ce qui est sombre comme plus éloigné. On peut donc simuler de la profondeur avec une simple texture Diffuse (si vous êtes néophyte avec les différents types de textures de base en imagerie 3D? vous avez une présentation simple et rapide - en anglais- sur cette page).
L'autre grand principe est le travail non destructif, en s'appuyant sur un très grand nombre de calques (en mode Écran et Multiplier pour l'essentiel) et de dossiers de calques pour tout organiser. Ce dernier point est essentiel pour nous car pour l'heure si NeL ne supporte pas le Normal Mapping, cela peut changer à l'avenir et avoir les images originelles sans relief permettra de recréer si nous le souhaitons des textures Diffuses plates sur lesquelles viendront se développer des textures Bump (que nous pourrons recréer avec nos calques “Écran”/“Multiplier” assez aisément) pour la mise en relief, qui sera alors dynamique avec la lumière.

Le tutoriel vise donc à proposer une approche basique pour réaliser des textures Diffuse dessinées, qui sont vouées à être utilisées éventuellement en conjonction avec un peu d'effet Gloss, sans Normal Mapping ni Ambiant Occlusion, comme le sont les textures originellement prévues par NeL, le moteur 3D de notre jeu. Avec le développement d'un nouveau driver OpenGL lors du GSoC 2013 (Programmable Shader Pipeline sur le site de Ryzom Core), il est possible que des shaders plus évolués fassent leur apparition mais pour l'heure, nous devons nous en tenir à ce que NeL sait afficher.
Par ailleurs, nous avons souhaité conserver le style graphique que nous avons aimé dans Ryzom, le jeu pour lequel NeL a été développé, et qui s'appuie sur le même moteur que Khanat, Ryzom Core. Nous ne sommes donc pas dans une optique de réalisme photographique, comme dans beaucoup de jeux dernière génération.

Remarques
Tous les noms de calque sont en anglais, sans majuscules. C'est une convention de nommage pour Khanat, de façon à faciliter les échanges internationaux des données de jeu.
N'étant pas graphiste, je ne prétends pas proposer les exemples les plus aboutis et parfaits issus de cette technique. Ce sont avant tout des illustrations destinées à rendre plus compréhensible mes explications, en attendant d'avoir des choses plus abouties à vous présenter. Néanmoins, l'avantage de mes productions, c'est qu'elles sont entièrement libres.
Je pars du principe que vous connaissez les bases de l'utilisation de Gimp (les outils, l'utilisation des calques) et que vous avez des notions sur le texturage d'objets 3D. Dans le cas contraire, n'hésitez pas à éditer cette page et à ajouter des liens vers des tutoriels complémentaires.

Texture de base

Créer le fond de référence de la texture

Créer le fichier

Créer un fichier de 2048×2048 pixels, RVB.
Le choix de travailler sur une dalle de grande taille est volontaire. Au final en jeu, la texture ne sera qu'en 1024×1024 voire 512×512 mais autant prévoir pour l'avenir et également se permettre un peu de souplesse si on veut faire des rendus dans Blender pour de l'illustration. Qui peut le plus…

Préparer sa grille pour faciliter l'organisation

Aller dans Menu Image > Configurer la Grille.
Configurer la grille pour qu'elle ait un nombre suffisant de carreaux pour éventuellement placer des traits sans qu'ils soient gênants.
Pour du 2048x 2048, je conseille de faire tous les 256 pixels.
Configurez le style de ligne qui vous convient, ainsi que la couleur que vous préférez. Pour la faire apparaître/disparaître faites Menu Affichage > Afficher la grille

Sauvegarder

Sauvegarder le fichier à son emplacement dans la partie “sources” des données graphiques (ne pas oublier de le faire régulèrement).

Organiser les calques

On va placer notre premier travail dans un Dossier de calques “base color group” qui contiendra toutes les informations de couleur de base.

Créer un calque coloré

Créer un calque “color” et le remplir de la couleur de base de sa texture, au choix.

Créer un calque d'effets

Créer un calque par-dessus, rempli de noir et le nommer “surface”.

Appliquer à ce calque le filtre Filtres > Rendu > Nuages > Nuages par différence
Choisir comme réglages les paramètres que l'on désire, seul importe de cocher “Raccordable” pour pouvoir ensuite utiliser la texture pour des surfaces contigües sans que les joints soient visibles.
Appliquer plusieurs fois le filtre en changeant à chaque fois le paramètre “Germe aléatoire” car sinon cela annule le filtre “Nuages par différence” précédent. Continuer jusqu'à obtenir une surface avec des variations qu'on estime visuellement attrayantes. L'idée est d'obtenir des variations de teinte assez nombreuses pour avoir des informations de couleur variées pour travailler dessus.
Dans les Calques, aller sur le mode du calque “surface” et le passer en “Multiplier”
Baisser l'Opacité du calque “surface” pour obtenir quelque chose de pas trop contrasté, seulement des variations de teinte dans notre couleur de base (dans les 20% en général).

Calques d'ombres et de lumière

Créer deux nouveaux calques : un appelé “screen”, avec le mode “écran” et un autre “multiply” avec le mode “multiplier”. Les calques “screen” sont, de façon générale toujours au-dessus des calques “multiply” au sein d'un même groupe.

Préparer les couleurs de travail

Récupérer la couleur moyenne de son image avec l'outil pipette, avec une sélection large dans “Moyenne du voisinage”, de l'ordre de 20/30.
L'attribuer à la couleur d'arrière-plan et de premier plan.
Vérifier que “Échantillonner sur tous les calques” est coché.
Éclaircir la couleur de premier plan et foncer celle d'arrière-plan.

Définir l'éclairage de référence

Se fixer un angle d'arrivée de la lumière sur son image. Par convention, on choisira l'angle supérieur gauche dans le projet Khanat. Il conviendra donc de foncer les zones qui ne reçoivent pas de lumière depuis cet endroit et d'éclaircir celles qui en reçoivent.

Dessiner les ombres

Retravailler les parties sombres de l'image de base dans le calque “multiply” avec la couleur d'arrière-plan. Ne pas hésiter à jouer sur l'opacité des outils et du calque. La brosse sélectionnées par Jamin Shoulet est plutôt grosse, avec des bords diffus, un peu de Fluctuation. On peut jouer aussi avec la pression de son stylet. Il n'y a pas vraiment de règle, à chacun sa façon de faire.

Éclairer

Retravailler les parties claires de l'image de base dans le calque “screen” avec la couleur de premier plan.
Ne pas hésiter à jouer sur l'opacité des outils et du calque.
Benjamin Shoulet se sert d'une brosse plus petite, avec des bords plus francs.

Faire un second calque “screen 2” avec un mode “écran” et retravailler les zones les plus claires pour les surligner d'une brosse encore plus fine.

Ajouter des détails

Selon le type de texture, on peut ajouter des détails du type fissures, craquelures. Il suffit de tracer des traits fins dans un nouveau calque “multiply 2” (mode “Multiplier”) en suivant des zones ombrées et de les surligner d'un trait clair au desus et à gauche dans le calque screen 2. Plus deux zones proches et fines sont contrastées, plus la différence de relief est forte et accentue l'impression de 3D.

Assembler en un calque le résultat

Une fois que cette texture de base est suffisamment détaillée, et qu'elle semble achevée, on va la figer en copiant tous ces calques dans un nouveau calque. Dans la Fenêtre Calques : Faire clic droit > Nouveau depuis le visible. Renommer ce nouveau calque “base color”.

Vérifier les bords pour une texture jointive

Si on l'a beaucoup modifié, il peut être bon de vérifier qu'elle peut toujours être répliquée sans joint visible.
Aller dans Calque > Tranformer > Décalage
Là, choisir “Décalage de x/2,y/2” et “Reboucler” pour “Comportement sur les bords”. Si aucune couture n’apparaît au centre, c'est parfait, dans le cas contraire, utiliser l'outil Tampon pour effacer les traits.
Une fois l'opération effectuée, refaire de nouveau Calque > Tranformer > Décalage ; “Décalage de x/2,y/2” et “Reboucler” pour “Comportement sur les bords” pour retrouver la même texture que précédemment, cette fois-ci en étant certain qu'elle est répétable.

Finaliser le groupe de calques

Placer ce calque tout en haut du groupe et le nommer du nom du groupe plus “final”, soit “base color final” dans notre cas.

Dessiner des motifs sur le matériau de base

Selon la destination de notre texture, imaginons qu'elle soit destinée à la base des murs, avec une zone de frise à son sommet. Cet partie peut permettre la jonction avec une nouvelle texture, distincte, qui ne se raccorde pas ou être juste au dessous de ce même matériau.

Créer un nouveau groupe de calques

Créer un nouveau groupe de calque “lizard border”, y placer tout en bas le calque où nous avons copié la texture de base.

Créer de nouveau les calques d'ombres et de lumières

Créer dans ce groupe un calque “lizard border mult1” en mode “mutliplier” et un autre “lizard border screen 1” en mode “écran”. Ne pas oublier de créer de l'occlusion dans les larges zones qui s'enfoncent, de façon à bien rendre cette dépression et le déficit d'éclairage qui en découle dans les angles.
Poser les larges parties claires dans “lizard border screen1”

Apposer des détails

Affiner dans des calques “écran” et “multiplier” pour ajouter de la définition, des détails (craquelures etc.) comme pour notre texture de base

Multiplier les modifications

On peut imaginer que, vu que cette texture va être posée au sol, elle a été salie en bas, avec des remontées d'humidité. Ajouter un nouveau groupe de calque “bottom humidity”, avec un calque “bottom humidity mult1” en mode “multiplier” et un autre “bottom humidity screen1” en mode “écran”. Là encore, faire les retouches alternativement dans ces calques avec une couleur claire et une autre foncée. On pourra sélectionner cette fois des couleurs plus vertes, pour bien marquer le côté mousseux des remontées d'humidité. Ne pas hésiter à faire des essais , des réglages et à multiplier les calques “écran”/“multiplier” pour avoir un contrôle très fin sur le rendu final.

À chaque fois que vous estimez avoir achevé un groupe de calque, veillez à en faire une copie que vous mettrez en haut du groupe, avec tous les calques visibles copiés/écrasés dans un nouveau. Vous vérifierez alors que la texture est toujours répétable selon l'axe que vous souhaitez, vertical ou horizontal) grâce à un décalage X/2 et/ou Y/2.

Combiner les modifications

Si vous souhaitez combiner deux effets, il vous suffit de copier les calques nécessaires dans un nouveau groupe de calque et de les organiser pour obtenir l'effet désiré, en veillant à la fin à bien finaliser un calque supérieur. Dans notre exemple, c'est “bottom humidity lizard border final” qui combine les deux.

On peut ensuite fabriquer tout un ensemble de textures qui s'emboîtent bien les unes aux autres. Dans notre exemple, une ouverture de porte avec la frise qui en fait le tour, une fenêtre ou un simple soupirail, une niche pour une statue ou un petit décor, des modillons pour le haut de la façade. Et ensuite, chaque élément peut se combiner aux autres. On peut également reprendre chacun d'eux et ensuite les transporter sur une nouvelle “base color”, en changeant par exemple les couleurs des calques “écran” et “multiplier” (par un réglage du menu Couleur > Teintes/saturation ) pour que cela ne jure pas.

fr/tuto_creer_des_textures_dessinees_pour_des_batiments.txt · Dernière modification: 2016/09/14 06:51 (modification externe)