Introduction to Shader Effects

When Microsoft released its products DirectX 8.0 and Direct3D 8.0 almost 10 years back, developers got an opportunity to create never-before-seen effects. Direct3D 8.0 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. Pixel shaders are specialized shaders that are executed for each pixel of a bitmap. They are typically used to implement per-pixel effects. In Windows and Web applications, pixel shader effects allow you to add effects such as blurs, pixel brightness, and shadows to rendered objects.

Silverlight developers got lucky when Microsoft introduced shader effects as a new feature with Silverlight 3. It is now very easy to add these effects to any UIElement such as buttons and textboxes. Furthermore, you don't need to do any kind of coding beyond the XAML. Just write the appropriate XAML and you're done.

In Silverlight 3 and 4, there are two popular pixel shader effects available namely, DropShadowEffect and BlurEffect. At a time, only one effect can be applied directly to an element.

You can either use the above built-in effect classes or create your own. To use a built-in effect, you can assign the built-in effect class, such as the DropShadowEffect class to the Effect property of the UIElement class that you want to apply this effect to. Creating a custom shader class is far more complicated and is beyond the scope of this article.

All the relevant classes for shader effects are defined in the System.Windows.Media.Effects namespace. It has following classes that provide shader effects.

Table 1: Classes in the System.Windows.Media.Effects namespace

Let's examine the DropShadow Effect using a simple example. The DropShadowEffect has several important properties that determine characteristics of the drop shadow:

Table 2: Properties of the DropShadowEffect

To start with, let us create a new Silverlight 3 application using Visual Web Developer 2008. If you have worked with Silverlight 2, you will find that the new project window is almost the same with just some minor changes (the template Silverlight Navigation Application is new):

Figure 1: New Project window

Rename the default application name as ShaderEffects.

The default XAML page is now called MainPage instead of Page as it used to be called earlier in Silverlight 2.

The default code in this XAML file will be seen as follows:

Observe the new namespaces included in the code. For more information on the same, refer the MSDN library.

Next, add a button control between the StackPanel tags and configure it as shown below:

Finally, add the new pixel effects as follows: (this code is to be added between the <Button></Button> tags.

The final MainPage.xaml will look as follows:

When you finally, run the application, you will see the output as follows:

Figure 2: Output

Similarly, you can use the BlurEffect which is far more easier to use than the previously described effect. For this class, you can just specify the Radius property.

The ouput of this can be seen in Figure 3:

If you check MSDN for shader samples, you would find more effects such as bitmap effects and glow effects. However these are applicable only to WPF and not supported in Silverlight. Yet, by making clever use of the ones that are available in Silverlight, you can still work wonders.

Custom Shaders

HLSL stands for High Level Shading Language. It was originally created for DirectX. Using HLSL, you can create programmable shaders for the Direct3D pipeline. The ShaderEffect class mentioned in Table 1 provides support for HLSL in Silverlight. This will enable you to create custom pixel shaders or tweak WPF's shaders that were earlier unavailable in Silverlight.

Before you actually start working with this class, let us first clear up some bask facts you need to know.

A shader is an algorithm compiled and loaded into the Graphics Processor Unit (GPU). This algorithm is run 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.

You need to know the basioc constructs and building blocks of HLSL before you start coding with it.

The step by step procedure to create and use custom shaders is described as follows:

1. Download Walt Ritscher's Shazzam Shader Editing Tool.  Shazzam is a ClickOnce application providing a cool interface to edit and test HSLS shaders.

2. Download the Microsoft DirectX SDK (June 2010) from Microsoft (Link: http://www.microsoft.com/downloads/details.aspx?FamilyID=3021d52b-514e-41d3-ad02-438a3ba730ba&displaylang=en )

3. Install both these softwares.

4. In Shazzam, specify the path for the fxc.exe file (present in Microsoft DirectX SDK ).

5. Create a new shader effect file using File-> New Shader File option in Shazzam.

6. Add relevant code. For example, you could add the following simple code in a shaderfile named CustomEffect:

7. Compile the shader file using Tools->Compile Shader.

8. Create a Silverlight library named EffectLibrary. Delete the default class.

9. Include the compiled "ps" file into your project and set its compile type to "Resource".

10. Copy the C# code generated by Shazzam into a new class file and name it CustomEffect.cs.

11. Ensure that the UriSource in the code is changed as follows:

12. Create a new Silverlight application and add reference to the EffectLibrary dll file.

13. Include the namespace and assembly for the library in the XAML code as shown below:

14. Attach the custom effect class to the element you want in XAML. For example, you can add this effect to a button:

Build and test the application.

Conclusion

This article explored how to use shader effects in Silverlight 3 and also demonstrated how to create custom shaders.

About Medusa M

Medusa loves experimenting with technology trends, especially that of Microsoft. This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
Nice and Simple Explained Article	Raghuraman Kanchi	7/19/2010 10:54 AM
Thank you for the Nice and Simply Explained article on HLSL. Nice Intro and very practical example. KRK Reply | Permanent link

---

Please login to rate or to leave a comment.