What Are Pixel Shaders?

Gradient Girl / Tuesday, May 7, 2013

When Microsoft released its products such as DirectX 8.0 and Direct3D 8.0 many years ago, developers got an opportunity to create never-before-seen effects. Direct3D 8.0 and later versions brought in shader capabilities which made it possible to render custom effects on conventional graphics hardware.


A shader is sort of a kernel function, typically executed in parallel for each data element. A shader is an algorithm compiled and loaded into the Graphics Processor Unit (GPU). This algorithm executes once, for every pixel in an input image. GPUs are efficient parallel processors hence your algorithm will be executed thousands of pixels at a time.


Pixel shaders are specialized shaders that are executed for each pixel of a bitmap. They are typically used to implement per-pixel effects. Pixel shader effects in WPF are effects that one can apply to a UI element. Pixel shader effects allow you to add adjustments such as glow, pixel brightness, red eye removal, and shadows, to rendered objects.


In WPF, you can use either the built-in pixel shader effects or custom shader effects. You can add these effects to any UIElement using appropriate XAML with minimal code-behind logic. WPF supports several pixel shaders such as DropShadowEffect and BlurEffect. However, only one effect can be applied directly to an element at a time. For example, you cannot apply both DropShadowEffect and BlurEffect to the same element directly.


The System.Windows.Media.Effects namespace defines several relevant classes for implementing shader effects.


Class Name



Acts as a base class for all bitmap effects.


Acts as a managed wrapper around a High Level Shader Language (HLSL) pixel shader.


Represents a blur effect that you can apply to an object.


Applies a shadow behind a visual object at a slight offset.


Provides a custom bitmap effect by using a PixelShader.


Table: Classes in the System.Windows.Media.Effects Namespace


The DropShadowEffect has several important properties that determine characteristics of the drop shadow.


Property Name



Specifies the color of the drop shadow. The default is black.


Specifies how blurred the shadow is. Typical range is between 0 and 1. The default is 5.


Specifies how transparent the shadow is. Typical range is between 0 and 1, where 1 means fully opaque and 0 means fully transparent (not visible). The default is 1.


Specifies how much the shadow will be displaced from the object that is casting the shadow. The default is 5.


Specifies in what direction the shadow is cast from the object. It is an angle between 0 and 360 with 0 starting on the right hand side and moving counter-clockwise around the object. The default is 315.


Table: Properties of The DropShadowEffect


The following example demonstrates the DropShadow effect.

This code will result in the following output:



As you can see, the button now has a drop shadow. The attributes of the drop shadow can be customized through the various properties of the DropShadowEffect class.


Similarly, you can apply the BlurEffect to the control.


Custom Shaders


HLSL (High Level Shading Language) was originally created for DirectX. Using HLSL, you can create programmable shaders for the Direct3D pipeline.


You can derive from the ShaderEffect class to implement a custom effect based on a single pixel shader. This will enable you to create pixel shaders that were earlier unavailable or tweak built-in shaders.


To create a custom effect:

  1. First, load a PixelShader from precompiled HLSL bytecode in a WPF application. One can create a PixelShader from either a Pack URI reference or from a Stream.
  2. Then, set the UriSource property or call the SetStreamSource method to load the shader bytecode.
  3. To create a custom effect, assign the PixelShader to the PixelShader property of a ShaderEffect.
  4. Define dependency properties representing parameters of the effect and Brush-based surface inputs.


Pixel Shader 3 Support in WPF 4


WPF 4 builds on top of the existing ShaderEffect support that had been introduced in WPF 3.5 SP1 by allowing applications to write custom effects by using Pixel Shader (PS) version 3.0. The PS 3.0 shader model is more sophisticated and allows for even more effects on supported hardware.


Further Reading:


How to Create Custom Shader Effects

How the Shazzam Tool Works with Shaders

How to Write Pixel Shaders for the Microsoft Silverlight and WPF platform with HLSL