XNA L10–Shaders Part 1

127
Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 XNA Game Development L10 – Shaders Part 1

Transcript of XNA L10–Shaders Part 1

Page 1: XNA L10–Shaders Part 1

Mohammad Shakermohammadshaker.com

@ZGTRShaker2011, 2012, 2013, 2014

XNA Game DevelopmentL10 – Shaders Part 1

Page 2: XNA L10–Shaders Part 1

Working with Shaders in XNA

Page 3: XNA L10–Shaders Part 1

What is a shader?!

Page 4: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 5: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 6: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 7: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 8: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 9: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 10: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 11: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 12: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 13: XNA L10–Shaders Part 1

What a shader is?!

• Fixed Function Pipeline (FFP)

– limits what game developers can do, but ease things off for them

• Programmable graphics pipelines

– You get to decide exactly how things should be performed

Page 14: XNA L10–Shaders Part 1

HLSLHigh Level Shader Language

Page 15: XNA L10–Shaders Part 1

HLSL

• HLSL is used not to improve the gameplay, but to enhance the quality of the final

image.

Page 16: XNA L10–Shaders Part 1

HLSL

• Every vertex that is drawn will pass through your vertex shader, and even every

pixel drawn will have passed through your pixel shader

Page 17: XNA L10–Shaders Part 1

HLSL

Page 18: XNA L10–Shaders Part 1

The effect file

• One of the main differences between DirectX 9 and XNA is that we need an effect

for everything we draw!

Page 19: XNA L10–Shaders Part 1

The effect file

• So, what exactly is an “effect”?

Page 20: XNA L10–Shaders Part 1

The effect file

• In 3D programming, all objects are represented using triangles. Even spheres!

Page 21: XNA L10–Shaders Part 1

The effect file

• An effect is…!

Page 22: XNA L10–Shaders Part 1

The effect file

• An effect is some code that instructs your hardware (the graphics card) how it

should display these triangles

• An effect file contains one or more “techniques”

• For example technique A and technique B. Drawing triangles using technique A

will for example draw them semi-transparent, while drawing them using technique

B will for example draw all objects using only blue-gray colors as seen in some

horror movies.

Page 23: XNA L10–Shaders Part 1

The effect file

• Declaring an effect

Effect effect;

Page 24: XNA L10–Shaders Part 1

The effect file

• .FX Files

Page 25: XNA L10–Shaders Part 1

The effect file

• Declaring an effect

• Loading the effect file

Effect effect;

effect = Content.Load<Effect> ("effects");

Page 26: XNA L10–Shaders Part 1

The effect file

• Declaring an effect

• Loading the effect file

Effect effect;

effect = Content.Load<Effect> ("effects");

Page 27: XNA L10–Shaders Part 1

The effect file

• Declaring an effect

• Loading the effect file

Effect effect;

effect = Content.Load<Effect> ("effects");

Page 28: XNA L10–Shaders Part 1

The effect file

• Declaring an effect

• Loading the effect file

• Draw() method

Effect effect;

effect = Content.Load<Effect> ("effects");

device.Clear(Color.DarkSlateBlue);

Page 29: XNA L10–Shaders Part 1

The effect file

• Using a “User-Defined Technique”!

effect.CurrentTechnique = effect.Techniques["Pretransformed"];

Page 30: XNA L10–Shaders Part 1

The effect file

• Using a “User-Defined Technique”!

effect.CurrentTechnique = effect.Techniques["Pretransformed"];

Page 31: XNA L10–Shaders Part 1

The effect file

• Using a “User-Defined Technique”!

effect.CurrentTechnique = effect.Techniques["Pretransformed"];

• A technique can be made up of multiple passes, so we need to iteratethrough them. Add this code below the code you just entered:

foreach (EffectPass pass in effect.CurrentTechnique.Passes){

pass.Apply();

}

Page 32: XNA L10–Shaders Part 1

The effect file

• Using a “User-Defined Technique”!

effect.CurrentTechnique = effect.Techniques["Pretransformed"];

• A technique can be made up of multiple passes, so we need to iteratethrough them. Add this code below the code you just entered:

foreach (EffectPass pass in effect.CurrentTechnique.Passes){

pass.Apply();

// Drawing code that this technique applies its effect to!

}

Page 33: XNA L10–Shaders Part 1

The effect file

• Using a “User-Defined Technique”!

effect.CurrentTechnique = effect.Techniques["Pretransformed"];

• A technique can be made up of multiple passes, so we need to iteratethrough them. Add this code below the code you just entered:

foreach (EffectPass pass in effect.CurrentTechnique.Passes){

pass.Apply();

// Drawing code that this technique applies its effect to!

}

Page 34: XNA L10–Shaders Part 1

The effect file

• Quite simple!

Page 35: XNA L10–Shaders Part 1

HLSL – Vertex Format

Page 36: XNA L10–Shaders Part 1

HLSLLet’s play with shaders a bit!

Page 37: XNA L10–Shaders Part 1

HLSL

• Let’s play with shaders a bit!

– Mo l3beh ha! :D

Page 38: XNA L10–Shaders Part 1

HLSL – Vertex Format

• Remember VertexPositionColor?

Page 39: XNA L10–Shaders Part 1

HLSL – Vertex Format

• We’ll just design our own

• “VertexPositionColor”!

Page 40: XNA L10–Shaders Part 1

HLSL – Vertex Format

• We’ll just design our own

• “VertexPositionColor”!

Page 41: XNA L10–Shaders Part 1

HLSL – Vertex Format

• Let’s name it

• “MyOwnVertexFormat”

Page 42: XNA L10–Shaders Part 1

HLSL – Vertex Format

• What we need is

– A structure that can hold the necessary data for each vertex and

• What we need is

– A structure that can hold the necessary data for each vertex and

– A definition of the data, so the vertex shader knows which data is included with every vertex.

• A simple colored triangle through using our format “MyOwnVertexFormat”

• What should our vertex shader hold?!

• Just holding a position and a color!

Page 43: XNA L10–Shaders Part 1

HLSL – Vertex Format

struct MyOwnVertexFormat{

private Vector3 position;private Color color;

public MyOwnVertexFormat (Vector3 position, Color color){

this.position = position;this.color = color;

}}

Page 44: XNA L10–Shaders Part 1

struct MyOwnVertexFormat{

private Vector3 position;private Color color;

public MyOwnVertexFormat (Vector3 position, Color color){

this.position = position;this.color = color;

}}

HLSL – Vertex Format

Page 45: XNA L10–Shaders Part 1

HLSL – Vertex Format

• Now, since we are dealing with the graphics card ,

• the graphics card needs to be told explicitly which data it will receive.

Page 46: XNA L10–Shaders Part 1

HLSL – Vertex Format

• Adding the following code to our struct

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

Page 47: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 48: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 49: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 50: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 51: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 52: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 53: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 54: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 55: XNA L10–Shaders Part 1

public readonly static VertexDeclaration VertexDeclaration = new VertexDeclaration(

new VertexElement(

0,

VertexElementFormat.Vector3,

VertexElementUsage.Position,

0),new VertexElement(

sizeof(float) * 3,

VertexElementFormat.Color,

VertexElementUsage.Color,

0)

);

HLSL – Vertex Format

• Adding the following code to our struct

Page 56: XNA L10–Shaders Part 1

HLSL – Vertex Format

• Now, Implementing it in our XNA code!

private void SetUpVertices(){

MyOwnVertexFormat[] vertices = new MyOwnVertexFormat[3];

vertices[0] = new MyOwnVertexFormat(new Vector3(-2, 2, 0), Color.Red);vertices[1] = new MyOwnVertexFormat(new Vector3(2, -2, -2), Color.Green);vertices[2] = new MyOwnVertexFormat(new Vector3(0, 0, 2), Color.Yellow);

vertexBuffer = new VertexBuffer(device, MyOwnVertexFormat.VertexDeclaration, vertices.Length, BufferUsage.WriteOnly);

vertexBuffer.SetData(vertices);}

Page 57: XNA L10–Shaders Part 1

HLSL – Vertex Format

• Now, Implementing it in our XNA code!

private void SetUpVertices(){

MyOwnVertexFormat[] vertices = new MyOwnVertexFormat[3];

vertices[0] = new MyOwnVertexFormat(new Vector3(-2, 2, 0), Color.Red);vertices[1] = new MyOwnVertexFormat(new Vector3(2, -2, -2), Color.Green);vertices[2] = new MyOwnVertexFormat(new Vector3(0, 0, 2), Color.Yellow);

vertexBuffer = new VertexBuffer(device, MyOwnVertexFormat.VertexDeclaration, vertices.Length, BufferUsage.WriteOnly);

vertexBuffer.SetData(vertices);}

Page 58: XNA L10–Shaders Part 1

HLSL – Vertex Format

• “App1-VertexFormat”

Page 59: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Create a new empty effect file, name it(OurHLSLfile.fx)

Page 60: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Create a new empty effect file, name it(OurHLSLfile.fx)

• Delete everything in it!

Page 61: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Create a new empty effect file, name it(OurHLSLfile.fx)

• Delete everything in it!

Page 62: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Create a new empty effect file, name it(OurHLSLfile.fx)

• Delete everything in it!

Page 63: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Create a new empty effect file, name it(OurHLSLfile.fx)

• Delete everything in it!

Page 64: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Put this as your first HLSL code in your.fx file

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();PixelShader = NULL;

}}

Page 65: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Put this as your first HLSL code in your.fx file

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();PixelShader = NULL;

}}

Page 66: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Put this as your first HLSL code in your.fx file

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();PixelShader = NULL;

}}

Page 67: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Put this as your first HLSL code in your.fx file

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();PixelShader = NULL;

}}

Page 68: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• Put this as your first HLSL code in your.fx file

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();PixelShader = NULL;

}}

Page 69: XNA L10–Shaders Part 1

HLSL – Vertex Shader

Page 70: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• So put this code at the top of your.fx file:

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

Page 71: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• So put this code at the top of your.fx file:

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

Page 72: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• So put this code at the top of your.fx file:

• Now, Place this method between the structure definition and our technique

definition:

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

Page 73: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 74: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 75: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 76: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 77: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 78: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 79: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 80: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 81: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 82: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 83: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 84: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 85: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 86: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Output.Color.rba = 1.0f;Output.Color.g = 0.0f;

Page 87: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 88: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 89: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• The hole code for now will bestruct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{ pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 90: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• FINALLY!

Page 91: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• float4x4 xViewProjection;

Page 92: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• float4x4 xViewProjection;

Page 93: XNA L10–Shaders Part 1

HLSL – Vertex Shader

Page 94: XNA L10–Shaders Part 1

float4x4 xViewProjection;

struct VertexToPixel

{ float4 Position : POSITION;

float4 Color : COLOR0;

};

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

technique Simplest

{

pass Pass0

{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = NULL;

}

}

Page 95: XNA L10–Shaders Part 1

HLSL – Vertex Shader

• NICE!

• “App3-CompleteFirstShader(White)”

• For more info– http://www.riemers.net/eng/Tutorials/XNA/Csharp/series3.php

Page 96: XNA L10–Shaders Part 1

Pixel Format and Pixel Shader

Page 97: XNA L10–Shaders Part 1

Pixel Shader

Page 98: XNA L10–Shaders Part 1

http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Pixel_shader.php

For more info visit,

Page 99: XNA L10–Shaders Part 1

Pixel Shader

• We have the our last lesson Vertex Shader up and running, we just need a Pixel

Shader now to get the job done and draw using our own custom way of

rendering!

• The pixel shader receives its input (position and color, in our case) from our vertex

shader, and needs to output only color

Page 100: XNA L10–Shaders Part 1

Pixel Shader

• So let’s define its output structure at the top of our.fx file “Pixel Format”

struct PixelToFrame{

float4 Color : COLOR0;};

Page 101: XNA L10–Shaders Part 1

Pixel Shader

• So let’s define its output structure at the top of our.fx file “Pixel Format”

• Our first pixel shader will be a very simple method, here it is “Pixel Shader”

struct PixelToFrame{

float4 Color : COLOR0;};

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

Page 102: XNA L10–Shaders Part 1

Pixel Shader

• So let’s define its output structure at the top of our.fx file “Pixel Format”

• Our first pixel shader will be a very simple method, here it is “Pixel Shader”

struct PixelToFrame{

float4 Color : COLOR0;};

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

Page 103: XNA L10–Shaders Part 1

Pixel Shader

• Now we still need to set this method as pixel shader for our technique, at the

bottom of the file:

PixelShader = compile ps_2_0 OurFirstPixelShader();

Page 104: XNA L10–Shaders Part 1

Pixel Shader

• Now we still need to set this method as pixel shader for our technique, at the

bottom of the file:

PixelShader = compile ps_2_0 OurFirstPixelShader();

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 105: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

The hole code in HLSL

file

Page 106: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 107: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 108: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 109: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 110: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 111: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 112: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 113: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 114: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 115: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 116: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

Page 117: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

Page 118: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

Page 119: XNA L10–Shaders Part 1

Pixel Shader

• Now, let’s use our own HLSL code in our XNA code!

Page 120: XNA L10–Shaders Part 1

Pixel Shader

• Loading our own effect file “OurHLSLfile”

effect = Content.Load<Effect> ("OurHLSLfile");

Page 121: XNA L10–Shaders Part 1

Pixel Shader

• Draw() methodprotected override void Draw(GameTime gameTime)

{

device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer,

Color.DarkSlateBlue, 1.0f, 0);

effect.CurrentTechnique = effect.Techniques["Simplest"];

effect.Parameters["xViewProjection"].SetValue(viewMatrix * projectionMatrix);

foreach (EffectPass pass in effect.CurrentTechnique.Passes)

{

pass.Apply();

device.SetVertexBuffer(vertexBuffer);

device.DrawPrimitives(PrimitiveType.TriangleList, 0, 1);

}

base.Draw(gameTime);

}

Page 122: XNA L10–Shaders Part 1

Pixel Shader

• Draw() methodprotected override void Draw(GameTime gameTime)

{

device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer,

Color.DarkSlateBlue, 1.0f, 0);

effect.CurrentTechnique = effect.Techniques["Simplest"];

effect.Parameters["xViewProjection"].SetValue(viewMatrix * projectionMatrix);

foreach (EffectPass pass in effect.CurrentTechnique.Passes)

{

pass.Apply();

device.SetVertexBuffer(vertexBuffer);

device.DrawPrimitives(PrimitiveType.TriangleList, 0, 1);

}

base.Draw(gameTime);

}

Page 123: XNA L10–Shaders Part 1

Pixel Shader

• Draw() methodprotected override void Draw(GameTime gameTime)

{

device.Clear(ClearOptions.Target | ClearOptions.DepthBuffer,

Color.DarkSlateBlue, 1.0f, 0);

effect.CurrentTechnique = effect.Techniques["Simplest"];

effect.Parameters["xViewProjection"].SetValue(viewMatrix * projectionMatrix);

foreach (EffectPass pass in effect.CurrentTechnique.Passes)

{

pass.Apply();

device.SetVertexBuffer(vertexBuffer);

device.DrawPrimitives(PrimitiveType.TriangleList, 0, 1);

}

base.Draw(gameTime);

}

Page 124: XNA L10–Shaders Part 1

Pixel Shader

• We did it out own!

• We told the GPU how to work!

• “App2-CompleteFirstShader(Colored)”

Page 125: XNA L10–Shaders Part 1

Pixel ShaderRemember the following?!

Page 126: XNA L10–Shaders Part 1

Pixel Shaderfloat4x4 xViewProjection;

struct VertexToPixel{

float4 Position : POSITION;float4 Color : COLOR0;

};

struct PixelToFrame{

float4 Color : COLOR0;};

VertexToPixel SimplestVertexShader( float4 inPos : POSITION, float4 inColor : COLOR0){

VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);Output.Color = inColor;

return Output;}

PixelToFrame OurFirstPixelShader(VertexToPixel PSIn){

PixelToFrame Output = (PixelToFrame)0;

Output.Color = PSIn.Color;

return Output;}

technique Simplest{

pass Pass0{

VertexShader = compile vs_2_0 SimplestVertexShader();

PixelShader = compile ps_2_0 OurFirstPixelShader();

}}

VertexToPixel SimplestVertexShader(float4 inPos : POSITION)

{ VertexToPixel Output = (VertexToPixel)0;

Output.Position = mul(inPos, xViewProjection);

Output.Color = 1.0f;

return Output;

}

Page 127: XNA L10–Shaders Part 1

Pixel Shader

• NICE!

• “App3-CompleteFirstShader(White)”