Deutsch Startseite English

Mon, 23 Oct 2017

Sitemap

Lite-C,3d Game Studio

Postprocessing Shader Tutorial Teil II:

::.erste Special-Effekte.::

Im ersten Teil dieser Tutorialserie über das Programmieren von Postprocessing Shadern in HLSL haben wir uns mit den Grundlagen solcher Effekte beschäftigt. Nun sollen Sie die Möglichkeiten kennen lernen, zahlreiche interessante Effekte für Ihre Spiele zu erstellen, unter anderem Schwarz/Weiß-Filter, Sepia und einfaches Bloom.
Das Tutorial richtet sich an Anfänger und geht von den Grundlagen des vorangegangenen Teils aus.

Das gesamte Tutorial zusammen mit Codebeispielen steht hier zum Download bereit.

Schwierigkeit:**

Material: lite-c, 3DGS A7 Commercial oder Professional

Zusatzmaterial: postprocessdat2.rar

Er will doch nur spielen | Negativbild |
Monochrome/Graustufen | Schwarzweiß |
Sepia | Bloom | Sepia-Bloom

1. Er will doch nur spielen:

Die Möglichkeit die GPU neuerer Grafikkarten zu programmieren eröffnete eine riesige Welt von Spezialeffekten und Spielgenuss. Das wohl wichtigste beim Programmieren von Shadern ist Erfindergeist und Spaß etwas auszuprobieren. Laden Sie posteffect2.c vom Ende des letzten Tutorials in den Scripteditor von lite-c. Sie finden die Datei auch in postprocessdat2.rar, das Sie optional runterladen können. Dort finden Sie auch Previews aller Shadereffekte aus diesem Tutorial.
Jetzt wollen wir doch ein bisschen spielen! Nur einen Farbwert des Screenbuffers zu verändern, wie wir es letztens getan haben, mag spaßig sein aber es geht schließlich auch mehr.

Wir erinnern uns an unseren Basis-Shadercode in der posteffect.fx Datei. Sollten Sie nicht wissen, wie man auf diesen Code kommt, schauen Sie sich den ersten Teil nochmal an.
Unser Code bestand aus einem Definitionsbereich für die zu verwendenden Variablen, Konstanten und Sampler,
aus der Funktion, die auf den Screenbuffer zurückgreift und diesen manipuliert
und der technique, die dem Compiler sagt, wie er die Funktion als Pixelshader kompilieren soll:

texture TargetMap;//Screenbuffer, wird von der Engine überliefert
sampler mySampler = sampler_state{texture=<TargetMap>;};

float4 PP_Shader (float2 Tex: TEXCOORD0):COLOR0//Pixelshader
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 return Color;
}

technique PP{//Die Technique setzt den Shader um
pass p1{
 PixelShader= compile ps_1_0 PP_Shader();//mit Shaderversion 1.0 kompilieren
 VertexShader=null;
}
}

Nun fügen wir folgende Zeile ein:

[...]
float4 PP_Shader (float2 Tex: TEXCOORD0):COLOR0//Pixelshader
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 Color.rgb+=0.1f;//neuer Code!
 return Color;
}
[...]

Starten Sie jetzt die Engine um zu sehen, welcher Effekt jetzt bezweckt wurde.

Genau, das Bild ist heller geworden! Wir erinnern uns, dass in HLSL beliebig viele Komponenten eines Vektors in einem Befehl auf einmal verändert werden können.
Color.rgb+=0.1f; bedeutet addiere zum Rot, Grün, und Blau des Pixels 0.1. Wobei Farben stets im Bereich zwischen 0 und 1 liegen. Da es Fließkommazahlen sind, sollte deren Ende durch ein 'f' gekennzeichnet werden. Der Alpha-Wert, also die Transparenz des Pixels Color.a, bleibt unverändert, wie er aus dem Screenbuffer gelesen worden ist. Normalerweise sollte sie 1 für undurchsichtig betragen.
Wie wir uns erinnern, wird diese Prozedur für jeden Bildschirmpixel einzeln durchgeführt.

Selbstverständlich sind in Shadereffekten auch alle einfachen Rechenoperationen möglich.
Versuchen wirs mit Subtraktion:

[...]
float4 PP_Shader (float2 Tex: TEXCOORD0):COLOR0//Pixelshader
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 Color.rgb-=0.1f;//neuer Code
[...]

Dieser Code dunkelt das Bild ab. Aber Vorsicht! Beide Strich-Operationen ändern die Farbe absolut und nicht relativ zum Farbvektor. Bei höheren Werten wirkt das Bild wie unter- bzw. überbelichtet und ohne Kontraste!
Nun verdunkeln wir das Bild relativ zur Pixelfarbe. Dazu verwenden wir eine Divison:

[...]
float4 PP_Shader (float2 Tex: TEXCOORD0):COLOR0//Pixelshader
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 Color.r/=4.0f;
[...]

Dieser Code dunkelt ausschließlich den Rot-Anteil des Bildes um 3/4 ab, sodass Blau und Grün stärker erscheinen. Da sie gemischt auftauchen führt dies zu einem sehr schönen Cyan-Ton. Dies kann für Shader nützlich sein, die Unterwasserwelten darstellen sollen.

Postprocessing Shader Cyan

↑Top

Jetzt wollen wir aber, z.B.dass sich nur die linke Hälfte des Bildschirmes aufhellt. Wie kann man dies aber bewerkstelligen, wenn doch jeder Pixel über den Pixelshader verändert wird? Ganz einfach, wir machen den Pixelshader selektiv, mit einer einfachen IF-Abfrage:

[...]
float4 PP_Shader (float2 Tex: TEXCOORD0):COLOR0//Pixelshader
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
if(Tex.x<0.5){
  Color.rgb+=0.1f;
 }

[...]

Jeder Pixel hat seine eigene Koordinate auf der Textur und dies machen wir uns zunutze. Tex.x bekommt von der Engine stets den korrekten Koordinatenwert zugewiesen, also reicht es diesen zu untersuchen. Das Koordinatensystem hat den Ursprung in der linken oberen Bildschirmecke (Tex.xy=0). Der äußerste Pixel hat die X-Koordinate Tex.x=1.0f. Also haben alle Pixel in der linken Bildschirmhälfte einen kleineren X-Wert als 0.5. Probieren Sie den Code aus, dann werden Sie sehen was ich meine.
Doch halt? Haben Sie es bemerkt, jetzt gibt es plötzlich eine Fehlermeldung:

"Error in effect:
MtlPostEffectwarning X3505: ps_1_1 is no longer supported; using ps_1_1
Error X4520: can read from texcoord and use it for texlookup only in ps_1_4 and higher
(19): ID3DXEffectCompiler ::CompileEffect: There was an error compiling expression
ID3DXEffectCompiler: Compilation failed"

Kurz gesagt, wir haben Operationen verwendet, für die weder das uralte Shadermodell 1.0 noch 1.1 ausreichen. Der Shader muss also ab jetzt mit mindestens 1.4 kompiliert werden. Um dies zu ändern gehen wir zurück zur technique:

[...]
technique PP{//Die Technique setzt den Shader um
pass p1{
 PixelShader= compile ps_1_4 PP_Shader();//mit Shadermodell 1.4 kompilieren
 VertexShader=null;
}

[...]

Jetzt hätten wir immer ein schönes Referenzbild zu unseren Shadern, weil wir stets sehen könnten, wie die Grafik ohne aussehen würde. Mit Hilfe von Bedingungs-Abfragen kann man viele interessante Shadereffekte programmieren, wie wir gleich sehen werden. Selbstverständlich unterstützt HLSL wie C++ auch for-,while und do-while Schleifen.

↑Top

2. Negativbild-Shader:

Gut, bisher waren alle Effekte nicht sonderlich interessant. Doch schon mit diesem kleinen Vorwissen lassen sich fortschrittlichere Shader erzielen. Wie wäre es mit einem Inversions-Shader, der das Negativbild generiert? Nichts leichter als das. Man muss nur bedenken, wie es entsteht:
Jede Farbkomponente wird vom Maximalwert abgezogen, den sie annehmen kann (1.0f). So entsteht das Gegenstück zur eigentlichen Farbe.
Wir müssen also der Ausgabefarbe eines jeden Pixels, die Differenz zwischen 1 und der Pixelfarbe an der Stelle XY zuweisen.
Die Änderung einer einzigen Zeile unseres Shaders bewirkt genau dies:

[...]
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 Color.rgb=1.0f-Color.rgb;//Farben invertieren
[...]

Und wieder können Sie sehen, wie praktisch es ist, in einer Zeile auf alle benötigten Komponenten von Color die gleiche Rechenoperation anzuwenden. Rot bekommt den Wert 1-Color.r, Grün 1-Color.g und Blau 1-Color.b.

Postprocessing Shader Negativ

Teil I| ↑Top | weiter

Sitemap | Kontakt | Impressum

Copyright von kstudios.de © 2007-2017 bei Grygoriy Kulesko

News

28.05.2012
Something,
Something is coming...
#^+o

24.12.2010
Frohe Weihnachten,
Und wieder ist fast ein ganzes Jahr vergangen. Leider gab es 2010 nur wenige Aktualisierungen auf kstudios. Und auch wenn der veröffentlichte erste Prototyp von BlackBox zu den Highlights gehörte, waren viele versprochene Dinge nicht dabei. Wird sich das im nächstes Jahr ändern? Das hoffe ich aber versprechen kann ich nichts. kstudios wird in jedem Fall weitergeführt. Denn diese Seite ist wie ein Teil von mir.
Für alle, die glauben ein Informatik-Studium sei das einfachste, was man studieren kann: Informatik gehörte nicht umsonst ursprünglich ausschließlich zur Mathematik. Aber spannender und weltbezogener ist es allemal.
Was sind meine Vorsätze fürs Neue Jahr? Die Prüfungen zufriedenstellend bestehen, mich mal in Unity 3.1 einzuarbeiten (mal ehrlich, wenn man kostenlos ein derartiges Entwicklungstool hinterher geworfen bekommt, greift man doch zu), an BlackBox weiter zu basteln und mich in den neuen Blender einzuarbeiten. Ich denke das klingt ganz passabel.
Nun denn:
Ein frohes Fest und guten Rutsch ins Neue Jahr wünscht euch kstudios.de!

Neuestes Video


Quick terrain/ Schnelles Terrain Tutorial (no sound) from Grygoriy Kulesko on Vimeo.

Zufallsbild

aus dem Screenshot- und Artworkbereich

Vote

Derzeitig finden keine Votings statt.

Partner

Werden Sie Link-Partner von kstudios.de und an dieser Stelle erscheint ein Link zu Ihrer Website!
Kontakt