Compiling pixel shaders for Silverlight

I saw a note on Twitter come through yesterday about building pixel shaders for Silverlight in Visual Studio.  The question, from @blamborn was:

Does anyone know if there is a Shader Effects BuildTask like the #WPF one here http://bit.ly/gCkNT only for #Silverlight?

I replied that you can use the same build task and thought I had written my work around on how to do that, but apparently I never clicked published somewhere along the line.  I recall doing some work for this for a presentation a while back on VSLive and started to write it up.  Here are hopefully some helpful knowledge around the subject.

Option 1: Compiling using DirectX Libraries

One option you can do is to use a pre-build command for your project in combination with the DirectX SDK.  What you really need out of the DirectX SDK is a tool called fxc.exe.  This is a compiler for the HLSL code for the pixel shader code you write.  The download is 500MB.  Yeah, big.  Once you have it installed you can put a pre-build command on your Visual Studio project with something like this:

   1: "C:\Program Files (x86)\Microsoft DirectX SDK (March 2009)\Utilities\bin\x86\fcx.exe" 

   2:     /T ps_2_0 /Fo "$(ProjectDir)ShaderEffect1.ps" "$(ProjectDir)ShaderEffect1.fx"

Now keep in mind your installation directory might be different, but you should get the gist of it.  The result of this command is that you’ll get a <Filename>.ps file that you will include in your project.  The .ps file, in fact, *IS* your pixel shader…that’s really the only thing your Silverlight project cares about!  The build command doesn’t automatically make it a part of your project though, so you’ll have to ensure that after it builds you use the “show all files” feature in Visual Studio and include it in your project.

Option 2: Using a build task

Another option is to use a build task in your project.  For Windows Presentation Foundation (WPF) developers, this is what is easiest and doesn’t require the massive 500MB download.  What is cool is that we can use the same build task for Silverlight.  Awesome right?  Well, yes and no.

It’s awesome that it works.  What is not awesome is the setup.  Allow me to walk you through my steps.  It’s a bit of hackery admittedly.  If anyone is a super Visual Studio extensibility wizard and wants to contribute knowledge to me on extending it to my liking, I’ll send you a virual Mt. Dew!  Here’s my steps otherwise.

Install the WPF Build tasks!!!  You can get them from here (Shader Effects Build Task and Templates).  Run the installer.  These steps assume you have them already!!!  You don’t need the templates, but if you want you can install them too – they are for WPF.  You’ll install my template as the next step.

1. Get the VS template I created for Silverlight Pixel Shaders.

I created an item template for Silverlight projects so that you can do Add Item…Silverlight Pixel Shader to your project.  Once you have this installed (just double-click on the VSI and follow the steps) you will see that option.

The template provides you with the right files that get added as well as follows the requirement for a pixel shader being a resource in your project.  You’ll notice after you add the item (let’s say you kept the default name) that the code will show:

   1: static ShaderEffect1()

   2: {

   3:     _pixelShader.UriSource = new Uri("/SilverlightApplication29;component/ShaderEffect1.ps", UriKind.Relative);

   4: }

This is the best practice for a pixel shader.  Note that my project name is SilverlightApplication29, but the template will use your projects name, of course.

2. Hackery 1: Open the **proj file for your Silverlight application in a text editor like notepad.

Yes, I know.  You are cursing me now.  I agree, if the tool (VS) is awesome why do I have to do this step?  I’ve been trying to understand myself how an item template can actually do all these things for you…again, if you are an extensibility expert, let me know!  But for now, bear with me.

In the **proj file (csproj or vbproj) add the following information right after the Import node in the file:

   1: <ItemGroup Condition="'$(BuildingInsideVisualStudio)'=='true'">

   2:     <AvailableItemName Include="Effect" />

   3:   </ItemGroup>

   4:   <UsingTask TaskName="ShaderBuildTask.PixelShaderCompile" AssemblyName="ShaderBuildTask, Version=1.0.3072.18169, Culture=neutral, PublicKeyToken=44e467d1687af125" />

   5:   <Target Name="EffectCompile" Condition="'@(Effect)' != '' ">

   6:     <PixelShaderCompile Sources="@(Effect)">

   7:       <Output TaskParameter="Outputs" ItemName="Resource" />

   8:     </PixelShaderCompile>

   9:   </Target>

  10:   <PropertyGroup>

  11:     <!-- Add effect compilation to the PrepareResourcesDependsOn so that the effect fx  get compiled before resources are collected -->

  12:     <PrepareResourcesDependsOn>EffectCompile;$(PrepareResourcesDependsOn)</PrepareResourcesDependsOn>

  13:   </PropertyGroup>

These properties enable you to see the “Effect” build task in the properties for your .fx files in the project.  Save the proj file and go back to Visual Studio.  You should be prompted to reload – go for it.  You may see a file named Effect with a warning icon on it.  For now, ignore it.  It’s admittedly an artifact of this hackery.  It will look like this:

Now that you have both of these steps you can add a new pixel shader (using my template of course).

3. Change the .fx file’s properties to Build Action: Effect.

Once you have added a shader library (using my template) to the project, select the .fx file (which is your HLSL code) and look at the properties dialog for the file.  Change the build action to the new item Effect.

Build your project.

4. Hackery 2: Refresh the view all files and add to project

After the build, refresh the view all files feature and you should see your .ps file.  Right click on that and say Include in Project.  It should be included as a Resource build action automatically, but if it isn’t, make sure it is.

That’s it (as I say with a snarky smile).  I know it seems like some hacking….and it is.  But if you don’t want to download the DirectX SDK, you can still re-use the WPF build taks with a little project file modification.

If you don’t have a clue what a pixel shader is, check out this video.

Hope this helps!