Discussion :

[raptor70]

Le cel-shading est une technique de rendu 3D de plus en plus utilisée dans les jeux et les applications 3D. Le principe est de se rapprocher de plus en plus des dessins animés ou des bandes dessinées. Ce tutoriel va vous donner les moyens d'arriver à de tels résultats par différentes techniques.

Retrouvez ce tutoriel ici : http://raptor.developpez.com/tutoria...ng/celshading/

Que pensez vous de ce tutoriel ? Vous a t'il intéressé ?

[Ange_blond]

Sympa !

Bon j'avoue je l'ai lu en diagonale pour voir de quoi ça parlait par manque de temps, mais ça a l'air assez précis et détaillé pour maitriser la theorie du concept.

[ryosnake]

J'ai trouvé cet article très intéressant. Je ne connaissais pas la technique se dissimulant derrière ce magnifique rendu, et après lecture j'ai vraiment l'impression d'avoir bien cerné toutes les méthodes, leurs qualités et défauts. C'est concis et très explicite. En un mot, bravo !

J'ai juste deux remarques:

#1 Bien que Jet Set Radio soit en effet le premier jeu à exploiter intégralement le rendu cel-shading. Il ne faut pas oublier que Fear Effect sortit sur PSX quelques mois plus tôt utilisait ce rendu pour les personnages, alors que les décors étaient pré calculés. Cependant, ça ne devait être que graphiquement tout en utilisant une technique de rendu standard (donc pas un cel shading dynamique).

#2 "Date de publication : 17 février 2009" ?

[raptor70]

#2 "Date de publication : 17 février 2009" ?

Oui, il sera annoncé officiellement le 17 février ...

pour ces réactions en avant première

[LittleWhite]

Je vais certainement faire des remarques très peu constructive, n'étant pas fort en OpenGL, et n'ayant pas lu le tuto.
Déjà , merci pour avoir fait un tel tuto, je le garde au chaud pour lire quand je serai plus près.
Ne serait t'il pas judicieux de mettre un code d'example ( même sur un cube ) ...
Les tutos de Nehe , je crois qu'il proposait aussi une technique , mais je l'ai pas lu... :p

Faire un cel shading accélère t'il le rendu d'une scène ou pas ?
( technique avec pixel shader , et sans )...

Bref, pardon pour mais remarque vraiment débiles.

[raptor70]

Ne serait t'il pas judicieux de mettre un code d'example ( même sur un cube ) ...
Les tutos de Nehe , je crois qu'il proposait aussi une technique , mais je l'ai pas lu... :p

Tu n'es pas le premier à me poser cette question. C'est un choix complètement délibéré pour justement se détacher de toute API ou tout moteur. Mon objectif est de présenter les techniques utilisées pour que chacun est les clefs en mains pour l'adapter à sa propre application ou à son propre jeux. Ainsi, autant les pro DirectX que les pro OpenGL peuvent s'intéresser au contenu de l'article.

Faire un cel shading accélère t'il le rendu d'une scène ou pas ?
( technique avec pixel shader , et sans )...

L'objectif du cel-shafing n'est pas d'accélérer le rendu mais de donner un style a tes scènes 3D. Cela va généralement être plus couteux qu'un rendu simple car on ajoute des choses supplémentaires (les contours par exemples). Comme d'habitude en 3D, il faut trouver les bons compromis entre qualités et performance

Bref, pardon pour mais remarque vraiment débiles.

Pas besoin de t'excuser, tu n'es surement pas le seul a te poser ses questions. De plus, si tout le monde savait tout, a quoi servirait les articles de Developpez.com

[lvr]

Très intéressant.

Mon objectif est de présenter les techniques utilisées pour que chacun est les clefs en mains pour l'adapter à sa propre application ou à son propre jeux.

C'est une bonne idée. Je ne fais pas de jeux vidéos mais (un peu) de 3D à vocation purement graphique et obtenir des rendus types jeux vidéos ça peut être sympa pour ce que je fais. Mais dans un autre environnement.

[screetch]

L'objectif du cel-shafing n'est pas d'accélérer le rendu mais de donner un style a tes scènes 3D. Cela va généralement être plus couteux qu'un rendu simple car on ajoute des choses supplémentaires (les contours par exemples). Comme d'habitude en 3D, il faut trouver les bons compromis entre qualités et performance

Mais le fait de travailler uniquement avec des couleurs ou des textures très simples (une texture de 1x256 pixels... ou 1x16...) permet de transférer beaucoup moins a la carte grapique et améliore un peu les performances. Avoir les contours aussi, permet de les lisser et de cacher des angles dus a la tesselation
donc au final ca peut etre beaucoup de benef quand meme.

[raptor70]

Mais le fait de travailler uniquement avec des couleurs ou des textures très simples (une texture de 1x256 pixels... ou 1x16...) permet de transférer beaucoup moins a la carte grapique et améliore un peu les performances. Avoir les contours aussi, permet de les lisser et de cacher des angles dus a la tesselation
donc au final ca peut etre beaucoup de benef quand meme.

Tout dépends, comme toujours, du résultat voulu.. Dans le dernier Prince Of Percia par exemple, le celshading est beaucoup plus subtil avec des objets texturé au max et des effets de bump, glow, ... donc on peut peut-être gagner un peu ... mais c'est loin d'être le cas général et d'être l'objectif de cette technique.

[IrmatDen]

Mais le fait de travailler uniquement avec des couleurs ou des textures très simples (une texture de 1x256 pixels... ou 1x16...) permet de transférer beaucoup moins a la carte grapique et améliore un peu les performances. Avoir les contours aussi, permet de les lisser et de cacher des angles dus a la tesselation
donc au final ca peut etre beaucoup de benef quand meme.

Ce n'est pas vraiment comme ça que ça marche pour ce que j'en ai compris. On utilise toujours la texture de base, composée comme toute texture, et on y ajoute une texture de modulation. Donc au final, tu envoies une texture supplémentaire (très légère certe ), que tu utilises pour moduler la première. Donc le coût est 1 texture supplémentaire + du multitexturing.
Si tu utilises des shaders au lieu du pipeline fixe, tu peux faire en sorte que les seuils soient des variables pour éviter la texture supplémentaire et le multitexturing par contre. Mais comme les équations d'éclairage reste les même, tu n'y gagnes rien par rapport à un rendu classique.

Quant aux contours, les ajouter ajoute nécessairement des opérations (que ce soit des triangles ou du code gpu).

[screetch]

C'est un peu du gaspillage d'utiliser une texture détaillée sur un modèle bicolore. enfin vous faites comme vous voulez hein

[IrmatDen]

Ah, j'ai dû raté quelque chose... J'ai pas vu où il était question de n'utiliser que 2 couleurs.

Edit: pour clarifier quand même, je parlais de façon générale et en cas d'utilisation réelle. Un peu comme tu peux le voir dans les premiers screenshots de l'article de raptor70.

Edit 2: et par curiosité, tu ne confondrais pas éclairage et texturing ? Le cel shading étant juste une technique d'interprétation de l'éclairage.

[raptor70]

En fait, je pense qu'il voulait dire que l'on gagnerait sur la resolution de la texture de lumière. Pour simuler un rendu classique de Phong (sans utiliser le lighting de l'API), on peut utiliser une texture (dégradé) de 1x256 ou 1x512 .. ou plus. Pour du celshading, on peu très simplement réduire cette résolution à 1x16 1x8 1x4 .. ... mais au final, on ne gagne pas grand chose, à peine quelques bytes.

[IrmatDen]

Je n'avais vraiment pas compris ça comme ainsi, mea culpa dans ce cas...

[acx01b]

salut

pour déterminer le contour,
c'est quoi a priori la formule à utiliser avant d'effectuer le filtre de profondeur ?

je propose:
(en résumer, faire le sobel sur le z véritable du pixel, et diviser par le z du pixel central)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
const vec2 sobel[3][3] = {
	{vec2(-1,-1), vec2(0,-2), vec2(1,-1)},
	{vec2(-2,0), vec2(0,0), vec2(2,0)},
	{vec2(-1,1), vec2(0,2), vec2(1,1)}
};
 
vec2 gradient = 0.0;
float ZNear = 0.1;
float ZFar = 100;
 
for (int j = 0; j < 3; j++)
{
   for (int i = 0; i < 3; i++)
   {
      // texLookUp est compris entre 0 et 1
      float texLookUp = texture2D(depthTexture,gl_TexCoord[0].xy + float2((i-1)*unSurSizeOfScreen.x,(j-1)*unSurSizeOfScreen.y));
      // 1  correspond à --> ZFar
      // 0  correspond à --> ZNear
      // on retrouve le z
      float z = 1.0/(texLookUp*(1/ZFar-1/ZNear)+1/ZNear);
      gradient += z * sobel[i][j];
   }
}
float texLookUp = texture2D(depthTexture,gl_TexCoord[0].xy);
float z_du_pixel_courrant = 1.0/(texLookUp*(1/ZFar-1/ZNear)+1/ZNear);
// ici on pondère le gradient par le z du pixel central (ou pixel qu'on est en train de dessiner)
gradient /= z_du_pixel_courrant*constante;
 
// on a notre joli contour compris entre 0 et 1
float contour = 1-min(length(gradient),1);
// on peut aussi faire ça :
if (contour > 0.1) contour = 1;
else contour = 0;

reste à déterminer constante ( = 1 ça donne quelque chose de sympas): ça pourrait être le seul paramètre de ce calcul, qui donnerait un contour plus ou moins marqué

[Kurisu]

Il y a encore d'autres techniques pour le contour qui donnent des effets plus ou moins artistiques:
- détection des contours (Sobel/Laplace) sur une image de normales en écrivant les normales dans une cible de rendu (FBO mrt)
- "fall-off" shader, en fait une version de sphere mapping avec le trait du contour dans la texture
- un truc que j'avais découvert par hasard, en fait en faisant un seuil sur (la normale transformé) dot (le vecteur de l'axe Z): tout ce qui dépasse ce seuil ne sera pas un conteur, donc de couleur, sinon noir (ou l'inverse, mais c'était dans ce principe)
- une combinaison des buffers Z et normales pour obtenir vraiment tous les contours...

Et pour la fonction seuil, il me semble que Cg possède la fonction STEP pour cela. Puis, if-else dans le shader est une méthode non-optimale aussi.

Ah oui, il est aussi très intéressant de mixer justement un shading phong et un shading cell via un seuil (ou une "cell map", similairement à une gloss-map).

[lvr]

T'as des exemples visuels de tout ça ? C'est un sujet passionnant auquel je ne connaît/comprends pas grand chose. Avec des petites images, ça aide

[orand]

L'objectif du cel-shafing n'est pas d'accélérer le rendu mais de donner un style a tes scènes 3D. Cela va généralement être plus couteux qu'un rendu simple car on ajoute des choses supplémentaires (les contours par exemples). Comme d'habitude en 3D, il faut trouver les bons compromis entre qualités et performance

si on utilise ça en rendu flat ça peut quand même accélérer pas mal de choses, selon les polygones on utilise ou pas de texture. (dans le style zelda oot ou ph)
le rendu flat a été très utilisé a l'époque des psx/n64 (les chocobos de ff7/ff8/ff9 sont 100% en flat !), ça évite de charger des textures, ça allège le fillrate.

merci beaucoup pour ce tuto, rendre les faces cachés en filaire c'est tellement tordu que j'y avais même pas pensé, c'est pas vraiment viable pour un moteur complet mais c'est toujours bon à savoir, concernant la méthode par filtrage tu m'a donné envie de l'implémenter

je reste encore un peu sur ma faim, je vais creuser le sujet

[Paul TOTH]

J'aime bien la dernière technique présentée, mais je n'arrive pas à mettre la main sur un exemple d'application, vous avez ça quelque part ?

Merci

[raptor70]

Non, je n'en ai pas ... mais elle n'est pas très compliqué à mettre en oeuvre.... surtout si vous avez du "defered rendering" (sinon, il faut utiliser des render-target)