What Are Pixel Shaders?

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.

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

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

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