Deutsch Startseite English

Wed, 28 Jun 2017

Sitemap

Lite-C,3d Game Studio

Postprocessing Shader Tutorial Teil I:

::.Grundstruktur.::

Seite 2: Wenn Ihr Level in der A7 Engine des 3D GameStudios so altgebacken aussieht und das, obwohl Sie doch perfekte Texturen und saubere Modelle oder gar hin und wieder auf solche Shadereffekte zugreifen wie Bumpmapping, Normalmapping oder Prallaxmapping. Dann fehlen Ihnen Postprocessingeffekte. In der folgenden Tutorialserie werde ich Ihnen zeigen, wie Sie z.B. einen einfachen Blurshader programmieren und implementieren können.
Erst einmal geht es um die Grundstruktur eines solchen Shadereffektes in HLSL und um die einfache Implementierung über lite-c.

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

Schwierigkeit:**

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

Zusatzmaterial: postprocessdat.rar

Vorwort | Arbeitsumgebung | Grundstruktur |
Implementierung in die A7 Engine | Effekte und Spielereien | Zusammenfassung | Additum

4. Implementierung in die A7 Engine:

Die Zuweisung geschieht mit folgendem Code, der einfach nach der Definition des Materials eingefügt wird:

VIEW* postprocess ={
 material=mtl_myMaterial;
 flags=PROCESS_TARGET;
}

void main()
{
 camera.stage=postprocess;
 wait(1);
 level_load("postlevel.wmb");//Ihr Level wird geladen
}

Sie müssen hierfür ein neues VIEW-Objekt definieren und ihm das Material mtl_myMaterial zuweisen, was Dank der neuesten Version des 3DGS ermöglicht wird. Als flag muss PROCESS_TARGET angegeben werden, damit Ihre TargetMap mit dem Screenbuffer (dem unbearbeiteten "Screenshot") belegt wird.
Zu guter Letzt muss man der benutzten Spielkamera, meist der in lite-c vordefinierten camera, gesagt werden, dass sie das Bild nicht gleich auf den Bildschirm rendern soll, sondern eben in den Buffer, der an das andere VIEW-Objekt übergeben, verändert und erst anschließend auf den Bildschirm gezeichnet wird. Dies geschieht über den neuen lite-c exklusiven .stage Parameter des VIEWs:
"camera.stage=postprocess;"
Probieren Sie es aus! Wenn Sie alles richtig gemacht haben, müssten Sie jetzt in der Lage sein, die Engine zu starten. Klicken Sie also auf Test Run und los geht es!

Postprocessing Shader normal

↑Top

5. Effekte und Spielereien:

Nun richtig beeindruckend sieht dies ja nicht aus. Genau genommen würde man ohne zuwissen, dass hier ein Postprocessingshader läuft, gar nicht darauf kommen. Ist auch selbstverständlich, denn Sie haben noch nichts mit dem Buffer angestellt, sodass er unverändert auf dem Monitor erscheint. Dieser kleine Umstand lässt aber schnell ändern! Falls ihr Code aus irgendwelchen Gründen nicht funktioniert, laden Sie einfach posteffect2.c in Ihren Scripteditor. Dieser Code enthält alles, was Sie bisher gemacht haben und zudem eine Funktion zum Drehen der Kamera.

Kehren Sie zum Pixelshadercode zurück:

//Shader
float4 PP_Shader (float2 Tex: TEXCOORD0):Color0
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);
 return Color;
}

Diese Funktion ist ihre Spielwiese zum Austoben. Wie wäre es, wenn Sie Ihrem Level ein zauberhaftes Erscheinen verpassen würden? Hierfür müssten Sie z.B. nur am Blau-Wert der Pixel rumspielen.

float4 PP_Shader (float2 Tex: TEXCOORD0):Color0
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);
 Color.b+=0.3f;//mehr Blau für jeden Pixel
 return Color;
}

"Color.b+=0.3f;" addiert zum Blau des Pixels (Sie erinnern sich, der Shader wird auf jeden Pixel des Bildschirmes angewendet) 0.3 dazu.
Starten Sie jetzt wieder Ihr Level!

Postprocessing Shader blau

Das sieht doch wirklich wie in einem Märchenwald aus. Es empfiehlt sich Konstanten im Definitionsbereich zu definieren. Und das werden Sie jetzt tun:

//Definitionsbereich
texture TargetMap;
const float blauwert=0.3f;//definiert eine Konstante

Jetzt können Sie diese Konstante im Pixelshader verwenden:

float4 PP_Shader (float2 Tex: TEXCOORD0):Color0
{
 float4 Color;
 Color=tex2D(mySampler,Tex.xy);
 Color.b+=blauwert;//mehr Blau für jeden Pixel
 return Color;
}

const float definiert eine Konstante Fließkommazahl. Um das Ende der Fließkommazahl anzugeben, muss nach der letzten Nachkommastelle ein "f" stehen.
Jetzt können Sie über diese Konstante die Stärke des Blaus Ihres Levels bestimmen.
Spielen Sie ruhig mit verschiedenen Werten herum. Selbstverständlich lassen sich auf diese Weise auch Color.r (rot) oder Color.g (grün) verändern.
Damit endet der erste Teil der Tutorialserie zu Postprocessing Shadern. Im nächsten Teil erwarten Sie noch mehr witzige Spielereien mit dem Screenbuffer.
Ich hoffe, ich konnte Ihnen die Welt des Postprocessings mit der A7 Engine und lite-c näher bringen. Um das Tutorial möglichst einfach zu halten, habe ich viele Hintergrundinformationen zu HLSL und der Funktionsweise von Shadern ausgelassen. Sollten Sie mehr wissen wollen, schauen Sie sich das Shadertutorial auf der Downloadseite des 3D GameStudios an.

Postprocessing Shader grün

Postprocessing Shader rot

↑Top

Zusammenfassung:

Was Sie im Rahmen dieses Tutorials gelernt haben:

↑Top

Additum:

Es ist vielleicht schön und gut den Shader gleich im Quellcode zu haben aber weitaus nützlicher ist er als externe FX Datei. Denn so lässt sich mit einem einfachen Handgriff der Shader in Laufzeit der Engine verändern und ausprobieren. Dazu schneiden Sie alles in den Anführungszeichen von effect="[Shader]"; in Ihrem Material aus und schreiben stattdessen: effect="postprocess.fx";
Nun erstellen Sie eine neues Script im Scripteditor namens postprocess im selben Ordner, wo sich Ihr Quellcode befindet, und fügen den ausgeschnittenen Code in sie ein. Anschließend speichern Sie die Datei mit der Endung .fx; Um den Effekt in Laufzeit ändern zu können, muss er automatisch neugeladen werden.

Material* mtl_MyMaterial={
 effect="postprocess.fx";
 flags=AUTORELOAD;//das Material wird automatisch neugeladen
}

Jetzt können Sie die Engine starten und in Echtzeit die Konstante blauwert oder gar den gesamten Shadercode verändern. Blauwert kann übrigens nur extern verändert werden. Es ist also nur für die Engine eine Konstante.

erste | ↑Top | Teil II

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