Recreating <BevelBitmapEffect> in a Pixel Shader/Other Method in WPF

Question

Now that <BevelBitmapEffect> (amongst other effects) has been depreciated, I'm looking to see how I could re-create the exact same thing in a Shader Effect (including it's properties of BevelWidth, EdgeProfile, LightAngle, Relief and Smoothness).

I'm somewhat familar with pixel shading, mostly just colors manipulation of the whole image/element in Shazzam, but how to create a bevel elludes me. Is this a vertex shader and if so, how would I get started? I have searched high and low on this but can't seem to find an inkling of information that would allow me to get started in reproducing <BevelBitmapEffect> in a custom Effect.

Or, based on a comment below, is this 3D in WPF and if so, are there code libraries out there for recreating a <BevelBitmapEffect> that mimics the one that came with previous versions of WPF?

Answer 1

To create the bevel you need to know the distance from the edge for each pixel (search in all directions until alpha=0). From this you can calculate the normal then shade it (see silverlight example). As you mentioned there isn't much content about bevels but there are some good resources if you search for bump mapping/normal mapping to which the shading is similar. In particular this thread has a Silverlight example using a pre-calculated normal map.

To do everything in hardware ideally you would use a multipass shader, WPF's built-in effects are multipass but it doesn't allow you to write your own. To workaround this limitation:

• You could create multiple shaders and nest your element in multiple controls applying a different effect to each one.
• Target WPF 4.0 and use Pixel Shader 3.0, for the increased instruction count. Although this may be a too high a hardware requirement and there is no software fallback for PS 3.0
• Do some or all of the steps in software.

Without doing one of these you'd be lucky to do a 3 or 4 pixel bevel before you reach the instruction limit as the loops needed to find the distance increase the instruction count quickly.

New Sample

Download. Here is an example that uses PixelShader 3.0. It uses one shader to find the distance (aka height) to the edge, another (based on the nvidia phong shaders) is used to shade it. Bevel profiles are created by adjusting input height either with code or a custom profile can be used by supplying a special texture. There are some other features to add but it seems easily performant enough to animate the properties. Its lacking in comments but I can explain parts if needed.

Answer 2

There's a great article by Rod Stephens on DevX that shows how to use System.Drawing to create the WPF effects (the ones that used to exist, such as Bevel) and more. You've gotta register to view the article though, it's at http://www.devx.com/DevXNet/Article/45039. Downloadable source code too.