This document provides an overview of shaders in XNA game development. It discusses what shaders are and how they allow developers to program graphics pipelines rather than relying on fixed function pipelines. It also covers HLSL (High Level Shader Language) and how to define vertex formats, vertex shaders, and techniques in HLSL code files to render 3D objects with customized shaders. Specific topics covered include declaring effects, loading shader files, using techniques and passes, defining a custom vertex format structure, and writing a simple vertex shader to render colored triangles.

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

2. Working with Shaders in XNA

3. What is a shader?!

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. HLSL
High Level Shader Language

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

16. HLSL
• Every vertex that is drawn will pass through your vertex shader, and even every
pixel drawn will have passed through your pixel shader

17. HLSL

18. The effect file
• One of the main differences between DirectX 9 and XNA is that we need an effect
for everything we draw!

19. The effect file
• So, what exactly is an “effect”?

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

21. The effect file
• An effect is…!

22. 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.

23. The effect file
• Declaring an effect
Effect effect;

24. The effect file
• .FX Files

25. The effect file
• Declaring an effect
• Loading the effect file
Effect effect;
effect = Content.Load<Effect> ("effects");

26. The effect file
• Declaring an effect
• Loading the effect file
Effect effect;
effect = Content.Load<Effect> ("effects");

27. The effect file
• Declaring an effect
• Loading the effect file
Effect effect;
effect = Content.Load<Effect> ("effects");

28. The effect file
• Declaring an effect
• Loading the effect file
• Draw() method
Effect effect;
effect = Content.Load<Effect> ("effects");
device.Clear(Color.DarkSlateBlue);

29. The effect file
• Using a “User-Defined Technique”!
effect.CurrentTechnique = effect.Techniques["Pretransformed"];

30. The effect file
• Using a “User-Defined Technique”!
effect.CurrentTechnique = effect.Techniques["Pretransformed"];

31. 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 iterate
through them. Add this code below the code you just entered:
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
}

32. 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 iterate
through 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!
}

33. 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 iterate
through 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!
}

34. The effect file
• Quite simple!

35. HLSL – Vertex Format

36. HLSL
Let’s play with shaders a bit!

37. HLSL
• Let’s play with shaders a bit!
– Mo l3beh ha! :D

38. HLSL – Vertex Format
• Remember VertexPositionColor?

39. HLSL – Vertex Format
• We’ll just design our own
• “VertexPositionColor”!

40. HLSL – Vertex Format
• We’ll just design our own
• “VertexPositionColor”!

41. HLSL – Vertex Format
• Let’s name it
• “MyOwnVertexFormat”

42. 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!

43. HLSL – Vertex Format
struct MyOwnVertexFormat
{
private Vector3 position;
private Color color;
public MyOwnVertexFormat (Vector3 position, Color color)
{
this.position = position;
this.color = color;
}
}

44. struct MyOwnVertexFormat
{
private Vector3 position;
private Color color;
public MyOwnVertexFormat (Vector3 position, Color color)
{
this.position = position;
this.color = color;
}
}
HLSL – Vertex Format

45. 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.

46. 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)
);

47. 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

48. 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

49. 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

50. 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

51. 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

52. 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

53. 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

54. 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

55. 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

56. 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);
}

57. 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);
}

58. HLSL – Vertex Format
• “App1-VertexFormat”

59. HLSL – Vertex Shader
• Create a new empty effect file, name it(OurHLSLfile.fx)

60. HLSL – Vertex Shader
• Create a new empty effect file, name it(OurHLSLfile.fx)
• Delete everything in it!

61. HLSL – Vertex Shader
• Create a new empty effect file, name it(OurHLSLfile.fx)
• Delete everything in it!

62. HLSL – Vertex Shader
• Create a new empty effect file, name it(OurHLSLfile.fx)
• Delete everything in it!

63. HLSL – Vertex Shader
• Create a new empty effect file, name it(OurHLSLfile.fx)
• Delete everything in it!

64. 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;
}
}

65. 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;
}
}

66. 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;
}
}

67. 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;
}
}

68. 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;
}
}

69. HLSL – Vertex Shader

70. HLSL – Vertex Shader
• So put this code at the top of your.fx file:
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
};

71. HLSL – Vertex Shader
• So put this code at the top of your.fx file:
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
};

72. 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;
}

73. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

74. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

75. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

76. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

77. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

78. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

79. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

80. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

81. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

82. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

83. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

84. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

85. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

86. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}
Output.Color.rba = 1.0f;
Output.Color.g = 0.0f;

87. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

88. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

89. HLSL – Vertex Shader
• The hole code for now will be
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;
}
}

90. HLSL – Vertex Shader
• FINALLY!

91. HLSL – Vertex Shader
• float4x4 xViewProjection;

92. HLSL – Vertex Shader
• float4x4 xViewProjection;

93. HLSL – Vertex Shader

94. 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;
}
}

95. HLSL – Vertex Shader
• NICE!
• “App3-CompleteFirstShader(White)”
• For more info
– http://www.riemers.net/eng/Tutorials/XNA/Csharp/series3.php

96. Pixel Format and Pixel Shader

97. Pixel Shader

98. http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Pixel_shader.php
For more info visit,

99. 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

100. Pixel Shader
• So let’s define its output structure at the top of our.fx file “Pixel Format”
struct PixelToFrame
{
float4 Color : COLOR0;
};

101. 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;
}

102. 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;
}

103. 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();

104. 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();
}
}

105. Pixel Shader
float4x4 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

106. Pixel Shader
float4x4 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();
}
}

107. Pixel Shader
float4x4 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();
}
}

108. Pixel Shader
float4x4 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();
}
}

109. Pixel Shader
float4x4 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();
}
}

110. Pixel Shader
float4x4 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();
}
}

111. Pixel Shader
float4x4 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();
}
}

112. Pixel Shader
float4x4 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();
}
}

113. Pixel Shader
float4x4 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();
}
}

114. Pixel Shader
float4x4 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();
}
}

115. Pixel Shader
float4x4 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();
}
}

116. Pixel Shader
float4x4 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;
}

117. Pixel Shader
float4x4 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;
}

118. Pixel Shader
float4x4 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();
}
}

119. Pixel Shader
• Now, let’s use our own HLSL code in our XNA code!

120. Pixel Shader
• Loading our own effect file “OurHLSLfile”
effect = Content.Load<Effect> ("OurHLSLfile");

121. Pixel Shader
• Draw() method
protected 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);
}

122. 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);
}

123. 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);
}

124. Pixel Shader
• We did it out own!
• We told the GPU how to work!
• “App2-CompleteFirstShader(Colored)”

125. Pixel Shader
Remember the following?!

126. Pixel Shader
float4x4 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;
}

127. Pixel Shader
• NICE!
• “App3-CompleteFirstShader(White)”