Voir les différents jeux testés
Voir la liste des dossiers du site
Voir les liens de Bouledefeu.com

Gun Valkyrie

Phantasy star Online au pays des starship troopers, un voyage unique pour gamer authentique.

Le Cell Shading

Plateforme : Multi supports
Genre : Technique
Editeur :
Année : Années 2000
Article par : Shito
Dessin par : Gentil_g

 
Pourquoi, Comment, Hein?

Histoire de contribuer un (tout petit) peu à vous en apprendre un (tout petit) peu plus sur votre passion (mais si, ce truc là, le "jeu vidéo"), voici un bref topo sur le cell-shading, sa vie, son oeuvre.

Ne vous inquiétez pas, ça ne fera pas mal, ça piquera juste peut être un peu à un moment, mais ça passera vite. Et ensuite, mais ensuite mes amis, quel plaisir que de pouvoir briller en soirée sur un sujet comme celui-ci, qui brûle tellement toutes les lèvres de nos jours. A vous le réveillon héroique, à vous l'admiration de tati Germaine, à vous les yeux mouillés de désir de la cousi... hmmm, hum, mais restons concentrés.

Le cell-shading fait partie de la famille des modes de rendu non photo-réalistes (NPR). Comme son nom l'indique, il s'agit tout bêtement de techniques visant à rendre un modèle 3D de manières non réalistes. L'interêt principal de ce domaine et l'aspect le plus fascinant et le plus étudié reste sans conteste la possibilité de donner à des objets 3D un look 2D, qu'il soit "toon", crayonné, peint, etc ..

Je vous passerais ici l'affront de vous donner des exemples ou des screenshots de jeux utilisant cette technique, tant c'est carrément à la mode depuis Jet Set Radio. On va plutot s'intéresser à rentrer un peu plus dans les détails du commentqu'onfaitdonc.

Le plan ( il y'en a toujours un, ahahAHAHAH )

Rendre un objet en cell-shading se résume en fait à deux problèmatiques :

1. Dessiner le corps de l'objet, et s'arranger pour utiliser de grands aplats de couleurs pour lui donner un aspect plat.
2. Dessiner les contours de l'objet, si possible assez épais, et si on veut vraiment peaufiner, avec un aspect crayonné, donc irrégulier.

Séance de rattrapage

Avant de nous aventurer bien plus loin, il est préférable de revoir ensemble quelques notions trés simples de géometrie.
Ceux qui se sentent confiant dans ce domaine peuvent bien sur passer cette petite partie de révisions. Pour les autres on se relaxe, promis, ça ne fera pas (bien) mal.

Je pense que tout le monde ici sait ce qu'est un point et un triangle, et que ce sont là les deux pierres fondatrices de tout moteur 3D.
Pour travailler correctement avec ces objets, il va nous falloir un certain nombre d'outils.

Tout d'abord le vecteur.
Un vecteur est un segment reliant deux points (A et B par exemple), ayant une direction (celle de la droite AB), un sens (de A vers B ou de B vers A), et une longueur (la longueur entre A et B). (schéma 1)
On aura besoin d'un vecteur pour définir une normale.
La normale d'une surface va représenter le vecteur partant de cette surface, dans la direction perpendiculaire à cette dernière (c'est à dire que la droite et la surface forment un angle droit). Et pour notre sens, hmmm? En fait chaque surface est orientée. Par exemple un triangle aura toujours une face avant et une face arrière. La normale d'une face d'un triangle aura donc alors toujours comme sens celui qui "part" de la face : face arrière vers face avant pour la normale de la face avant, et face avant vers face arrière pour celle de la face arrière. (schéma 2)
Nous définirons également la normale en un point (une normale n'est définie que par rapport à une surface) comme la moyenne des normales de toutes les faces auxquelles il appartient. Histoire de mieux vous la représenter, imaginez la normale en un point comme le prolongement de la pointe de la pyramide dont ce point est le sommet.
Enfin, il va nous falloir un moyen de déterminer l'angle qu'il y a entre deux vecteurs.
C'est le produit scalaire qui va nous le donner. On ne rentrera pas dans les détails pour ne pas transformer ce cours article initiatif en longue séance de géometrie, il suffit juste de savoir que calculer le produit scalaire de deux vecteurs nous permet de trouver l'angle entre les deux droites que définissent ces vecteurs. Ajoutons enfin qu'un produit scalaire nul indique que les deux vecteurs sont perpendiculaires entre eux (en effet le produit scalaire nous renvoie en fait le cosinus de l'angle).


Bien, nous voilà maintenant parés à affronter la magie du cell-shading dans de bonnes conditions.

Le corps de l'objet

Avant tout, intéressons nous 2 secondes à comment on dessine sur un ordinateur un objet 3D habituellement, eclairé par une lumière diffuse.
Courage, on arrive bientôt à ce qui nous intéresse. Pensez à la cousine si ça peut aider.

L'objet à dessiner est constitué de triangles. Pour le dessiner, il nous faut trouver la couleur de chacun de ses points. Si l'on est éclairé par une seule lumière diffuse, la couleur d'un point sera définie par la modulation de la couleur ambiante de son materiau (en d'autre terme "bleu" si l'objet est "bleu") par la quantité de lumière qu'il reçoit.
Par exemple pour une sphère, plus on s'approchera des "bords" de notre sphère, et moins elle recevra de lumière, donc plus sa couleur "s'assombrira".
On va alors parcourir chaque triangle de notre objet, et pour chaque triangle on va calculer l'angle entre sa surface et la source lumineuse (via ce fameux produit scalaire), ce qui nous permet d'en déduire la quantité de lumière que reçoit cette face, et donc la couleur à attribuer au triangle. En effet plus l'angle sera proche de zéro et plus le triangle recevra de lumière.
Si on s'arréte là, on obtient un objet en Flat-Shading : chaque face de l'objet est eclairée de manière uniforme (Penser vieuuuux jeux, ou penser Starfox sur supernes).
(schéma 3)

Pour apporter un peu plus de réalisme, on va faire la même chose, non plus pour les triangles mais pour tous les sommets des triangles de l'objet. On interpole ensuite la couleur des sommets de chaque triangle pour créer un degradé sur le triangle, et on obtient un objet eclairé de maniere "douce". On a fait du Gouraud-Shading.
(schéma 4)

Ok c'est cool ce qu'il nous raconte là, mais on s'éloigne un peu du sujet quand même.
Et bien pas vraiment non, on va en fait juste venir modifier un peu le dernier cas presenté.
On va toujours parcourir notre objet, et pour chaque sommet on va toujours calculer son éclairement grâce à notre produit scalaire. Mais au lieu d'utiliser la valeur trouvée pour moduler la couleur de notre objet, on va utiliser cette valeur comme index d'un tableau 1D, qui représente en fait notre texture 1D qui créera l'effet de cell shading.

En fait on n'utilise pas vraiment un tableau mais carrement une texture. Le produit scalaire nous renvoyant un nombre entre 0 et 1, ce dernier correspond directement au point de la texture à utiliser (les coordonnées d'une texture sont toujours comprises entre 0 et 1).
Quand on va ensuite tracer notre objet, pour chacun de ses triangles on lui appliquera notre texture en fonction des coordonnées trouvées pour chacun de ses sommets.
Ici c'est en fait notre texture qui va nous servir de lumiere discretisée. Elle va venir moduler la couleur de base de l'objet pour creer les effets d'aplats et d'ombres.
Regardez bien cette texture (schéma 5), elle "partitionne" les couleurs utilisées. En l'appliquant, notre dégradé disparait au profit d'applats de 3 couleurs différentes (ombré, normal et éclairé). On n'a plus une infinité de couleurs entre nos deux points mais à la place les seules couleurs définies dans la texture et apposées aux bons endroits.

Bien entendu l'effet dependra grandement de la texture utilisée, et c'est là que les artistes reprennent un peu la main. ^^

Donc, pour résumer :
- Flat Shading : Pour chaque triangle, on calcule la quantité de lumière qu'il reçoit. On modifie sa couleur en fonction de la valeur de lumière trouvée.
- Gouraud Shading : Pour chaque point on calcule la quantité de lumière qu'il reçoit. On modifie sa couleur en fonction de la valeur de lumière trouvée. On trace nos triangles en effectuant un dégradé entre la couleur de chacun des 3 points qui le composent.
- Cell Shading : Pour chaque point on calcule la quantité de lumière qu'il reçoit. On utilise la valeur trouvée comme index dans une texture 1D (qui définira vraiment le look final), et on attribue comme coordonnées de texture en ce point la valeur trouvée par notre produit scalaire. On trace ensuite notre triangle en utilisant notre texture, en désactivant la gestion des lumières.
(schéma 6)

Les contours de l'objet

Bien, maintenant qu'on a tout "applatisé" (boink) notre objet, il nous faut tracer autour de lui des contours bien épais.
Ce n'est pas obligé, mais ça améliore non seulement la lisibilité de la scène dés qu'on commence à avoir beaucoup d'objets, et surtout ça ajoute au total-look comics/manga. ^^

Ici on a le choix entre plusieurs techniques, 2 en fait.
La première se contente de passer en mode filaire, en augmentant la taille des lignes, puis de rendre toutes les faces "arrières" du modéle (celles qui ne nous font pas face). Le petit truc magique réside ici dans le fait qu'il faut effectuer cette opération *avant* le rendu du corps de l'objet. Ainsi en dessinant l'objet, on va venir recouvrir toutes les lignes qui sont à l'intérieur, et ne resteront que les bords (d'où l'utilité d'augmenter la taille de dessin de nos lignes, magie quand tu nous tiens).
Cette technique a le mérite d'etre simple, rapide, et efficace.
Seulement elle amène une limitation génante : on ne peut pas vraiment controler le look de ces contours.

Pour ce faire, on devra se rabattre sur une deuxième méthode.
Il va ici nous falloir trouver exactement quelles sont les lignes qu'il faut dessiner, donc quelles sont nos lignes de contour de notre objet.
Ca parait un peu complexe comme ça de prime abord, mais en fait comme le cell-shading, c'est con comme tout.
Une arète fera partie de notre contour si les deux faces dont elle fait partie ont une orientation opposée, c'est à dire qu'une des faces sera orientée vers nous, alors que l'autre nous tourneras le dos. Une bonne approximation de ceci revient à dire qu'un point sera sur notre contour si sa normale est perpendiculaire au vecteur de la vue lui arrivant dessus (donc si le produit scalaire entre ces deux vecteurs est nul).
On peut ainsi, en parcourant notre modèle, repérer les arètes qui font partie de notre contour.
Ne reste plus qu'à dessiner les lignes, ce qui nous amène au même resultat que la méthode précédente, mais on peut également envisager de les texturer avec un masque simulant un trait de crayon, histoire d'amener un effet crayonné des plus sympathiques, ou tout autre effet rigolo et imaginable.
(schéma 7-8)

Et hop, sans les mains

Voilà donc une initiation légérement détaillée au monde merveilleux du cell-shading.
Bien sur tout ceci est hautement dépendant des modèles utilisés et des textures de cell, donc des artistes. On peut imaginer et rajouter encore une foultitude d'effets.

J'espére quand même que ce n'etait pas trop pénible.
Bien entendu certains points ont été trés méchamment vulgarisés histoire de rendre le propos plus lisible pour tout le monde. Mais ceux que ça intéresse (au moins un, là bas au fond, j'espére) sauront je pense approfondir d'eux même ce sujet passionant.
Je vous laisse savourer votre cousi... nouvelle arme pour briller en société, en compagnie de ces merveilleuses images d'exemples de rendu non-réalistes (pas forcément du cell-shading au sens strict où on l'entend, même si sa définition reste assez vague).
Voui c'est beau, voui c'est tout de la 3D temps reel, et voui on peut même y trouver un screen d'un mod NPR de ce bon vieux Quake des familles.

En vous remerciant. =)

Voir la galerie d'images

 
 
 
Des questions ? Pour en savoir plus n'hésitez pas à visiter notre forum