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

2. Experimenting With Shaders

3. Experimenting With Shaders

4. Notice the rasterizer
between the vertex and
the pixel shader

5. This rasterizer determines
which pixels on the screen are
occupied by our triangle, and
makes sure these pixels are
also sent to the pixel shader.

6. Without this rasterizer,
only the 3 points
corresponding to the
vertices would be sent to
the pixel shader!!

7. The interpolator next to
the rasterizer calculates
this value, by interpolating
the color value of the
corner points.

8. This means that a pixel
exactly in the middle
between a blue and a red
corner point, will get the
color that is exactly in the
middle of these colors.

9. It will look like?!

10. This!

11. Nice!

12. With HLSL,
you could change the
position or color of each
vertex by all means!

13. You could also do this
in your XNA app, but
then your CPU would
have to perform those
calculations, which
would lower your
framerate!

14. Now you can have these
calculations done by the
GPU, which is A LOT faster
at it, leaving your CPU free
to perform more important
calculations

15. As you have seen,
Using the vertex shader,
you could also adjust
the color, which we’ve
done before (we made
our whole triangle
white)

16. So for this example, we will throw away
the color information provided to us by the
vertex stream, and define our own colors.
Say, we want our vertex shader make the
red color component indicate the X
coordinate of each vertex, the green
component the Y coordinate, and the blue
color component indicate the z coordinate.

17. Which is this output!

18. Let’s go!

19. Experimenting With Shaders
• Go to our last HLSL file “.fx”
– Replace the following line
Output.Color = inColor;

20. Experimenting With Shaders
• Go to our last HLSL file “.fx”
– Replace the following line
– With this one
Output.Color = inColor;
Output.Color.rgb = inPos.xyz;

21. Experimenting With Shaders
• Go to our last HLSL file “.fx”
– Replace the following line
– With this one
Output.Color = inColor;
Output.Color.rgb = inPos.xyz;

22. Experimenting With Shaders
• Go to our last HLSL file “.fx”
– Replace the following line
– With this one
Output.Color = inColor;
Output.Color.rgb = inPos.xyz;

23. Experimenting With Shaders
• Go to our last HLSL file “.fx”
– Replace the following line
– With this one
Output.Color = inColor;
Output.Color.rgb = inPos.xyz;

24. Experimenting With Shaders
• Go to our last HLSL file “.fx”
– Replace the following line
– With this one
Output.Color = inColor;
Output.Color.rgb = inPos.xyz;

25. Experimenting With Shaders
• Now, Compile and run to see the following
• “App4-NotGoodInterpolation”

26. Experimenting With Shaders
• Now, Compile and run to see the following

27. Experimenting With Shaders
• Now, Compile and run to see the following

28. Experimenting With Shaders
• Now, Compile and run to see the following

29. Experimenting With Shaders
• So what is happening?
• Before the colors are passed to the interpolator, the
3 color values of the 3 vertices are being clipped to
the [0,1] region. For example, the (-2,-2,2) vertex
should have -2, -2 and 2 as rgb color values, but it
gets 0, 0 and 1 as color values

30. Experimenting With Shaders
• So what is happening?
• The (0,0,0) point gets a color value that is an
interpolation of color values between the [0,1]
region, and thus will never be completely 0,0,0
(=black).

31. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color.rgb = inPos.xyz;
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();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

32. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color.rgb = inPos.xyz;
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();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

33. Experimenting With Shaders

34. Experimenting With Shaders

35. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color.rgb = inPos.xyz;
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();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

36. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color = inColor;
Output.Position3D = inPos;
return Output;
}
PixelToFrame OurFirstPixelShader(VertexToPixel PSIn)
{
PixelToFrame Output = (PixelToFrame)0;
Output.Color = PSIn.Color;
Output.Color.rgb = PSIn.Position3D.xyz;
return Output;
}
technique Simplest
{
pass Pass0
{
VertexShader = compile vs_2_0 SimplestVertexShader();
PixelShader = compile ps_2_0 OurFirstPixelShader();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
float3 Position3D : TEXCOORD0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

37. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color = inColor;
Output.Position3D = inPos;
return Output;
}
PixelToFrame OurFirstPixelShader(VertexToPixel PSIn)
{
PixelToFrame Output = (PixelToFrame)0;
Output.Color = PSIn.Color;
Output.Color.rgb = PSIn.Position3D.xyz;
return Output;
}
technique Simplest
{
pass Pass0
{
VertexShader = compile vs_2_0 SimplestVertexShader();
PixelShader = compile ps_2_0 OurFirstPixelShader();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
float3 Position3D : TEXCOORD0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

38. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color = inColor;
Output.Position3D = inPos;
return Output;
}
PixelToFrame OurFirstPixelShader(VertexToPixel PSIn)
{
PixelToFrame Output = (PixelToFrame)0;
Output.Color = PSIn.Color;
Output.Color.rgb = PSIn.Position3D.xyz;
return Output;
}
technique Simplest
{
pass Pass0
{
VertexShader = compile vs_2_0 SimplestVertexShader();
PixelShader = compile ps_2_0 OurFirstPixelShader();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
float3 Position3D : TEXCOORD0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

39. Experimenting With Shaders
VertexToPixel SimplestVertexShader( float4 inPos : POSITION,
float4 inColor : COLOR0)
{ VertexToPixel Output = (VertexToPixel)0;
Output.Position = mul(inPos, xViewProjection);
Output.Color = inColor;
Output.Position3D = inPos;
return Output;
}
PixelToFrame OurFirstPixelShader(VertexToPixel PSIn)
{
PixelToFrame Output = (PixelToFrame)0;
Output.Color = PSIn.Color;
Output.Color.rgb = PSIn.Position3D.xyz;
return Output;
}
technique Simplest
{
pass Pass0
{
VertexShader = compile vs_2_0 SimplestVertexShader();
PixelShader = compile ps_2_0 OurFirstPixelShader();
}
}
float4x4 xViewProjection;
struct VertexToPixel
{
float4 Position : POSITION;
float4 Color : COLOR0;
float3 Position3D : TEXCOORD0;
};
struct PixelToFrame
{
float4 Color : COLOR0;
};

40. Experimenting With Shaders
• “App5-GoodInterpolation”

41. Shaders - Samples

42. Shaders - Samples
• Texturing our triangle using the Pixel Shader
• Read more
– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Textured_triangle.php

43. Shaders - Samples
• A logical next step would be to load a texture from within our XNA app, and have our
pixel shader sample the correct color for each pixel.

44. Shaders - Samples
• In Game1 class
struct MyOwnVertexFormat
{
private Vector3 position;
private Vector2 texCoord;
public MyOwnVertexFormat(Vector3 position, Vector2 texCoord)
{
this.position = position;
this.texCoord = texCoord;
}
}

45. Shaders - Samples
• At the top of our effects - HLSL file
sampler TextureSampler = sampler_state
{
texture = <xTexture>;
magfilter = LINEAR;
minfilter = LINEAR;
mipfilter=LINEAR;
AddressU = mirror;
AddressV = mirror;
};

46. Shaders - Samples
• Higher performance by using Triangle Strips
• Read more
– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Triangle_strip.php

47. Shaders - Samples
• Acting consciously and sneaky :D

48. Shaders - Samples
• Acting consciously and sneaky :D

49. Shaders - Samples

50. Shaders - Samples
• CLEVER!

51. Shaders - Samples
• CLEVER!

52. Shaders - Samples
• CLEVER!
Only 12 vertices are needed to
define 10 triangles!

53. Shaders - Samples

54. Shaders - Samples
• Creating your first light
• Read more
– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Per-pixel_lighting.php

55. Shaders - Samples
• Every object is lit by an amount of light, which depends on the angle between the normal
and the direction of the light.

56. Shaders - Samples
• Every object is lit by an amount of light, which depends on the angle between the normal
and the direction of the light.
• This is found by taking the dot product between that object’s normal and the direction of
the incoming light.

57. Shaders - Samples
float DotProduct(float3 lightPos, float3 pos3D, float3 normal)
{
float3 lightDir = normalize(pos3D - lightPos);
return dot(-lightDir, normal);
}

58. Shaders - Samples
struct VertexToPixel
{
float4 Position : POSITION;
float2 TexCoords : TEXCOORD0;
float3 Normal : TEXCOORD1;
float3 Position3D : TEXCOORD2;
};

59. Shaders - Samples
Output.Normal = normalize(mul(inNormal, (float3x3)xWorld));
Output.Position3D = mul(inPos, xWorld);

60. Shaders - Samples

61. Shaders - Samples
• Shadow Mapping

62. Shaders - Samples
• Shadow Mapping algorithm
• Read more:
http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Shadow_map.php

63. Shaders - Samples
• Shadow Mapping algorithm

64. Shaders - Samples
private void DrawScene(string technique)
{
effect.CurrentTechnique = effect.Techniques[technique];
effect.Parameters["xWorldViewProjection"].SetValue(Matrix.Identity * viewMatrix * projectionMatrix);
effect.Parameters["xTexture"].SetValue(streetTexture);
effect.Parameters["xWorld"].SetValue(Matrix.Identity);
effect.Parameters["xLightPos"].SetValue(lightPos);
effect.Parameters["xLightPower"].SetValue(lightPower);
effect.Parameters["xAmbient"].SetValue(ambientPower);
effect.Parameters["xLightsWorldViewProjection"].SetValue(Matrix.Identity *
lightsViewProjectionMatrix);
foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Apply();
device.SetVertexBuffer(vertexBuffer);
device.DrawPrimitives(PrimitiveType.TriangleStrip, 0, 16);
}

65. Shaders - Samples
• Transforming vertices to texture space using Projective Texturing
• Reading more
– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Projective_texturing.php

66. Shaders - Samples

67. Shaders - Samples
• Changing the shape of our light
• Reading more
http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Shaping_the_light.php

68. Shaders - Samples

69. Shaders - Samples
• Post-Processing Shaders
• Read more
– http://rbwhitaker.wikidot.com/post-processing-effects

70. Shaders - Samples
• Post-Processing Shaders
float4 PixelShaderFunction(float2 TextureCoordinate : TEXCOORD0) : COLOR0
{
float4 color = tex2D(TextureSampler, TextureCoordinate);
float value = (color.r + color.g + color.b) / 3;
color.r = value;
color.g = value;
color.b = value;
return color;
}

71. Shaders - Samples

72. Shaders - Samples
• Post-Processing Shaders
float4 PixelShaderFunction(float2 TextureCoordinate : TEXCOORD0) : COLOR0
{
float4 color = tex2D(TextureSampler, TextureCoordinate);
float4 outputColor = color;
outputColor.r = (color.r * 0.393) + (color.g * 0.769) + (color.b * 0.189);
outputColor.g = (color.r * 0.349) + (color.g * 0.686) + (color.b * 0.168);
outputColor.b = (color.r * 0.272) + (color.g * 0.534) + (color.b * 0.131);
return outputColor;
}

73. Shaders - Samples

74. Shaders - Samples
• Transparency
• Read more
– http://rbwhitaker.wikidot.com/transparency-shader

75. Shaders - Samples
technique Technique1
{
pass Pass1
{
AlphaBlendEnable = TRUE;
DestBlend = INVSRCALPHA;
SrcBlend = SRCALPHA;
VertexShader = compile vs_1_1 VertexShaderFunction();
PixelShader = compile ps_2_0 PixelShaderFunction();
}
}

76. Shaders - Samples
VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{
VertexShaderOutput output;
float4 worldPosition = mul(input.Position, World);
float4 viewPosition = mul(worldPosition, View);
output.Position = mul(viewPosition, Projection);
float4 normal = normalize(mul(input.Normal, WorldInverseTranspose));
float lightIntensity = dot(normal, DiffuseLightDirection);
output.Color = saturate(DiffuseColor * DiffuseIntensity * lightIntensity);
output.Normal = normal;
output.TextureCoordinate = input.TextureCoordinate;
return output;
}

77. Shaders - Samples
• Creating a Toon Shader
• Read more
– http://rbwhitaker.wikidot.com/toon-shader

78. Shaders - Samples
• Intensity
• Light
• Normals

79. Shaders - Samples
• Intensity
• Light
• Normals
• Then, SHADING!

80. Shaders - Samples
• Reflection Shader
• Read more
– http://rbwhitaker.wikidot.com/reflection-shader

81. Shaders - Samples
• Creating a Diffuse Lighting Shader
• Read more
– http://rbwhitaker.wikidot.com/diffuse-lighting-shader

82. We Are Done For Today!
End of Course!

83. Take a Look on my other courses
@ http://www.slideshare.net/ZGTRZGTR
Available courses to the date of this slide:

84. http://www.mohammadshaker.com
mohammadshakergtr@gmail.com
https://twitter.com/ZGTRShaker @ZGTRShaker
https://de.linkedin.com/pub/mohammad-shaker/30/122/128/
http://www.slideshare.net/ZGTRZGTR
https://www.goodreads.com/user/show/11193121-mohammad-shaker
https://plus.google.com/u/0/+MohammadShaker/
https://www.youtube.com/channel/UCvJUfadMoEaZNWdagdMyCRA
http://mohammadshakergtr.wordpress.com/