Tutorial: Vertex Shader & Pixel Shader Unterstützung in DX9

Hier kannst du häufig gestellte Fragen/Antworten und Tutorials lesen und schreiben.
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Tutorial: Vertex Shader & Pixel Shader Unterstützung in DX9

Beitrag von mpz »

Hallo Leute,

hier möchte ich einen Shadereditor veröffentlichen der es ermöglichen soll eigene Shader in PB mit DX9 bzw MP3D zu schreiben. Ich werde
hier von Zeit zu Zeit immer neue Shader veröffentlich die ich dann näher erläutern werde. Wer Lust kann gerne eigene Shader hier einbringen

Den compilierter Shadereditor v0.5 zum ausführen und testen gibt es hier:
http://www.flasharts.de/mpz/MP_ShaderEditor.exe

Der Quelltext des Shadereditors v0.3 wird auch in der zukünftigen MP3D_31 mitgeliefert
http://www.flasharts.de/mpz/MP_Shadereditor.pb


Was sind Shader?
Shader sind Assembler Programme die direkt im Grafikprozessor der Grafikkarte ausgeführt werden.

Man unterscheidet Vertexshader und Pixelshader.
Vertexshader arbeiten mit der Geometrie der zu rendernden Modelle, dass heißt sie können die Vertexdaten (Eckpunkte) verändern.
Pixelshader arbeiten mit dem zu rendernden Pixeln selber zusammen, dass heißt sie können die Bildpunkte des gerenderten Objektes ändern.
Ebenfalls ist es möglich die Tiefenwerte zu manipulieren.

Was kann man mit Shadern machen ?
Höhere Effekte wie Normalmapping, Bloom, Softshadows, Bluring, CelShading und andere nur vorstellbare Effekte sind mit Shadern möglich.
Der Fantasie sind keine Grenzen gesetzt.

Warum sollte ich die Effekte in Vertex Shadern oder Pixel-Shader und nicht direkt PB schreiben ?
Der Grund dafür ist der direkte und unkomplizierte Zugriff auf die Renderdaten und die damit verbundenen Geschwindigkeitsgewinne.

Nachteile
Wenn man Shader benutzt wird die Lichtberechnung von DirectX nicht genutzt, da muss man
sich also selber raushelfen in dem man eine Lichtberechnung in den Shader einbaut.

Was soll dieses Tutorial erklären ?
Dieses Tutorial soll erklären wie wie ein Shader aufgebaut ist und wie man die benötigte Unterstützung für Pixel Shader und Vertex Shader in
PB mit DX9 oder einfacher in MP3D Programme einbaut um die High Level Shader Language (HLSL) von Microsoft nutzen zu können.

Der Shadereditor
Hiermit kann man bis zu 10 Texturen laden und ein Mesh. Standdardmäßig gibt es einen Würfel deren Vertex Eckpunkte
eingefärbt sind. Das Ergebnis sieht man als lichtabhängigen farbverlaufenden Würfel. Desweiteren kann man 3 Slider
Variable in Echtzeit verändern und es wird eine time Variable an den Shader übergeben. Die Position des Cursors wird angezeigt.
Bei einem Shaderfehler springt der Cursor zu dem Fehler. FPS wird angezeigt

Es gibt zwei Shadertechniken die getestet werden können:
1) Der normal Shader der auf eien Mesh angewendet wird. Dieser beeinflußt die VertexPunkte und Flächen des Meshs
2) Der postprocessing Shader der die Darstellung des Render Bildschirms verändert. Hier ist eine Vertexrechteckfläche
mit textur0 vorgegeben die über den Shader verändert werden kann.

Grundaufbaue eines Shaders, Beispielhaft:

Variablendefinition
Vertexshader
Pixelshader
Auszuführende Technik

Hier der erste einfachste Shader mit Kurzerklärung den es gibt

Simple_Wireframe_Shader.fx -> Name der Datei
Technique0 -> Names der auszuführenden Technik
pass p0 -> heißt nur eine Schleife wird berechnet
FillMode = wireframe -> Mesh wird im Wireframe gezeichnet

Code: Alles auswählen

technique Technique0
{
  pass p0
  {
	FillMode = wireframe;
  }
}
Hier die Variablenliste die dem Shader vom Shadereditor übergeben werden kann

mesh object:
worldViewProj -> typ matrix -> WorldView Matrix of Mesh
worldViewProjI -> typ matrix -> inverse WorldView Matrix of Mesh
matWorld -> typ matrix -> WorldView Matrix of Mesh
matWorldI -> typ matrix -> inverse WorldView Matrix of Mesh

light object:
lightDir -> typ 3 x float -> light direction
matLightWorld -> typ matrix -> World Matrix of light

camera object:
matCamView -> typ matrix -> camera view matrix
matCamViewI -> typ matrix -> inverse camera view matrix
matCamProj -> typ matrix -> camera projections matrix
vecEye -> typ 3 x float -> position of camera

texture object:
texture0 -> typ texture -> texture
texture1 -> typ texture -> texture
texture2 -> typ texture -> texture
texture3 -> typ texture -> texture
texture4 -> typ texture -> texture
texture5 -> typ texture -> texture
texture6 -> typ texture -> texture
texture7 -> typ texture -> texture
texture8 -> typ texture -> texture
texture9 -> typ texture -> texture

time object:
time -> typ float -> time in ms
slider object:
Var1 -> typ float(0 To 1) -> see gui of program
Var2 -> typ float(0 To 1) -> see gui of program
Var3 -> typ float(0 To 1) -> see gui of program
postfx -> typ float -> 0 = shader, 1 = postprocessing shader
mouse -> ty float2 -> GLSL comaptible mousefunction


Auflistung aller HLSL Funktionen
http://msdn.microsoft.com/en-us/library/ff471376.aspx


Ich hoffe Ihr habt Spaß und Lust an dem Tutorial

Gruß Michael
Zuletzt geändert von mpz am 20.04.2012 14:31, insgesamt 3-mal geändert.
Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

So,

hier kommt jetzt der Erste Vertexshader

worldViewProjI -> Ist hier die Übergabe der inversen Mesh Matrix an den Shader
OUT.color = IN.color -> Bedeutet das der Vertex Color übergeben wird.
Nach dem Start sieht man das die Farben deutlich leuchten. Das liegt daran das im Shader keine
Lichberechnungen durchgeführt werden, sondern die Farben selber leuchten. Ein Lichtsteuerung
kann man auch programmieren, aber davon später

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Simple_Vertex_Shader.fx
//     Author: Michael Pauwlitz
//    Last Modified: 
//    Description: Easy Vertex Shader, Show only the color of the Vertex
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

float4x4 worldViewProjI : WorldViewProjection; // This matrix will be loaded by the application

//-----------------------------------------------------------------------------
// Vertex Definitions
//-----------------------------------------------------------------------------

// Our sample application will send vertices 
// down the pipeline laid-out like this...

struct VS_INPUT
{
    float3 position	: POSITION;
    float4 color	 : COLOR0;
};

// Once the vertex shader is finished, it will 
// pass the vertices on to the pixel shader like this...

struct VS_OUTPUT
{
    float4 hposition : POSITION;
    float4 color	 : COLOR0;
};

//-----------------------------------------------------------------------------
// Simple Vertex Shader
//-----------------------------------------------------------------------------

VS_OUTPUT myvs( VS_INPUT IN )
{
    VS_OUTPUT OUT;

	OUT.hposition = mul( worldViewProjI, float4(IN.position.x ,IN.position.y ,IN.position.z, 1) ); //
                OUT.color =  IN.color ;  //Read vertex Color and show them
	return OUT;
}


//-----------------------------------------------------------------------------
// Simple Effect (1 technique with 1 pass)
//-----------------------------------------------------------------------------

technique Technique0
{
    pass Pass0
    {

                VertexShader = compile vs_2_0 myvs();
		PixelShader  = Null;
    }
}
Gruß Michael
Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hi,

damit jetzt nicht gähnende Langweile auftaucht wollen wir mal den Vertex Shader manipulieren.
Dazu gibt es im Shadereditor die drei Regler Var1-Var3

Bekannte Variablen:
worldViewProjI -> Ist hier die Übergabe der inversen Mesh Matrix an den Shader

Dazu gibt es jetzt die neuen Regler
float Var1;
float Var2;
float Var3;

Wichtig bei Shadern ist das die meisten Werte im float Wertberich von 0-1 angesiedelt sind. Daher erhalten
die Regler Var1-Var3 den Wertbereich von 0-1.

float4 wird bei einem Shader als Struktur /x, /y, /z, /w beschrieben und bzw. oder /r, /g,/b,/a
Ein float3 als /r/g/b und/oder /x/y/z usw.
Nächste wichtiger Punkt Variablen-Namen. Bei einer Variablen muss auf groß und Kleinschreibung geachtet werden.
Var1 und var1 sind im Shader zwei unterschiedliche Dinge

Wir manipulieren daher die Farben einfach mit
OUT.color = float4 (IN.color.r*Var1,IN.color.g*Var2,IN.color.b*Var3,IN.color.a)
also einfach mal mit den Reglern spielen.

Über diese Art von Steuerung kann man ganz einfach einen ToonShader erstellen, wie das nächste Mal

Gruß Michael

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Simple_Vertex_Shader_with_ColorSettings.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: Easy Vertex Shader, Show only the color of the Vertex
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

float4x4 worldViewProjI : WorldViewProjection; // This matrix will be loaded by the application
float Var1;
float Var2;
float Var3;

//-----------------------------------------------------------------------------
// Vertex Definitions
//-----------------------------------------------------------------------------

// Our sample application will send vertices
// down the pipeline laid-out like this...

struct VS_INPUT
{
    float3 position   : POSITION;
    float4 color    : COLOR0;
};

// Once the vertex shader is finished, it will
// pass the vertices on to the pixel shader like this...

struct VS_OUTPUT
{
    float4 hposition : POSITION;
    float4 color    : COLOR0;
};

//-----------------------------------------------------------------------------
// Simple Vertex Shader
//-----------------------------------------------------------------------------

VS_OUTPUT myvs( VS_INPUT IN )
{
    VS_OUTPUT OUT;

   OUT.hposition = mul( worldViewProjI, float4(IN.position.x ,IN.position.y ,IN.position.z, 1) ); //
                OUT.color =  float4 (IN.color.r*Var1,IN.color.g*Var2,IN.color.b*Var3,IN.color.a) ;  //Read vertex Color and show them
   return OUT;
}

//-----------------------------------------------------------------------------
// Simple Effect (1 technique with 1 pass)
//-----------------------------------------------------------------------------

technique Technique0
{
    pass Pass0
    {

                VertexShader = compile vs_2_0 myvs();
      PixelShader  = Null;
    }
}

Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hi,

nachdem wir uns mit den Farbe des Vertex Shader vertraut gemacht haben geht es jetzt an die Eckpunkte den Vertex Punkten eins Meshs.
Hier kommt eine neue Variable des Shadereditors ins Spiel die time variable die eine laufende Zeit als ms an den Shader übergibt. Die Vertexpunkte
werden hier über IN.position.x/y/z bestimmt und wir spielen mal mit den sin/cos/tan function des Shaders rum. Raus kommt dann die folegende Zeile:

float4(IN.position.x *sin(time),IN.position.y*cos(time) ,IN.position.z*tan(time), 1) )

Bekannte Variablen:
worldViewProjI -> Ist hier die Übergabe der inversen Mesh Matrix an den Shader

Dazu jetzt
float time; -> Vergangene Zeit in ms

Damit sind schon die Grundlagen des Vertexshaders erklärt und dürfen von Euch weiter manipuliert werden...

Gruß Michael

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Simple_Vertex_Shader_with_moving.fx
//     Author: Michael Pauwlitz
//    Last Modified: 
//    Description: Easy Vertex Shader, Show only the color of the Vertex
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

float4x4 worldViewProjI : WorldViewProjection; // This matrix will be loaded by the application
float time;

//-----------------------------------------------------------------------------
// Vertex Definitions
//-----------------------------------------------------------------------------

// Our sample application will send vertices 
// down the pipeline laid-out like this...

struct VS_INPUT
{
    float3 position	: POSITION;
    float4 color	 : COLOR0;
};

// Once the vertex shader is finished, it will 
// pass the vertices on to the pixel shader like this...

struct VS_OUTPUT
{
    float4 hposition : POSITION;
    float4 color	 : COLOR0;
};

//-----------------------------------------------------------------------------
// Simple Vertex Shader
//-----------------------------------------------------------------------------

VS_OUTPUT myvs( VS_INPUT IN )
{
    VS_OUTPUT OUT;

	OUT.hposition = mul( worldViewProjI, float4(IN.position.x *sin(time),IN.position.y*cos(time) ,IN.position.z*tan(time), 1) ); //
                OUT.color =  IN.color ;//; Read vertex Color and show them
	return OUT;
}


//-----------------------------------------------------------------------------
// Simple Effect (1 technique with 1 pass)
//-----------------------------------------------------------------------------

technique Technique0
{
    pass Pass0
    {

                VertexShader = compile vs_2_0 myvs();
		PixelShader  = Null;
    }
}

Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hi,

nachdem wir uns mit den Vertex Shadern vertraut gemacht haben geht es an den Pixelshader. den Pixelshader kann man auf ein Mesh anwenden, aber auch als Postprocessing für das Render Fenster. Dabei wird bei dem Postprocessing der Backbuffer in eine Textur kopiert, diese über einen Shader auf einen Mesh der als Rechteckfläche dargestellt wird gerendet und auf den Backbuffer zurückkopiert. D.h. Ihr könnt die folgenden Pixelshader sowohl als "Vertex / Pixel Shader" als auch als "Postprocessing Shader" benutzen. Um hier mit Pixelshadern zu arbeiten benötigen wir als erstes zwei Texturen

Code: Alles auswählen

If OpenWindow(0, 100, 90, 300, 300, "Create two Textures")

  If CreateImage(0, 255, 255)
    
    LoadFont(1, "Arial", 20)

    LoadFont(2, "Arial", 30)
    
    StartDrawing(ImageOutput(0))
    
    For k=0 To 255
      FrontColor(RGB(k,0, 255-k))  ; a rainbow, from black to pink
      Line(1, k, 255, 1)
    Next
    
    DrawingMode(#PB_2DDrawing_Transparent)
    DrawingFont(FontID(1)) 
    FrontColor(RGB(255,255,255)) ; print the text to white !
    DrawText(10, 50, "Only a Test-Texture")
    FrontColor(RGB(255,0,0)) ; print the text to white !
    DrawText(75, 90, "for MP3D !")
    
      Circle(60,200,20,RGB(0,255,255))  ; a nice blue circle...

      Box(100,185,30,30, RGB(0,255,0))  ; and a green box

    Ellipse(185, 200, 30, 15, RGB(255,255,0)) 

    
    StopDrawing() ; This is absolutely needed when the drawing operations are finished !!! Never forget it !
    
    SaveImage(0, "Demo_Texture_1.bmp")
    
    StartDrawing(ImageOutput(0))
    
    DrawingMode(#PB_2DDrawing_Gradient)      
    BackColor($0000FF)
    GradientColor(0.4, $00FFFF)
    GradientColor(0.6, $FFFF00)
    FrontColor($FF0000)
    
    BoxedGradient(0, 0, 255, 255)
    Box(0, 0, 255, 255)
    
    DrawingMode(#PB_2DDrawing_Transparent)
    DrawingFont(FontID(1)) 
    FrontColor(RGB(255,0,255)) ; print the text to white !
    BackColor($000000)
    DrawText(10, 50, "Only a Test-Texture")
    FrontColor(RGB(0,255,0)) ; print the text to white !
    DrawText(75, 90, "for MP3D !")

    StopDrawing() ; This is absolutely needed when the drawing operations are finished !!! Never forget it !
 
    SaveImage(0, "Demo_Texture_2.bmp")
    
  EndIf
  
    Repeat
    EventID = WaitWindowEvent()
    
    If EventID = #PB_Event_Repaint
      StartDrawing(WindowOutput(0))
        DrawImage(ImageID(0), 20, 10)
      StopDrawing()    
    EndIf
    
  Until EventID = #PB_Event_CloseWindow  ; If the user has pressed on the close button

  EndIf
  
End   ; All the opened windows are closed automatically by PureBasic
Im Shadereditor wählt Ihr jetzt bitte "Load Texture Nr: (0)" Demo_Texture_1.bmp aus. Diese wird gleich auf dem Würfel angezeigt

Folgender Easy Pixelshader wird unsere weitere Grundlage sein. Die Datei "Demo_Texture_1.bmp" wird als texture0 geladen und dem Shader übergeben. Wenn man den Shader als "Vertex / Pixel Shader" und auch als "Postprocessing Shader" einsetzt sieht man das Gleiche wie zuvor, da der Shader die Textur auf den Mesh darstellt und den Renderbildschirm so läßt wie er ist. Aber... Damit läßt sich sehr viel machen.... Was genau kommt später

Gruß Michael

Dazu kommt jetzt eine neue Variable
texture0 -> geladene Textur, z.B. "Demo_Texture_1.bmp"

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Easy_texture_Shader_Post.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: Easy PixelShader, Show only the texture0
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

texture texture0;

sampler Sampler1 = sampler_state 
{ 
texture   = <texture0>;
};

float4 PStexture(float2 Tex : TEXCOORD0) : COLOR
{
    return tex2D(Sampler1, Tex);
}

technique inverse
{
    pass p1  
    {
        PixelShader = compile ps_2_0 PStexture();
    }
}
Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hallo,

so jetzt haben wir den Grund Pixel Shader und wollen mit diesem rumspielen. Die einfachste Manipulation ist die Inverse darstellung der Grafik. Hier geben wir folgendes ein:

Code: Alles auswählen

  return 1.0f - tex2D(Sampler1, Tex);


Heißt alle Farbwerte (r,g,b,a) sollen 1 (= 255 in PB) haben und die echten Farbwerte der Textur werden hiervon abgezogen.
Um diese Funktion genau zu beschreiben kann man sie auch anders eingeben:

Code: Alles auswählen

  return float4(1,1,1,1) - tex2D(Sampler1, Tex);

float4(1,1,1,1) -> 4 x Fließkommazahlen(Rotwert, Grünwert,Blauwert,Alphawert)
tex2D(Sampler1, Tex) -> Textur , Tex besteht aus der Struktur Tex.x/Texy und entspricht damit float2 (x_Position der Texure, y_Position der Texure)

Man kann hier in allen Richtungen manipulieren:
return tex2D(Sampler1, Tex) - float4(1,0,0,0);
heißt z.B. das die Farbe Rot nicht mehr angezeigt wird

Wenn man diese Funktionen als "Vertex / Pixel Shader" benutzt wird nur die Texture auf dem Mesh verändert dargestellt als "Postprocessing Shader" wird der gesamte 3D Screen verändert

Gruß Michael

Code: Alles auswählen

//-----------------------------------------------------------------------------
//    Name: Inverse_texture_Shader_Post.fx
//    Author: Michael Paulwitz
//    Last Modified:
//    Description: Inverse Texture
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

texture texture0;

sampler Sampler1 = sampler_state 
{ 
texture   = <texture0>;
};

float4 PSInverse(float2 Tex : TEXCOORD0) : COLOR
{
    return 1.0f - tex2D(Sampler1, Tex);
    

}

technique inverse
{
    pass p1  
    {
        PixelShader = compile ps_2_0 PSInverse();
    }
}
Zuletzt geändert von mpz am 04.03.2012 17:51, insgesamt 1-mal geändert.
Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hallo,

so jetzt haben wir den Grund Pixel Shader und wollen mit diesem rumspielen. Die einfachste Manipulation ist die Inverse darstellung der Grafik. Hier geben wir folgendes ein:

Code: Alles auswählen

  return 1.0f - tex2D(Sampler1, Tex);


Heißt alle Farbwerte (r,g,b,a) sollen 1 (= 255 in PB) haben und die echten Farbwerte der Textur werden hiervon abgezogen.
Um diese Funktion genau zu beschreiben kann man sie auch anders eingeben:

Code: Alles auswählen

  return float4(1,1,1,1) - tex2D(Sampler1, Tex);

float4(1,1,1,1) -> 4 x Fließkommazahlen(Rotwert, Grünwert,Blauwert,Alphawert)
tex2D(Sampler1, Tex) -> Textur , Tex besteht aus der Struktur Tex.x/Texy und entspricht damit float2 (x_Position der Texure, y_Position der Texure)

Man kann hier in allen Richtungen manipulieren:
return tex2D(Sampler1, Tex) - float4(1,0,0,0);
heißt z.B. das die Farbe Rot nicht mehr angezeigt wird

Wenn man diese Funktionen als "Vertex / Pixel Shader" benutzt wird nur die Texture auf dem Mesh verändert dargestellt als "Postprocessing Shader" wird der gesamte 3D Screen verändert

Gruß Michael

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Inverse_Shader_post.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: Inverse Texture
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

texture texture0;

sampler Sampler1 = sampler_state 
{ 
texture   = <texture0>;
};

float4 PSInverse(float2 Tex : TEXCOORD0) : COLOR
{
    return 1.0f - tex2D(Sampler1, Tex);
    

}

technique inverse
{
    pass p1  
    {
        PixelShader = compile ps_2_0 PSInverse();
    }
}
Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hallo,

nachdem wir die Textur in der Farbe verändern können, wollen wir uns mit der Position der Texture beschäftigen. Die Texture können wir z.B. auch wie folgt beschreiben

Code: Alles auswählen

tex2D(Sampler1, Tex) = tex2D(Sampler1, float2(Tex.x,Tex.y));
um also eine Texture zu spiegeln kann man folgendes benutzen

Code: Alles auswählen

return tex2D(Sampler1, float2(Tex.x, 1 - Tex.y)); 
Für mein nächstes Beispiel, der bewegten Texture, benutze ich wieder meine geliebte time; Variable:

Hinweis
Wenn man den Shader als Postprocessing Shader einsetzt sieht man einen Streifen der bruchhafte Grafik enthält. Das passiert weil ich im Shadereditor ein
Vieport (Bildabschnitt) verwende, aber der gesammte FensterHintergrund gescrollt wird. In einem normalen Programm entstehen diese
Grafikrelikte nicht. Man kann dieses auch bei einem Viewport umgehen indem man den Shader auf diesen Viewport anpasst.

Gruß Michael

Vom Shadereditor übergeben Variablen:
time -> Zeit in ms
texture0 -> geladene Textur, z.B. "Demo_Texture_1.bmp"

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Move_texture_shader_post.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: Easy Shader to move the texture
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

texture texture0;
float time;

sampler Sampler1 = sampler_state 
{ 
texture   = <texture0>;
};

float4 PSInverse(float2 Tex : TEXCOORD0) : COLOR
{
    return tex2D(Sampler1, float2(Tex.x,Tex.y+(1*sin(time))));
}

technique inverse
{
    pass p1  
    {

        PixelShader = compile ps_2_0 PSInverse();
    }
}

Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hi,

hier mal eine Sammlung von bildverändernden Shadern die in jede Toolbox gehören. Der Grundshade4 wird immer nur leicht variiert bzw. nur der "Innenteil" ausgetauscht

Vom Shadereditor übergeben Variablen:
texture0 -> geladene Textur, z.B. "Demo_Texture_1.bmp"
Var1 -> Schieberegler Var1
Var2 -> Schieberegler Var2

Gruß Michael

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Simple_Brightness_contrast_Shader_post.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: Brightness and contrast 
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

texture texture0;
float Var1;
float Var2;


sampler Sampler1 = sampler_state 
{ 
texture   = <texture0>;
};

float4 PSbrightcont(float2 Tex : TEXCOORD0) : COLOR
{
    float brightness= Var1;
    float contrast = Var2;
   float4 color = tex2D(Sampler1, Tex ); 
   return (color + brightness) * (1.0+contrast) / 1.0;

}

technique brightnesscontrast
{
    pass p1  
    {
        PixelShader = compile ps_2_0 PSbrightcont();
    }
}

Code: Alles auswählen

// Helligkeitshader
return tex2D( Sampler1, Tex.xy)*3;

Code: Alles auswählen

// Helligkeitsverlaufsshader
return tex2D( Sampler1, Tex.xy)*Tex.x;

Code: Alles auswählen

// Blau wird betint Shader
float4 Color = tex2D( Sampler1, Tex.xy); 
Color.b = Color.b*2;
return Color;

Code: Alles auswählen

// Farbsteifen Shader
float4 Color = tex2D( Sampler1, Tex.xy); 
Color.r = Color.r*sin(Tex.x*100)*2; 
Color.g = Color.g*cos(Tex.x*150)*2; 
Color.b = Color.b*sin(Tex.x*50)*2;
return Color;

Code: Alles auswählen

// Streck Shader
Tex.x = Tex.x * 0.5; 
return tex2D( Sampler1, Tex.xy);

Code: Alles auswählen

// Schrumpfshader
Tex.x = Tex.x / 0.5; 
return tex2D( Sampler1, Tex.xy);

Code: Alles auswählen

// Wellenshader
Tex.y = Tex.y + (sin(Tex.y*100)*0.03); 
return  tex2D( Sampler1, Tex.xy);

Code: Alles auswählen

// Farbverschiebungsshader
float4 Color = tex2D( Sampler1, Tex); 
Color.r -= tex2D( Sampler1, Tex+(Var1/1)).r; 
Color.g += tex2D( Sampler1, Tex+ (Var1/2)).g; 
Color.b -= tex2D( Sampler1, Tex+ (Var1/3)).b;
return Color;

Code: Alles auswählen

// SW Relief Shader
Color =0; 
Color -= tex2D(Sampler1, Tex.xy-0.003)*2.7f; 
Color += tex2D( Sampler1, Tex.xy+0.003)*2.7f; 
Color.rgb = (Color.r+Color.g+Color.b)/3.0f;
return Color;

Code: Alles auswählen

// BlackWhite Shader
float4 Color = tex2D( Sampler1, Tex); 
Color.rgb = (Color.r+Color.g+Color.b)/3.0f; 
if (Color.r<0.2 || Color.r>0.5) Color.r = 0; else Color.r = 1.0f; 
if (Color.g<0.2 || Color.g>0.5) Color.g = 0; else Color.g = 1.0f; 
if (Color.b<0.2 || Color.b>0.5) Color.b = 0; else Color.b = 1.0f;
return Color;
Working on - MP3D Engine -
Benutzeravatar
mpz
Beiträge: 497
Registriert: 14.06.2005 15:53
Computerausstattung: Win 10 Pro, 16 GB Ram, Intel I5 CPU und TI1070 Grafikkarte, PB 5.73 / 6.00 beta4
Wohnort: Berlin, Tempelhof

Re: Tutorial: Vertex Shader & Pixel Shader Unterstützung in

Beitrag von mpz »

Hi,

ab heute gibt es einen neuen Shadereditor zum downloaden, Version 0.3 (siehe download erster Beitrag). In diesem Editor gibt es zwei eine neue Variablen.

float postfx; // Wenn postfx = 1 ist es ein postprocessing Shader
und
float2 mouse; // mouse.x = Bildschirmkoordinate x als 0-1, mouse.y = Bildschirmkoordinate y als 0-1

Diese Anpassungen haben ich vorgenommen damit konvertierte GLSL Shader einfacher implementiert werden können (die mein GLSL to HLSL Konverter erstellt) und damit man die beiden Shaderarten im Shader besser unterscheiden kann...

Hier nun das neue Tutorial:
und zwar bedingte Anweisungen bekannt in PB als "if" und "else"

if (Tex.y > 0.5) bedeutet das die erste Anweisung ausgeführt wird für die Hälfte der Textur, und für die andere Hälfte die andere Anweisung

Code: Alles auswählen

    
if (Tex.y > 0.5) {
       return tex2D(Sampler1, Tex); // normal texture 
    } else {
        return 1-tex2D(Sampler1, Tex); // inverse texture 
    }

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: HalfInverse_Shader_Post.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: halv inverse, Show only the texture0
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

texture texture0;

sampler Sampler1 = sampler_state 
{ 
texture   = <texture0>;
};

float4 PStexture(float2 Tex : TEXCOORD0) : COLOR
{

    if (Tex.y > 0.5) {
       return tex2D(Sampler1, Tex);
    } else {
        return 1-tex2D(Sampler1, Tex);
    }
}

technique inverse
{
    pass p1  
    {
        PixelShader = compile ps_2_0 PStexture();
    }
}
Mit dieser bedingten Anweisung kann man mit dem Shadereditor v0.3 auch gut zwischen normalen Shader und postprocessing Shader unterscheiden.

Als Shader wird der Mesh blau und als postprocessing Shader der Bildschirm gelb

Code: Alles auswählen

//-----------------------------------------------------------------------------
//     Name: Shaderkind_Shader_Post.fx
//     Author: Michael Paulwitz
//    Last Modified:
//    Description: shader blue, post shader screen yellow
//-----------------------------------------------------------------------------

//-----------------------------------------------------------------------------
// Effect File Variables
//-----------------------------------------------------------------------------

float postfx;

float4 PStexture(float2 Tex : TEXCOORD0) : COLOR
{

    if (postfx == 0) {
       return float4(0,0,1,1);
    } else {
       return float4(1,1,0,1);
    }
}

technique inverse
{
    pass p1  
    {
        PixelShader = compile ps_2_0 PStexture();
    }
}



So das war es wieder liebe Leute,
Michael
Working on - MP3D Engine -
Antworten