Embed Size (px)
Citation preview
Mohammad Shakermohammadshaker.com
@ZGTRShaker2011, 2012, 2013, 2014
XNA Game DevelopmentL11 – Shaders Part 2
Experimenting With Shaders
Experimenting With Shaders
Notice the rasterizer between the vertex and the pixel shader
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.
Without this rasterizer, only the 3 points corresponding to the vertices would be sent to the pixel shader!!
The interpolator next to the rasterizer calculates this value, by interpolating the color value of the corner points.
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.
It will look like?!
This!
Nice!
With HLSL,you could change the position or color of each vertex by all means!
You could also do this in your XNA app, but then your CPU would have to perform those calculations, which would lower your framerate!
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
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)
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.
Which is this output!
Let’s go!
Experimenting With Shaders
• Go to our last HLSL file “.fx”– Replace the following line
Output.Color = inColor;
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;
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;
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;
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;
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;
Experimenting With Shaders
• Now, Compile and run to see the following
• “App4-NotGoodInterpolation”
Experimenting With Shaders
• Now, Compile and run to see the following
Experimenting With Shaders
• Now, Compile and run to see the following
Experimenting With Shaders
• Now, Compile and run to see the following
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
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).
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With Shaders
Experimenting With Shaders
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With ShadersVertexToPixel 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;
};
Experimenting With Shaders
• “App5-GoodInterpolation”
Shaders - Samples
Shaders - Samples
• Texturing our triangle using the Pixel Shader
• Read more– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Textured_triangle.php
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.
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;
}}
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;
};
Shaders - Samples
• Higher performance by using Triangle Strips
• Read more– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Triangle_strip.php
Shaders - Samples
• Acting consciously and sneaky :D
Shaders - Samples
• Acting consciously and sneaky :D
Shaders - Samples
Shaders - Samples
• CLEVER!
Shaders - Samples
• CLEVER!
Shaders - Samples
• CLEVER!
Only 12 vertices are needed to define 10 triangles!
Shaders - Samples
Shaders - Samples
• Creating your first light
• Read more– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Per-pixel_lighting.php
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.
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.
Shaders - Samples
float DotProduct(float3 lightPos, float3 pos3D, float3 normal){
float3 lightDir = normalize(pos3D - lightPos);return dot(-lightDir, normal);
}
Shaders - Samples
struct VertexToPixel{
float4 Position : POSITION;float2 TexCoords : TEXCOORD0;float3 Normal : TEXCOORD1;float3 Position3D : TEXCOORD2;
};
Shaders - Samples
Output.Normal = normalize(mul(inNormal, (float3x3)xWorld));Output.Position3D = mul(inPos, xWorld);
Shaders - Samples
Shaders - Samples
• Shadow Mapping
Shaders - Samples
• Shadow Mapping algorithm
• Read more:http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Shadow_map.php
Shaders - Samples
• Shadow Mapping algorithm
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);
}
Shaders - Samples
• Transforming vertices to texture space using Projective Texturing
• Reading more– http://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Projective_texturing.php
Shaders - Samples
Shaders - Samples
• Changing the shape of our light
• Reading morehttp://www.riemers.net/eng/Tutorials/XNA/Csharp/Series3/Shaping_the_light.php
Shaders - Samples
Shaders - Samples
• Post-Processing Shaders
• Read more– http://rbwhitaker.wikidot.com/post-processing-effects
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;
}
Shaders - Samples
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;
}
Shaders - Samples
Shaders - Samples
• Transparency
• Read more– http://rbwhitaker.wikidot.com/transparency-shader
Shaders - Samples
technique Technique1
{
pass Pass1
{
AlphaBlendEnable = TRUE;
DestBlend = INVSRCALPHA;
SrcBlend = SRCALPHA;
VertexShader = compile vs_1_1 VertexShaderFunction();
PixelShader = compile ps_2_0 PixelShaderFunction();
}
}
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;
}
Shaders - Samples
• Creating a Toon Shader
• Read more– http://rbwhitaker.wikidot.com/toon-shader
Shaders - Samples
• Intensity
• Light
• Normals
Shaders - Samples
• Intensity
• Light
• Normals
• Then, SHADING!
Shaders - Samples
• Reflection Shader
• Read more– http://rbwhitaker.wikidot.com/reflection-shader
Shaders - Samples
• Creating a Diffuse Lighting Shader
• Read more– http://rbwhitaker.wikidot.com/diffuse-lighting-shader
We Are Done For Today!End of Course!
Take a Look on my other courses @ http://www.slideshare.net/ZGTRZGTR
Available courses to the date of this slide:
http://www.mohammadshaker.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/
