Playing <BevelBitmapEffect> in a pixel shader / other method in WPF

Question

Now that <BevelBitmapEffect> (among other effects) has depreciated, I want to see how I could recreate the same thing in the Shader Effect (including its BevelWidth , EdgeProfile , LightAngle , Relief and Smoothness properties).

I am a little familiar with pixel shading, basically just manipulating the color of the whole image / element in Shazzam, but how to create a bevel that my name is. Is this a vertex shader, and if so, how do I get started? I searched high and low, but cannot find information that would allow me to start playing <BevelBitmapEffect> in a custom Effect .

Or, based on the comment below, is it 3D in WPF, and if so, are there code libraries to recreate the <BevelBitmapEffect> that mimics the one that came with previous versions of WPF?

Answer 1

There is a wonderful article by Rod Stevens from DevX, which shows how to use System.Drawing to create WPF effects (those that previously existed, such as Bevel) and much more. You must register to view the article, but it is located at http://www.devx.com/DevXNet/Article/45039 . Downloadable source code too.

Answer 2

To create a bevel, you need to know the distance from the edge for each pixel (search in all directions to alpha = 0). From this, you can calculate normal , then shade it (see Silverlight Example). As you already mentioned, there is not much information about bevels, but there are some good resources if you are looking for a bump mapping / normal mapping that looks like shading. In particular, this thread has an example of Silverlight using a pre-computed normal map.

To do everything in hardware, you would use a multi-pass shader, the built-in WPF effects were multi-pass, but this does not allow you to write your own. To get around this limitation:

• You can create several shaders and nest your element in several controls, applying different effects to each of them.
• Target WPF 4.0 and use Pixel Shader 3.0 to increase the number of teams. Although this may be too high a hardware requirement and there is no software backup for PS 3.0
• Follow some or all of the steps in the software.

Without executing one of them, you are lucky to make 3 or 4 pixel bevels before you reach the limit of the instruction, since the loops needed to quickly find the distance quickly increase the number of commands.

New sample

Download . Here is an example using PixelShader 3.0. It uses one shader to find the distance (aka height) to the edge, another (based on nvidia phong shaders ) is used for shading. Bevel profiles are created by adjusting the input height either using a code or using a special profile that can be used by supplying special texture. There are other features to add, but it seems simple enough to animate properties. Lack of comments, but I can explain the details if necessary.