Transcript Introduction to Nikola Mihaylov, Sep 1, 2008. http://blogs.msdn.com/nikola What is Pixel Shader? A fantasy creature: male pixie that likes shades b) Person who likes.

Introduction to
Nikola Mihaylov, Sep 1, 2008. http://blogs.msdn.com/nikola
What is Pixel Shader?
A fantasy creature: male pixie that likes
shades
b) Person who likes to cast shadow on
computer screens
c) Any of the above
d) All of the above except this answer
e) Not this answer

a)
Pixel Shader Is:







A set of software instructions
Used to calculate colors of individual pixels
on screen
Typically executing on the graphics card
(Graphics Processing Unit or GPU)
Executed very fast on the GPU
Primarily used to compute rendering
effects
Written in shader language, e.g. HLSL –
similar to C
Can be used for any computation
Demo: Grayscale Effect

Shader Inputs:
 Bitmap to be processed
 (u,v) location of pixel to be processed
○ (u,v) is used instead of (x,y) to mean that the
range of values is from 0 to 1
○ (u,v) is called “texture coordinates”
 float DesaturationFactor: specifies how much
the bitmap is to be saturated

Shader Output: pixel color at specified
location
Grayscale Effect Pixel Shader:
Input bitmap – sampler register s0
grayscale.fx
Code-behind: ShaderEffect.RegisterPixelShaderSamplerProperty()
sampler2D implicitInput : register(s0);
float factor : register(c0);
Input float in c0 register. Code-behind:
PixelShaderConstantCallback(0)
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color = tex2D(implicitInput, uv);
Input: (u,v) coordinates of
pixel in the bitmap
Retrieve pixel color at
float gray = color.r * 0.3 + color.g * 0.59 + color.b *0.11;
location (u,v) from bitmap
float4 result;
result.r = (color.r - gray) * factor + gray;
Grayscale code
result.g = (color.g - gray) * factor + gray;
result.b = (color.b - gray) * factor + gray;
result.a = color.a;
return result;
}
Output: R, G, B, A: float4
Color of the pixel at (u,v)
Shader code from http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html
Using Shaders in WPF: Overview
Install DirectX SDK
Create new WPF app and add .fx file
containing the shader code
3. Compile .fx file to .ps file. Set the Build
Action of the .ps file to Resource
1.
2.
•
•
Add this as pre-build event to VS in Project properties:
“c:\Program Files\Microsoft DirectX SDK (June 2008)\Utilities\bin\x86\fxc" /T ps_2_0 /E main
/Fo "$(ProjectDir)MyEffect.ps" "$(ProjectDir)MyEffect.fx“
Override ShaderEffect class
Link WPF properties to shader input
arguments in code-behind
6. Apply shader effect in XAML
4.
5.
Using Shaders in WPF: The Easy Way
Install DirectX SDK
 Download and open the Shader
template project from Nikola’s site:

www.nokola.com/sources/ShaderEffectTemplate.zip

Start coding your effect in MyEffect.fx
Next: connecting WPF and the GPU in C#
GrayscaleEffect Initialization
public class GrayscaleEffect : ShaderEffect {
private static PixelShader _pixelShader = new PixelShader()
{ UriSource = new
Uri(@"pack://application:,,,/GrayscaleEffect;component/Grays
caleEffect.ps") };
Call UpdateShaderValue() to set the
default value of the WPF property
into the shader registers, since
public GrayscaleEffect() {
PropertyChangedCallback() is not
PixelShader = _pixelShader;
called when setting default value.
UpdateShaderValue(InputProperty);
UpdateShaderValue(DesaturationFactorProperty);
}
Register Bitmap Texture Input
Property
public static readonly DependencyProperty
InputProperty =
ShaderEffect.RegisterPixelShaderSamplerProperty("In
put", typeof(GrayscaleEffect), 0); <- s0
public Brush Input {
get { return (Brush)GetValue(InputProperty); }
set { SetValue(InputProperty, value); }
}
Register the bitmap input property in register s0.
.fx code:
sampler2D implicitInput : register(s0);
Register Other Shader Input
Just another WPF
Properties
DependencyProperty
public static readonly DependencyProperty
DesaturationFactorProperty =
DependencyProperty.Register("DesaturationFactor",
typeof(double), typeof(GrayscaleEffect),
new UIPropertyMetadata(0.0,Link to c0 register
.fx code:
PixelShaderConstantCallback(0),
CoerceDesaturationFactor));
float factor : register(c0);
public double DesaturationFactor {
get { return
(double)GetValue(DesaturationFactorProperty); }
set { SetValue(DesaturationFactorProperty, value); }
}
Use in XAML!
<Image Source=“myimage.jpg”>
<Image.Effect>
<effect:GrayscaleEffect x:Name="grayscaleEffect“
DesaturationFactor="0.7"/>
</Image.Effect>
</Image>

Supports Bindings, Animation and
everything that typical WPF property
supports!
More Shaders

They can scale, twist, rotate, ripple or do anything with the
image
 Full access to texture
 Customizable inputs

Can be used for realistic effects










Light, Shadows
Water, Fire, Rain
Human faces
Clouds, Terrains
Projectile traces
Light auras, Magic spell effects
Candles and smoke
Physics
Many, many more
MANY more
Demo: Water Reflection
sampler2D input : register(s0);
float val0 : register(c0);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 color;
uv.y = uv.y + sin((uv.y-val0) * 100) * 0.03 * (1-uv.y);
color = tex2D(input , uv.xy);
return color;
}
Shader code from: http://rakeshravuri.blogspot.com/2008/07/wave-reflection-shader-effect-in-wpf.html
More Demos:
Twirled UI, Lights and Novas
Twirl: offsets image a little bit based on
cos() and sin(uv+inputValue)
 Lights: same as RadialGradientBrush,
only quadratic – light gets weaker with
distance squared
 Novas: zoom motion blur effect. Mixes
colors of 2 points on the same radius but
different distance from center of image.

Other Shaders

Geometry shader
 Can generate new primitives (geometry), for
example: lines, points, triangles
 DirectX 10 and above

Vertex shader
 Modifies attributes of existing 3D vertices
○ Color
○ Texture
○ Location
○ Other
Resources









DirectX SDK on www.microsoft.com
Writing Shaders on MSDN
Pixel shader template project
NVidia Object FX Composer
Grayscale Shader Effect on Anders Bursjöö’s blog
Facewound.com post processing shader tutorial –
short samples with preview
Wave Reflection Effect on Rakesh Ravuri’s blog
Pixel shader Twirl UI, Lights and Blobs sample
Nikola’s blog: http://blogs.msdn.com/nikola and
website: http://www.nokola.com
End