XNA L11–Shaders Part 2
0 likes1,164 views
The document discusses experimenting with shaders in XNA game development. It describes replacing code in an HLSL file to output vertex color values directly from position data. This avoids color clipping issues. It also discusses passing unclipped position data to the pixel shader and interpolating color values properly. Examples of other shader techniques are briefly mentioned like texturing, lighting, shadow mapping, and post-processing effects.
![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](https://image.slidesharecdn.com/xnal11shaderspart2-140211153658-phpapp02/85/XNA-L11-Shaders-Part-2-29-320.jpg)
![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).](https://image.slidesharecdn.com/xnal11shaderspart2-140211153658-phpapp02/85/XNA-L11-Shaders-Part-2-30-320.jpg)
![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);
}](https://image.slidesharecdn.com/xnal11shaderspart2-140211153658-phpapp02/85/XNA-L11-Shaders-Part-2-64-320.jpg)
XNA L11–Shaders Part 2
- 1. Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 XNA Game Development L11 – Shaders Part 2
- 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; };
- 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”
- 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
- 50. Shaders - Samples • CLEVER!
- 51. Shaders - Samples • CLEVER!
- 52. Shaders - Samples • CLEVER! Only 12 vertices are needed to define 10 triangles!
- 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);
- 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
- 67. Shaders - Samples • Changing the shape of our light • Reading more http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Shaping_the_light.php
- 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; }
- 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; }
- 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: