Fri, 19 Apr 2024
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.
Er will doch nur spielen |
Negativbild |
Monochrome/Graustufen |
Schwarzweiß |
Sepia |
Bloom |
Sepia-Bloom
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.
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.
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.
|
News
28.05.2012 |
|
Neuestes Video Quick terrain/ Schnelles Terrain Tutorial (no sound) from Grygoriy Kulesko on Vimeo. |
|
Zufallsbild
|
|
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
