(Titre bientôt disponible)

Par 01010110 Blog créé le 05/08/12 Mis à jour le 11/11/16 à 18h15

Voici la ligne éditoriale du blog :
____________________________________

Ajouter aux favoris

Édito

Travail en progression

Archives

Favoris

(Titre bientôt disponible)
Signaler

Il y a de cela quelques semaines, je vous avais parlé du Bump Mapping et je crois que vous aviez pas mal kiffé votre race comme disent les jeunes. J'ai donc choisi cette fois-ci d'expliquer comment qu'on fait donc du Cel-Shading ; ce qui est plutôt d'actualité avec la sortie de Borderlands 2 et la réédition HDifiée de Jet Set Radio. Bah attend, on est journaliste ou on l'est pas ! Bon ok, je ne le suis pas, mais n'empêche que... hein...enfin bite quoi. Le Cel-Shading !

Règle N°1 : le Cel-Shading ne souffre pas des affres du temps

 

რა არის საკანში დაჩრდილვის?

Très bonne question d'un fan géorgien ! Je pense qu'il est inutile de traduire, tout le monde a compris. Pour faire simple, le Cel-Shading (ou ombrage de celluloïd en belge) est un rendu graphique - dit non-réaliste - apparu en 2000 avec un certain Jet Set Radio (Dreamcast). Il se caractérise par cet aspect cartoon immédiatement remarquable et fut largement réutilisé plus tard dans The Legend of Zelda : The Wind Waker, Killer 7, XIII, la série des Sly Racoon ou encore Dragon Quest VIII. Pour ne citer que quelques exemples de manière totalement arbitraire.

Killer 7 (2005) : un des jeux les plus barré auquel j'ai joué, mais aussi une très bonne illustration de ce qui va suivre

 

Но клетката-оцветяване изглежда като нещо твърде проста.Не следва да се изисква много ресурси ? Тъпак.

Ouais bah tu me parle sur un autre ton ! Déjà que j'accepte de répondre à la question d'un mec vivant dans un pays sous-développé donc viens pas m'emmerder avec ce genre d'idée reçues. Donc non, contrairement à ce que l'on pourrait penser, le Cel-Shading n'est pas moins gourmand en ressources que des graphismes "classiques". C'est même plutôt le contraire. Car sous l'apparente simplicité du rendu se cache un beau petit bordel. Mais ça, vous aller le comprendre tout de suite...

 

Des textures péraves, un coup de crayons noir sur les bords et c'est torché non ?

Pas vraiment. Les textures par exemple peuvent être très très simples (Wind Waker est un bon exemple) ou beaucoup plus complexes (comme dans Borderlands ou Prince of Persia). C'est justement cette différence qui permet à deux titres en Cel-Shading d'être au final assez singuliers. Ensuite, on va dire qu'il y a deux aspects importants dans le Cel-Shading : les ombres et les fameux contours noirs. Ce sont ces deux choses qui donnent l'aspect cartoon au graphisme.

Prince of Persia (2008) : bonjour, on fait un reboot d'une série ! Vous n'aimez pas le design ? Et merde...

Donc commençons par la technique d'ombrage. Tout d'abord, il faut quand même que je rappelle deux-trois choses importantes. Un objet est constitué de polygones (easy). Donc pour avoir une ombre dynamique, il va falloir calculer la position de chacun des bouts de triangle par rapport à la source lumineuse (moins easy). Ensuite, c'est à vous de décider ce que vous allez faire de ces données. Vous pouvez vous en faire une nappe ou encore un beau papier-peint, mais il est conseillé de s'en servir pour faire des ombres.

C'est donc à ce moment que vous êtes censé comprendre le sens de "Cel Shading". Puisque contrairement au Flat- Shading (1 polygone = 1 gris) ou au Gouraud-Shading (1 pixel = 1 gris), le Cel-Shading utilise une texture 1D semi-transparente divisée en cellules. D'où le "ombrage par cellule". Mais diantre ! Qu'est ce que vient faire une texture 1D dans l'histoire ? C'est vrai que le concept peut paraître un peu bizarre comme ça. En fait le but final est de simplifier l'ombrage. Pour cela on va superposer la texture de couleur (l'objet) et une texture d'ombre.

On voit bien la différence entre un ombrage à la Gouraud et en Cel-Shading

Il est donc préférable que la carte graphique supporte le multi-texturing (texture objet + texture ombre) ; même si on peut faire sans, mais dans ce cas le temps de calcul est multiplié par deux (logique). Donc ce que l'on va faire c'est "seuiller" les ombres. Par exemple au lieu d'avoir ouatmille niveau de gris, on en aura que 4. Ensuite, on calcule, on va chercher la couleur dans la texture et on l'applique. Mais pour éviter tout dégradé on va arrondir les valeurs à mort. Je sais pas moi, si la valeur est de 2.4, on va tout de même aller piocher dans le gris N°2. La vache, c'est pas si simple à expliquer...


 

Ok, donc maintenant on va sur Paint, on prend le pinceau noir et basta ? (NoteDeLeRédacteur : "basta" vient du verbe baster, qui en ancien français veut dire "suffire")

Si tu veux faire une bannière qui arrache, tu peux, mais je te conseille d'adopter une des deux techniques qui suit. La première t'oblige à créer une copie de l'objet en mode fil de fer. Dans ce cas de figure, tu vas te retrouver avec un objet uniquement constitué de bordures noires et l'objet original. Maintenant, on fait un mix des deux et on se retrouve avec un truc bien moche : un objet avec des arrêtes noires. Trop cool !

Dans XIII, les contours sont mastoc. Ce qui renforce le côté BD.

C'est là qu'intervient le Backface Culling. Le pire c'est que vous connaissez forcément. Si je vous dis "Clipping" ? Ah ! Je savais bien ! Le Backface Culling est en effet la technique utilisée pour savoir si un polygone est visible où non à l'écran. Cela permet d'économiser pas mal de ressources, mais entraine parfois cet effet de clipping. Nous, on a juste besoin de faire disparaitre les bordures noires que le joueur voit, pour qu'il ne reste plus au final que les bordures arrières. Et bien le Backface Culling le fait pour nous !

Caser une image d'Okami pour éviter la mort : Check.

Le problème avec cette méthode c'est que le trait a la même épaisseur quelque soit la distance de l'objet. Le trait est en effet proportionnel à l'écran (ne me demandez pas pourquoi). Vous vous doutez donc bien que le résultat est un peu bancal. Et si on entourait totalement l'objet 3D avec une enveloppe noire ? Comme ça, hop, un coup de Backface Culling et on a notre faux contour proportionnel à l'objet ! Bac +2 les enfants...

 

Explication du Cel-Shading : Done !

Maintenant : donnez-moi de l'amour !


Ajouter à mes favoris Commenter (12)

Commentaires

Kermit
Signaler
Kermit
J'ai rien capté du coup je me sens con .. (super article !)
Martinman
Signaler
Martinman
Je savais ce qu'était le Cel-shading dans les grandes lignes, maintenant, je peux vraiment dire ce que c'est dans les détails :)
Très intéressant, j'ai appris bien des choses, et je me coucherais surement moins con ;)
Jonah
Signaler
Jonah
Ça me rappelle la tempête de protestations qu'il y avait eu avec le cel-shading de Wind Waker. Ça me rappelle aussi que ce fut le premier 20/20 que je vis sur jv.com. Au final, je n'ai jamais fait le jeu. 8|
Hyna
Signaler
Hyna
Très intéressant ! :) Ça me donne envie de me refaire Prince Of Persia juste pour admirer les graphismes ^^ (parce que l'histoire m'a beaucoup moins plu...)
-Setsu-
Signaler
-Setsu-
Très bon article même si j'ai eu un peu de mal au niveau du flat/gouraud shading. Mais après relecture ça va mieux.
Le Gamer aux Mains Carrees
Signaler
Le Gamer aux Mains Carrees
Le fond est là. La forme aussi. Toujours un plaisir.
winston
Signaler
winston
Et bien je vais encore me coucher moins con :D ! En tout cas, tout aussi intéressant que le bump mapping
ProfesseurOz
Signaler
ProfesseurOz
Merci pour tes articles :)
Killyoh
Signaler
Killyoh
\o/
Gregeek
Signaler
Gregeek
Ha moi au contraire j'ai trouvé ça plus facile à comprendre que le bump mapping *_* ! Fin bref super article encore une fois :).
Gloumouf
Signaler
Gloumouf
C'est plus complexe que le bump mapping :°|
Celimbrimbor
Signaler
Celimbrimbor
Très intéressant.

Celim.