Créer/modifier des textures (.dds) simplement
Posté : 21 août 2011, 09:20
A besoin d'être mis à jour pour simplifier quelques trucs !
/!\ Ce tutoriel est général, je l'ai mis dans la section Atelier de Fallout, mais il aurait tout aussi bien trouvé sa place à la Forge. Je suis en train de réaliser une version .pdf.
Pour les flemmards, la démarche globale est résumée à l’Étape n°6
Prérequis :
- un logiciel capable d'ouvrir et d'enregistrer les .dds - ici Paint.NET
- un logiciel de retouche un peu plus élaboré afin de créer les reliefs - ici Gimp, notamment avec ce plugin
- connaitre un peu Gimp, sous peine de ramer la première fois
Ces logiciels sont libres d'utilisation !
Introduction :
Une texture se compose toujours d'au moins deux fichiers : un fichier (nomdelatexture).dds, qui contient les informations sur les couleurs (color-map), et un fichier (nomdelatexture)_n.dds appelé normal map, qui contient les informations sur le "relief" de la texture et permet de simuler un effet 3D. Quelques informations sur les textures utilisées par Bethesda : https://cs.elderscrolls.com/index.php?title=DDS_Files
Afin d'être sûr de la compatibilité de vos textures, partez d'un modèle existant, à moins que vous n'ayez généré vos propres meshes, mais là on ne joue plus dans la même cour, et de toutes façons il me semble que les outils de modélisation intègre la gestion des textures
Pour illustrer ce tutoriel, j'ai choisi de modifier légèrement le Pipboy 3000 de Fallout 3, pour en faire un "Pipboy 3000 modèle Translator +". Pour faire un Pipboy Translator +, il faut :
- les fichiers pipboyarm01.dds et pipboyarm01_n.dds
- un symbole représentatif du terme "Translator", à savoir :
Pour coller un peu plus avec le style de Fallout, j'ai choisi de le "vieillir" un peu :
Pas d'inquiétudes à avoir pour le contour "baveux", car il sera nécessaire de réduire sérieusement l'image pour l'intégrer au Pipboy
Je ne m'attarde pas sur la méthode pour obtenir les .dds concernés, ni sur la manière de modifier l'image (avec Gimp), le but n'est pas de monter son Pipboy pas-à-pas, mais d'apporter une méthode générale de retouche ou création. De toute façon l'interface Pipboy sera proposée à l'upload sur le site d'ici peu
Etape n°1 - J'ai mon .dds, qu'est-ce que j'en fais !?
On l'ouvre ! Pour cela il existe différents logiciels (DDS converter, utilitaire Nvidia, plungins Gimp/Photoshop). Pour ma part j'ai choisi d'utiliser Paint.NET, car je n'ai rien pu tirer de DDS converter, et le plugin pour les .dds de Gimp ne permettait pas d'ouvrir le .dds sur un seul calque (mais en 6, pour pouvoir simuler par la suite le placement sur un cube).
Avec Paint.NET c'est simple, vous faites un glisser-déposer du fichier dans la fenêtre principale, et vous obtenez par exemple ceci :
L'agencement peu laisser songeur aux premiers abords 
Paint.NET nous a ouvert notre fichier .dds. On peut le modifier directement, ou alors l'exporter dans un format que Gimp reconnaitra. Par exemple en .png. Il faudra de toute manière, utiliser Gimp pour créer la normal-map, donc autant s'y coller tout de suite.
Etape n°2 - J'ai ouvert ma texture après conversion, c'est super je vais pouvoir la modifier !
La modification en elle-même dépend de votre sens créatif
Voici tout de même celles appliquées au Pipboy, une légère retouche pour débuter :
Faites vos modifications et enregistrez !
Etape n°3 - On n'avait pas parlé de normal-map à un moment ?
Si ! Nous allons la générer avec Gimp et son plugin cité dans les prérequis. Votre image enregistrée, et fusionnée en un seul calque, lancez Normalmap (sur mon installation, se trouve dans Filtres\Mappage\Normalmap
Une boîte de dialogue vous permet de choisir la profondeur et d'appliquer différents filtres et réglages de profondeur :
"Si l'on tente de visualiser directement une normal-map à l'aide d'un simple viewer d'image, chaque texel sera interprété comme une couleur RGB. Cela signifie que la coordonnée X du vecteur normal sera lue comme la composante R (rouge) de la couleur, Y sera lue comme la composante G (vert) et enfin la coordonnée Z sera assimilée à la composante B (bleu). [...] La normal-map représentant la surface de l'objet, [...] la plus grande partie des vecteurs normaux aura la coordonnée Z très supérieure aux deux autres X et Y. Z étant interprété comme la composante bleue de la couleur, la normal-map sera globalement bleuté."
(Source)
Et effectivement, c'est bleuté !
Note : dans le cas présent, ma normal-map diffère beaucoup de l'originale et j'obtiens une perte de relief sur certains éléments sur le rendu en jeu.
Une fois votre normal-map générée, enregistrez-la de la même manière que votre color-map, dans un format d'image sans trop de perte (par exemple .png ou .bmp). Compressez tout de même un peu, pour ne pas faire tripler inutilement la taille des fichiers !
Note : ce que je n'ai pas fait ... les textures font maintenant presque 2 Mo. Dans le cas du Pipboy ce n'est pas vraiment important, mais imaginez en jeu les pertes de performances que cela pourrait entrainer sur des textures extérieurs.
Etape n°4 - Image deviendra texture ... grâce à Paint.NET
Une fois vos deux images enregistrées, ouvrez-les avec Paint.NET, et sauvegardez-les en .dds. Rajoutez _n au nom de la normal-map pour uniformiser avec toutes les normal-map : (nomdelatexture)_n.dds. Pour les paramètres d'export, utilisez ceux conseillés/utilisés par Bethesda (http://cs.elderscrolls.com/constwiki/in ... /DDS_Files)
Etape n°5 - C'est fini !
Il ne vous reste plus qu'à remplacer les textures, ou les intégrer dans un mod de votre conception !
Pour le rendu de mon Pipboy Translator en jeu :
On a perdu en profondeur à certains endroits, mais je préfère ma version pour le "grain" et la brillance plus réaliste qu'elle apporte à la texture "acier" du Pipboy
Cette comparaison met assez bien en évidence l'importance de la normal-map.
Etape n°6 - Concluons.
En résumé :
- j'ouvre mes .dds avec Paint.NET
- je les exporte dans un format image pour pouvoir les travailler plus facilement avec un logiciel dédié à la retouche
- je sauvegarde, je crée les normal-map - que je sauvegarde !
- je rouvre les images sauvegardées avec Paint.NET, et j'exporte en .dds
- je renomme la normal-map (nomdelatexture)_n.dds
- je remplace/intégre mes textures au jeu
- je regarde ce que ça donne, et m'extasie du résultat
Ce tutoriel est très certainement perfectible, car j'ai commencé à m'intéresser au bump-mapping il y a une semaine, et jusqu'à présent je n'ai modifié que deux ou trois textures ... N'hésitez-donc pas à compléter, si vous possédez d'autres utilitaires de retouche/export plus adaptés notamment. Pour plus de détails sur le bump mapping, je vous renvoie ici : http://www.ozone3d.net/tutorials/normal_map.php?lang=1
/!\ Ce tutoriel est général, je l'ai mis dans la section Atelier de Fallout, mais il aurait tout aussi bien trouvé sa place à la Forge. Je suis en train de réaliser une version .pdf.
Créer ou modifier des textures
Le but de ce tutoriel est d'apporter une solution simple pour modifier ou créer ses propres fichiers de textures (Fallout, TES). Je me suis inspiré de quelques tutoriels beaucoup plus pointus et poussés portant sur le bump-mapping, dont un en particulier (celui-ci). Pour les flemmards, la démarche globale est résumée à l’Étape n°6

Prérequis :
- un logiciel capable d'ouvrir et d'enregistrer les .dds - ici Paint.NET
- un logiciel de retouche un peu plus élaboré afin de créer les reliefs - ici Gimp, notamment avec ce plugin
- connaitre un peu Gimp, sous peine de ramer la première fois

Ces logiciels sont libres d'utilisation !
Introduction :
Une texture se compose toujours d'au moins deux fichiers : un fichier (nomdelatexture).dds, qui contient les informations sur les couleurs (color-map), et un fichier (nomdelatexture)_n.dds appelé normal map, qui contient les informations sur le "relief" de la texture et permet de simuler un effet 3D. Quelques informations sur les textures utilisées par Bethesda : https://cs.elderscrolls.com/index.php?title=DDS_Files
Afin d'être sûr de la compatibilité de vos textures, partez d'un modèle existant, à moins que vous n'ayez généré vos propres meshes, mais là on ne joue plus dans la même cour, et de toutes façons il me semble que les outils de modélisation intègre la gestion des textures

Pour illustrer ce tutoriel, j'ai choisi de modifier légèrement le Pipboy 3000 de Fallout 3, pour en faire un "Pipboy 3000 modèle Translator +". Pour faire un Pipboy Translator +, il faut :
- les fichiers pipboyarm01.dds et pipboyarm01_n.dds
- un symbole représentatif du terme "Translator", à savoir :
► Afficher le texte
► Afficher le texte

Je ne m'attarde pas sur la méthode pour obtenir les .dds concernés, ni sur la manière de modifier l'image (avec Gimp), le but n'est pas de monter son Pipboy pas-à-pas, mais d'apporter une méthode générale de retouche ou création. De toute façon l'interface Pipboy sera proposée à l'upload sur le site d'ici peu

Etape n°1 - J'ai mon .dds, qu'est-ce que j'en fais !?
On l'ouvre ! Pour cela il existe différents logiciels (DDS converter, utilitaire Nvidia, plungins Gimp/Photoshop). Pour ma part j'ai choisi d'utiliser Paint.NET, car je n'ai rien pu tirer de DDS converter, et le plugin pour les .dds de Gimp ne permettait pas d'ouvrir le .dds sur un seul calque (mais en 6, pour pouvoir simuler par la suite le placement sur un cube).
Avec Paint.NET c'est simple, vous faites un glisser-déposer du fichier dans la fenêtre principale, et vous obtenez par exemple ceci :
► Afficher le texte

Paint.NET nous a ouvert notre fichier .dds. On peut le modifier directement, ou alors l'exporter dans un format que Gimp reconnaitra. Par exemple en .png. Il faudra de toute manière, utiliser Gimp pour créer la normal-map, donc autant s'y coller tout de suite.

Etape n°2 - J'ai ouvert ma texture après conversion, c'est super je vais pouvoir la modifier !
La modification en elle-même dépend de votre sens créatif

Voici tout de même celles appliquées au Pipboy, une légère retouche pour débuter :
► Afficher le texte
Etape n°3 - On n'avait pas parlé de normal-map à un moment ?
Si ! Nous allons la générer avec Gimp et son plugin cité dans les prérequis. Votre image enregistrée, et fusionnée en un seul calque, lancez Normalmap (sur mon installation, se trouve dans Filtres\Mappage\Normalmap
Une boîte de dialogue vous permet de choisir la profondeur et d'appliquer différents filtres et réglages de profondeur :
► Afficher le texte
(Source)
Et effectivement, c'est bleuté !
► Afficher le texte
Une fois votre normal-map générée, enregistrez-la de la même manière que votre color-map, dans un format d'image sans trop de perte (par exemple .png ou .bmp). Compressez tout de même un peu, pour ne pas faire tripler inutilement la taille des fichiers !
Note : ce que je n'ai pas fait ... les textures font maintenant presque 2 Mo. Dans le cas du Pipboy ce n'est pas vraiment important, mais imaginez en jeu les pertes de performances que cela pourrait entrainer sur des textures extérieurs.

Etape n°4 - Image deviendra texture ... grâce à Paint.NET
Une fois vos deux images enregistrées, ouvrez-les avec Paint.NET, et sauvegardez-les en .dds. Rajoutez _n au nom de la normal-map pour uniformiser avec toutes les normal-map : (nomdelatexture)_n.dds. Pour les paramètres d'export, utilisez ceux conseillés/utilisés par Bethesda (http://cs.elderscrolls.com/constwiki/in ... /DDS_Files)
Etape n°5 - C'est fini !
Il ne vous reste plus qu'à remplacer les textures, ou les intégrer dans un mod de votre conception !
Pour le rendu de mon Pipboy Translator en jeu :
► Afficher le texte

Etape n°6 - Concluons.
En résumé :
- j'ouvre mes .dds avec Paint.NET
- je les exporte dans un format image pour pouvoir les travailler plus facilement avec un logiciel dédié à la retouche
- je sauvegarde, je crée les normal-map - que je sauvegarde !
- je rouvre les images sauvegardées avec Paint.NET, et j'exporte en .dds
- je renomme la normal-map (nomdelatexture)_n.dds
- je remplace/intégre mes textures au jeu
- je regarde ce que ça donne, et m'extasie du résultat

Ce tutoriel est très certainement perfectible, car j'ai commencé à m'intéresser au bump-mapping il y a une semaine, et jusqu'à présent je n'ai modifié que deux ou trois textures ... N'hésitez-donc pas à compléter, si vous possédez d'autres utilitaires de retouche/export plus adaptés notamment. Pour plus de détails sur le bump mapping, je vous renvoie ici : http://www.ozone3d.net/tutorials/normal_map.php?lang=1