Erstellen eines Toon Shader - RB Whitaker - s Wiki

Erstellen eines Toon Shader

Einführung

In diesem Tutorial werden wir eine einfache Toon Shader machen. Manchmal ist dies auch ein cel Shader genannt. Auch, manchmal Leute schreiben es „Zelle Shader“, aber ich bin mir ziemlich sicher, dass „cel“ korrekt ist. Egal, was es heißt, wenn, sind sie gleich, und sie haben alle das gleiche Ziel: ein Modell zu machen (oder das ganze Spiel) aussehen, wie es wie eine Karikatur gezeichnet wird. Es ist ein interessanter Effekt, und es ist eigentlich ziemlich einfach zu tun, mit dem Zeug, das wir bereits kennen. Es gibt offensichtlich viele verschiedene Wege, dies zu erreichen, und wenn dies etwas ist, die Sie interessant finden, können Sie in einige der anderen Wegen suchen, wollen, dass die Menschen Toon Shading tun. Wir werden eine der einfachsten Möglichkeiten, aber wie Sie unten aus dem Bild sehen kann, dass es ziemlich einfach zu tun.

Die Toon Shader

Es gibt grundsätzlich zwei Teile Schattierung toon. Die erste ist, dass, anstatt eine kontinuierliche Veränderung der Farbe, ein plötzlicher Sprung ist, und dann keine Änderungen für eine Weile, so dass größere Bereiche, die alle die gleiche Farbe haben. Sie können darüber im Bild sehen. Zweitens Toon Shadern haben in der Regel Konturen um die Objekte. Es gibt tatsächlich eine ganze Reihe von Möglichkeiten, dies zu tun, einschließlich der Sobel-Operator. die zur Kantenerkennung verwendet. Wir aber eine Abkürzung nehmen. Es wird nicht ganz geben, wie schön der Ergebnisse, aber es wird auf jeden Fall die Arbeit machen.

Wie auch immer, auf den Shader!

Fühlen Sie sich frei, um nur diese zu kopieren in eine .fx Datei.

Ich werde über Erklärung der „Basiseigenschaften“ und die „Diffuse Lichteigenschaften“, überspringen, weil wir sie in früheren Tutorials behandelt haben, und so werden Sie wahrscheinlich wissen, was mit ihnen zu tun. Wir springen auf werde hinunter zum „Toon Shader-Eigenschaften“. Es gibt zwei Variablen hier, die Sie mit spielen können. Beide beinhalten, wie die Umrisse gezeichnet werden. Die erste, Linecolor. bestimmt, welche Farbe gezeichnet werden die Linien. Die zweite, 'LineThickness'. wird bestimmen, wie viel werden die Scheitelpunkte erweitert, um die Konturen zu erzeugen.

Wir werden auch die Textur Sachen überspringen, weil wir, dass in einem anderen Tutorial als auch gesprochen. Der „Datenstrukturen“ Abschnitt ist wahrscheinlich ziemlich ähnlich, was wir auch in der Vergangenheit getan haben. Es sollte keine Überraschungen da sein.

Der „Shaders“ Abschnitt ist, wo die Dinge beginnen, interessant. Zunächst einmal bemerken, dass wir vier Shadern haben, statt zwei. Dies liegt daran, dass unser Toon Shader ein paar Pässe nehmen wird zu machen. Dies wird Multi-Pass-Rendering genannt, und wir haben nicht einmal gesehen, in diesen Tutorials. Jeder Pass wird seinen eigenen Vertex-Shader und einen eigenen Pixelshader benötigen, so haben wir vier Shadern insgesamt. Die CelVertexShader ist ziemlich einfach. Wieder einmal haben Sie wahrscheinlich all dies in der diffusen Beleuchtung HLSL Tutorial zu sehen, so werde ich nicht viel dazu sagen. Die CelPixelShader ist, wo wir unsere erste interessante Sache zu tun. Wir berechnen zuerst die diffuse Beleuchtungsstärke (und schneiden Sie es auf 0 ausgeschaltet). Wir berechnen dann die Textur Farbe wie üblich. Dann brechen wir die Farbe in diskrete Stücke die cel schattierten Effekt zu erhalten, die wir wollen.

Dieser Code im Grunde zwingt nur die Intensität eines von vier Werte zu sein, basierend auf bestimmten Cutoff-Punkte. Sie können mit diesen Werten spielen, um, wenn Sie wollen. Denken Sie auch, wenn man bedenkt, dass es viele Möglichkeiten gibt, dies zu tun. Ich habe schon einige Toon Shadern gesehen, dass so etwas wie die folgenden stattdessen tun, die zu ähnlichen Ergebnissen führen:

Die OutlineVertexShader hat auch einige interessante Dinge, die wir reden werden. Dieser Shader sieht wie folgt aus:

Der Umriss Pixel-Shader ist extrem einfach. Es Farben alles nur mit der Konturfarbe:

Der letzte Teil ist auch ziemlich interessant, so werden wir auch das betrachten. Im letzten Teil definieren wir die Technik mit zwei Durchgängen. Wir haben dies noch nicht geschehen, so ist es lohnt ein Blick auf.

Beachten Sie, dass Sie nur mehr Pässe Definitionen in einer Reihe setzen kann, und sie werden nacheinander durchgeführt werden. Pass1 hat den Umriss und Pass2 funktioniert die normale Zeichnung mit der Toon-Stil Färbung. Das andere imporant, was wir hier sehen, ist die Zugabe der Linien CullMode = CW; und CullMode = CCW ;. Dies geht zurück auf ein Thema in Grafiken. Normalerweise ist es eine Menge Arbeit, ein einzelnes Dreieck zu zeichnen, und wenn Sie viele von ihnen zeichnen, würden Sie bereit sein, so viele, um loszuwerden, wie Sie können die Dinge zu beschleunigen. Also, was sie tun, ist sie eine Vorder- und Rückseite mit dem Dreieck zuweisen und nur die Dreiecke zeichnen, die auf den Bildschirm gerichtet sind. Diese theoretisch bedeutet, dass Sie nur halb so viele Dreiecke zeichnen müssen, die Dinge viel schneller wird. Die Vorderseite und Rückseite sind durch die „winding Ordnung“ des Dreiecks bestimmt. Üblicherweise ist die Vorderseite ist derjenige, in dem die Eckpunkte entgegen dem angegebenen Reihenfolge, und die Rückseite ist die, wo die Ecken im Uhrzeigersinn erscheinen. Der Prozess der Entfernung (und damit Zeichnung nicht) nach hinten Dreiecken wird als „Backface-Culling“ genannt. Diese beiden Linien hier angeben, welche auszuschneiden Dreiecke. Für unsere Kontur-Shader, sagen wir es tatsächlich die Front nach Dreiecke zu ignorieren und nur die rückwärts diejenigen ziehen. Dann schalten wir ihn um, wenn wir die Front gegen diejenigen mit unseren regelmäßigen Shader ziehen. Ohne diese würde die Kontur-Shader das erweiterte Modell zeichnen, und es würde den Rest des Modells blockieren. Alles, was ich ist ein großer Klecks schwarz sehen würde. Aber da wir Dreiecke ignorieren, die den Bildschirm während des Umrisses Pass konfrontiert sind, wird nichts dort gezogen werden, und wir werden in der Lage sein, den zweiten Durchgang zu sehen.

Soweit das Laden in XNA dies, ich glaube, Sie wahrscheinlich wissen, was jetzt zu tun, so dass ich keine bestimmten Richtungen gehen zu geben. So stellen Sie sicher, dass Sie den richtigen Shader verwenden und dass Sie die Matrizen und Texturierung Material aufgebaut, wie Sie vorher getan haben. (Der Shader ist die einzige wirkliche neue Sache hier!)

Was kommt als nächstes?