Création d'un Toon Shader - RB Whitaker - Wiki de
Création d'un Toon Shader
introduction
Dans ce tutoriel, nous allons faire un simple toon shader. Parfois, ceci est aussi appelé un shader cel. Aussi, parfois, les gens écrivent « shader cellule », mais je suis sûr que « cel » est correct. Peu importe ce qu'il appelle, cependant, ils sont les mêmes, et ils ont tous le même objectif: faire un modèle (ou jeu entier) ressembler à elle est dessinée comme un dessin animé. Il est un effet intéressant, et il est en fait assez facile à faire, avec les choses que nous savons déjà. Il y a, évidemment, beaucoup de façons différentes pour ce faire, et si cela est quelque chose que vous trouvez intéressant, vous pourriez vouloir examiner quelques-unes des autres façons que les gens font ombrage toon. Nous ferons une des façons les plus simples, mais comme vous pouvez le voir sur l'image ci-dessous, qu'il est assez facile à faire.
Le Toon Shader
Il existe essentiellement deux parties à toon shading. La première est que, au lieu d'un changement continu de la couleur, il y a un saut brusque, et aucun changement pendant un certain temps, laissant des régions plus grandes qui sont de la même couleur. Vous pouvez le voir dans l'image ci-dessus. En second lieu, les shaders toon ont généralement des contours autour des objets. Il y a en fait assez peu de moyens de le faire, y compris l'opérateur Sobel. qui est utilisé pour la détection de bord. cependant, nous, allons prendre un raccourci. Il ne donnera pas tout à fait aussi bien des résultats, mais il fera le travail de toute façon.
Quoi qu'il en soit, sur le shader!
Ne hésitez pas à copier tout cela dans un fichier .fx.
Je vais sauter d'expliquer les « Propriétés de base » et les « Propriétés Diffuse Light », parce que nous les avons couvert dans les didacticiels précédents, et donc vous savez sans doute ce qu'il faut faire avec eux. Nous allons sauter sur le bas à la « Toon Shader Propriétés ». Il y a deux variables ici que vous pouvez jouer avec. Les deux impliquent la façon dont les contours sont dessinés. La première, LineColor. détermine quelle couleur les lignes seront dessinées. La seconde, linethickness. déterminera à quel point les sommets seront développés pour produire les grandes lignes.
Nous allons aussi sauter les trucs de texture, parce que nous en avons parlé dans un autre tutoriel ainsi. La section « Structures de données » est probablement assez similaire à ce que nous avons fait dans le passé aussi. Il ne devrait pas y avoir de surprise là-bas.
La section « Shaders » est l'endroit où les choses commencent à devenir intéressantes. Tout d'abord, notez que nous avons quatre shaders, au lieu de deux. Ceci est parce que notre toon shader va prendre quelques passes pour rendre. Ceci est appelé à plusieurs passes de rendu, et nous avons pas vu auparavant, dans ces tutoriels. Chaque passe nécessite son propre vertex shader et son propre pixel shader, nous avons donc quatre shaders au total. Le CelVertexShader est assez simple. Encore une fois, vous avez probablement vu tout cela dans le tutoriel HLSL d'éclairage diffus, donc je ne vais pas dire grand-chose à ce sujet. Le CelPixelShader est là que nous faisons notre première chose intéressante. On calcule d'abord l'intensité de la lumière diffuse (et le couper à 0). On calcule alors la couleur de texture comme d'habitude. Ensuite, nous rompons la couleur en morceaux discrets pour obtenir l'effet ombré de cel que nous voulons.
Ce code essentiellement force juste l'intensité d'être l'une des quatre valeurs, en fonction de certains points de coupure. Vous pouvez jouer avec ces valeurs si vous voulez. De plus, gardez à l'esprit qu'il ya beaucoup de façons de le faire. Je l'ai vu quelques shaders toon qui font quelque chose comme ce qui suit à la place, ce qui produit des résultats similaires:
Le OutlineVertexShader fait aussi des choses intéressantes que nous allons parler. Ce shader ressemble à ceci:
Le pixel shader de contour est extrêmement simple. Il vient tout de couleurs avec la couleur du contour:
La dernière partie est aussi très intéressant, nous allons donc regarder aussi. Dans la dernière partie, nous définissons la technique avec deux passes. Nous n'avons pas fait cela avant, il est donc intéressant de regarder.
Notez que vous pouvez simplement mettre des définitions de passe multiples dans une rangée, et ils seront effectués de manière séquentielle. Pass1 fait le contour, et PASS2 réalise le dessin normale avec la coloration de style toon. L'autre chose imporant que nous voyons ici est l'ajout des lignes CullMode = CW; et CullMode = CCW ;. Cela remonte à un sujet dans les graphiques. En règle générale, il est beaucoup de travail pour dessiner un triangle, et si vous dessinez beaucoup d'entre eux, vous seriez prêt à se débarrasser du plus grand nombre que vous pouvez accélérer les choses. Alors qu'est-ce qu'ils font est qu'ils assignent un avant et face arrière au triangle et dessiner seulement les triangles qui font face vers l'écran. Ce besoin signifie théoriquement vous suffit de dessiner la moitié autant de triangles qui accéléreront les choses beaucoup. La face avant et la face arrière sont déterminées par la « commande d'enroulement » du triangle. En général, la face avant est celui où les sommets sont donnés dans le sens trigonométrique, et la face arrière est celui où les sommets apparaissent dans l'ordre des aiguilles d'une montre. Le processus de suppression (et donc pas de dessin) vers l'arrière des triangles est appelé « Élimination face arrière ». Ces deux lignes ici indiquent quels triangles à découper. Pour notre shader plan, nous disons réellement ignorer les triangles orientés vers l'avant et tirer seulement ceux de l'arrière. Ensuite, on passe autour lorsque nous puisons l'avant face à ceux avec notre Shader régulière. Sans cela, le shader aperçu attirerait le modèle élargi, et il bloquerait le reste du modèle. Tout ce que nous verrions est un grand blob de noir. Mais puisque nous ignorions triangles qui font face à l'écran lors du passage de contour, rien ne sera fait revenir, et nous serons en mesure de voir la deuxième passe.
En ce qui concerne le chargement dans ce XNA, je pense que vous le savez sans doute ce qu'il faut faire maintenant, donc je ne vais pas donner des directives spécifiques. Assurez-vous que vous utilisez le shader correct et que vous définissez les matrices et des choses texturation comme toi avez fait avant. (Le shader est la seule nouveauté au ici!)