XNA L11–Shaders Part 2

796 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
796
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

XNA L11–Shaders Part 2

  1. 1. Mohammad Shaker mohammadshaker.com @ZGTRShaker 2011, 2012, 2013, 2014 XNA Game Development L11 – Shaders Part 2
  2. 2. Experimenting With Shaders
  3. 3. Experimenting With Shaders
  4. 4. Notice the rasterizer between the vertex and the pixel shader
  5. 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. 6. Without this rasterizer, only the 3 points corresponding to the vertices would be sent to the pixel shader!!
  7. 7. The interpolator next to the rasterizer calculates this value, by interpolating the color value of the corner points.
  8. 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. 9. It will look like?!
  10. 10. This!
  11. 11. Nice!
  12. 12. With HLSL, you could change the position or color of each vertex by all means!
  13. 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. 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. 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. 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. 17. Which is this output!
  18. 18. Let’s go!
  19. 19. Experimenting With Shaders • Go to our last HLSL file “.fx” – Replace the following line Output.Color = inColor;
  20. 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. 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. 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. 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. 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. 25. Experimenting With Shaders • Now, Compile and run to see the following • “App4-NotGoodInterpolation”
  26. 26. Experimenting With Shaders • Now, Compile and run to see the following
  27. 27. Experimenting With Shaders • Now, Compile and run to see the following
  28. 28. Experimenting With Shaders • Now, Compile and run to see the following
  29. 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. 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. 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. 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. 33. Experimenting With Shaders
  34. 34. Experimenting With Shaders
  35. 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. 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. 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. 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. 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. 40. Experimenting With Shaders • “App5-GoodInterpolation”
  41. 41. Shaders - Samples
  42. 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. 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. 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. 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. 46. Shaders - Samples • Higher performance by using Triangle Strips • Read more – http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Triangle_strip.php
  47. 47. Shaders - Samples • Acting consciously and sneaky :D
  48. 48. Shaders - Samples • Acting consciously and sneaky :D
  49. 49. Shaders - Samples
  50. 50. Shaders - Samples • CLEVER!
  51. 51. Shaders - Samples • CLEVER!
  52. 52. Shaders - Samples • CLEVER! Only 12 vertices are needed to define 10 triangles!
  53. 53. Shaders - Samples
  54. 54. Shaders - Samples • Creating your first light • Read more – http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Per-pixel_lighting.php
  55. 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. 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. 57. Shaders - Samples float DotProduct(float3 lightPos, float3 pos3D, float3 normal) { float3 lightDir = normalize(pos3D - lightPos); return dot(-lightDir, normal); }
  58. 58. Shaders - Samples struct VertexToPixel { float4 Position : POSITION; float2 TexCoords : TEXCOORD0; float3 Normal : TEXCOORD1; float3 Position3D : TEXCOORD2; };
  59. 59. Shaders - Samples Output.Normal = normalize(mul(inNormal, (float3x3)xWorld)); Output.Position3D = mul(inPos, xWorld);
  60. 60. Shaders - Samples
  61. 61. Shaders - Samples • Shadow Mapping
  62. 62. Shaders - Samples • Shadow Mapping algorithm • Read more: http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Shadow_map.php
  63. 63. Shaders - Samples • Shadow Mapping algorithm
  64. 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. 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. 66. Shaders - Samples
  67. 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. 68. Shaders - Samples
  69. 69. Shaders - Samples • Post-Processing Shaders • Read more – http://rbwhitaker.wikidot.com/post-processing-effects
  70. 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. 71. Shaders - Samples
  72. 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. 73. Shaders - Samples
  74. 74. Shaders - Samples • Transparency • Read more – http://rbwhitaker.wikidot.com/transparency-shader
  75. 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. 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. 77. Shaders - Samples • Creating a Toon Shader • Read more – http://rbwhitaker.wikidot.com/toon-shader
  78. 78. Shaders - Samples • Intensity • Light • Normals
  79. 79. Shaders - Samples • Intensity • Light • Normals • Then, SHADING!
  80. 80. Shaders - Samples • Reflection Shader • Read more – http://rbwhitaker.wikidot.com/reflection-shader
  81. 81. Shaders - Samples • Creating a Diffuse Lighting Shader • Read more – http://rbwhitaker.wikidot.com/diffuse-lighting-shader
  82. 82. We Are Done For Today! End of Course!
  83. 83. Take a Look on my other courses @ http://www.slideshare.net/ZGTRZGTR Available courses to the date of this slide:
  84. 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/

×