Deutsch Startseite English

Wed, 23 Aug 2017

Sitemap

Lite-C,3d Game Studio

Postprocessing Shader Tutorial Teil II:

::.erste Special-Effekte.::

Seite 2: 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

3. Graustufenshader (Monochromshader):

Ebenfalls mit Ihrem derzeitigen Vorwissen machbar, ist der Monochromeshader. Dieser erzeugt ein graustufiges Bild. Der Trick ist, dass man hierfür den Mittelwert aller drei Farbkomponenten bestimmen muss und ihn allen drein jeweils zuweist. Wie Sie es bestimmt noch aus dem Schulunterricht kennen, wird der Mittelwert aus drei Werten dadurch berechnet, dass man sie addiert und durch drei teilt.
Ändern wir die bekannte Zeile also folgendermaßen:

[...]
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 Color.rgb=(Color.r+Color.g+Color.b)/3.0f;// mache monochrom
[...]

Postprocessing Shader Graustufen

Es wird also Rot, Grün und Blau der Mittelwert aus allen drein Farbkomponenten zugewiesen. Es wäre selbstverständlich auch möglich diesen Effekt etwas zu modifizieren, indem wir die Rotkomponente unverändert lassen. Dies verpasst dem Bild einen einfachen Rotstich.

[...]
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
 Color.gb=(Color.r+Color.g+Color.b)/3.0f;// mache monochrom mit Rotstich
[...]

Postprocessing Shader Graustufen mit Rotstich

↑Top

4. Schwarz-Weiß-Shader (bwShader):

Aus dem Graustufenshader lässt sich mit Leichtigkeit ein Schwarz-Weiß-Shader programmieren. Dazu müssen wir einfach nur einen Schwellenwert definieren und alle Pixel mit einer Farbe darunter schwarz sowie alle darüber weiß färben. Eine zusätzliche IF-Else-Abfrage sollte uns dies ermöglichen. Dabei reicht es aus nur eine Farbkomponente zu vergleichen, weil wir zuvor allen den selben Mittelwert zugewiesen haben.

[...]
/*Außerhalb der Pixelshader-Funktion! Am Anfang der fx Datei*/
const float threshold=0.25f;//definiert eine Schwellenwert-Konstante
[...]

[...]
/*An der bekannten Stelle innerhalb der Shaderfunktion ab dem Erfassen der Pixelfarbe an Stelle Tex.xy*/
float4 Color;
Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
Color.rgb=(Color.r+Color.g+Color.b)/3.0f;// mache monochrom
if(Color.r<threshold){//Wenn Pixel dunkler als die Schwelle
  Color.rgb=0;//Schwarz darstellen
}else{
  Color.rgb=1.0f;//sonst Weiß zeichnen
}
return Color;

[...]

Probieren Sie mal verschiedene Schwellenwerte aus, um zu sehen wie sie sich auf die Darstellung auswirken.

Postprocessing Shader SchwarzWeiß

Nun muss es aber bei diesem netten Effekt nicht bleiben. Statt Weiß und Schwarz können auch ganz andere Farben benutzt werden. Für ein Ninjaspiel im Comic-Look könnte man z.B. einen Shader programmieren, der die Umgebung in Rot und Dunkelblau zeichnet. Alles was wir ändern müssen, sind die entsprechenden Zeilen.

[...]
Color.rgb=(Color.r+Color.g+Color.b)/3.0f;// mache monochrom
if(Color.r<threshold){//Wenn Pixel dunkler als die Schwelle
  Color.b=0.2f;//Dunkelblau darstellen
}else{
  Color.r=1.0f;//sonst Rot zeichnen
}

[...]

Das Ergebnis von diesem Shadercode ist jedoch relativ hässlich. Dies liegt daran, dass die jeweils anderen beiden Farbkomponenten nicht auf Null gesetzt wurden. Ändern wir das:

[...]
float4 Color;
Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
Color.rgb=(Color.r+Color.g+Color.b)/3.0f;// mache monochrom
if(Color.r<threshold){//Wenn Pixel dunkler als die Schwelle
  Color.b=0.2f;//Dunkelblau darstellen
  Color.rg=0;//Rot/Grün auf Null setzen
}else{
  Color.r=1.0f;//sonst Rot zeichnen
  Color.gb=0;//Grün und Blau auf Null setzen
}

[...]

Postprocessing Shader Ninja

↑Top

5. Einfacher Sepia-Shader:

Aus unserem Graustufenbild lässt sich aber nicht nur Schwarz/Weiß machen sondern auch ein viel ansehnlicherer Sepia Effekt! Was ist Sepia? Sepia wird oft für die Darstellung alten Bildmaterials verwendet. In Computerspielen lässt sich damit z.B. ein Zeitsprung Effekt oder eine Rückblende bewirken. Für die Erzeugung von Sepiatönen muss das Graustufenbild in die typischen rötlich-gelblichen Farben eingefärbt werden. Dies lässt sich am einfachsten direkt durch Hinzugabe von Rot und die Verringerung von Blau bewerkstelligen. Wieso die Verringerung von Blau? Ganz klar: die Komplementärfarbe von Blau ist Gelb! Wenn wir also den Blauanteil erniedrigen, erhöhen wir den Anteil an Gelb automatisch. Na dann, wollen wir mal:

[...]
float4 Color;
Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
Color.rgb=(Color.r+Color.g+Color.b)/3.0f;
Color.r+=0.15f;
Color.b-=0.15f;

[...]

Ich würde vorschlagen, für die 0.15f eine Konstante zu verwenden, nennen wir sie strength.

[...]
/*Außerhalb der Pixelshader-Funktion! Am Anfang der fx Datei*/
const float strength=0.15f;

[...]

[...]
//an der bekannten Stelle im Pixelshader
float4 Color;
Color=tex2D(mySampler,Tex.xy);//Pixelfarbe auslesen
Color.rgb=(Color.r+Color.g+Color.b)/3.0f;
Color.r+=strength;
Color.b-=strength;

[...]

Ändern Sie den Wert von strength ein bisschen, um den schönen Ton zu finden.
Das sieht doch wirklich aus wie ein altes Foto, nicht wahr.

Postprocessing Sepia

zurück| ↑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