C # Use Direct2D for Corner Effects

Direct2D is Microsoft's new two-dimensional graphics API, which provides high-performance and high-quality presentation for two-dimensional geometric images, bitmaps, and text. Direct2D supports hardware acceleration. Regardless of the drawing speed or quality, Direct2D is much better than GDI and GDI +, but the system requires Windows 7 or Windows Vista SP2 or later.

For more information about Direct2D, see Microsoft's help on Direct2D.

Direct2D has many built-in Effects, including Gaussian Blur, Color Matrix, and Shadow. The list of all Effects can be found here) see. Using these effects, you can make a lot of effects. If they are combined, you can fully implement the filter function in PhotoShop.

This article introduces how to combine multiple special effects to achieve Bevel effects. The specific implementation uses the SharpDX class library because it supports the built-in effects of Direct2D, and Microsoft's WindowsAPICodePackage is not supported at least in version 1.1. SharpDX is currently using the latest development version 2.5.0. It comes with two groups of DLL that support DirectX 11 and DirectX 11.1. The previous DLL Group does not support Effects, therefore, you must use a DLL that supports DirectX 11.1.

How to Apply Effects to Primitives is the main principle of corner Effects. This is an official help document. Its built-in example is C ++, in addition, the system requires Windows 8.1 Preview + Microsoft Visual Studio 2013 Preview. Therefore, I extracted the core part and wrote an example myself, as shown in effect 1.

Figure 1 Comparison of source bitmap and diagonal Angle

As shown in process 2 of corner effects, a better corner effect can be achieved by combining four special effects.

Figure 2 Results implementation process and results

First, draw an image (or load it from the outside) to a SharpDX. Direct2D1. Bitmap1 object. The figure in the example is drawn using the Direct2D method, and can also be loaded from the outside world in actual use. It should be noted that the background must be transparent, and the opaque part will produce an angle, otherwise it will only produce an angle at the edge of the image. This bitmap is called"Source bitmap".

Add a SharpDX. Direct2D1. Effects. GaussianBlur effect to the source bitmap. The radius of Gaussian Blur (the StandardDeviation attribute) determines the angle size. As shown in 3, the radius is 8 and the radius is 12. Obviously, the angle is larger. Here the Gaussian blur effect is mainly used to make the source image produce a gradient of transparency (Alpha), so that it can be processed in the next step. SharpDX. Direct2D1. Effects. Shadow can also be used to generate a gradient of transparency.

Figure 3 Comparison of Different Gaussian Blur radius

Next,Result of GaussianBlur EffectApply SharpDX. direct2D1. effects. pointSpecular special effect. This special effect is the key to the oblique effect. This special effect actually treats the source image as a reflection surface and uses the Alpha channel of the source image to represent the height of the reflection surface, then, use a light source to illuminate the source image. The reflected result is the processing result of the special effect. In this way, the Alpha gradient obtained by Gaussian blur in the previous step is equivalent to generating a "bulge" for the source image ".

PointSpecular effects have many parameters, including the position, color, focus, and surface scaling ratio of the light source. Different parameters produce different "angle" effects. The LightPosition attribute is the position of the light source, which can change the direction of the oblique angle. As shown in figure 4, the light source is on the top, and the light source is on the right, and the effect is also different.

Figure 4 Comparison of different light sources

The SurfaceScale attribute is the scale ratio of the surface, which can change the angle height, as shown in Figure 5.

Figure 5 Comparison of Different Angle heights

Other parameters of PointSpecular effects can also affect the final corner effect, which requires testing by yourself. For more information about PointSpecular effects, see Spot-specular lighting effect.

Then, use the SharpDX. Direct2D1. Effects. Composite special effectSource bitmapAndPointSpecular effect resultsCombined. The Composite special effect combination principle is very simple, that is, according to the Mode attribute, select different input pixels. For the specific Combination Principle of the special effect, see Composite effect.

As shown in figure 2, The PointSpecular effect is larger than the source bitmap, and there are some unnecessary parts. Apply a Composite effect and set the Mode attribute to CompositeMode. SourceIn. In this way, the combination principle is O = DA * S, that is, the output pixel = the Alpha value of Destination * Source. Destination is the first input (index 0, that is, the Source Bitmap), and Source is the second input (Index 1, that is, the PointSpecular effect ). In this way, you can remove unnecessary parts from the PointSpecular effect results.

In the last step, use the SharpDX. Direct2D1. Effects. ArithmeticComposite special effectSource bitmapAndResults of Composite special effectsCombined. The ArithmeticComposite special effect is an arithmetic combination special effect, the formula $ Output _ {rgba} = C_1 * Source _ {rgba} * Destination _ {rgba} + C_2 * Source _ {rgba} + C_3 * Destination _ {rgba} + c_4 $ to combine two input bitmap pixels, for more information, see Arithmetic composite effect.

Here, the four values of the combination formula (set by the Coefficients attribute) $ C_1, C_2, C_3 $, and $ C_4 $ determine the final output effect. The values of these four values are very related to the attributes of the previous PointSpecular special effects. In this example, a group of values always used is Vector4 (0.0f, 1.0f, 1.0f, 0.0f ), if this set of values is changed to Vector4 (1.0f, 0.5f, 0.0f, 0.0f), it will be shown in 6. The diagonal angle produced by the new values below is obviously darker.

Figure 6 Comparison of Different Coefficients attributes

If you change the properties of a set of PointSpecular effects, that is, except that SurfaceScale is still set to 5f, all other properties take the default value, as shown in result 7 of the preceding two Coefficients attributes, the old value is highlighted, and the color of the new value is positive, but the oblique angle is not very obvious.

Figure 7 Comparison of Different Coefficients attributes under new lighting conditions

In general, the implementation steps of the Oblique effect are basically fixed, that is, the above five steps. The angle size, height, and direction can also be easily determined. The size corresponds to the StandardDeviation attribute of the GaussianBlur special effect. The height corresponds to the SurfaceScale attribute of the PointSpecular special effect and the direction corresponds to the LightPosition attribute of the PointSpecular special effect. However, the color of corner effects is complex and determined by the SpecularExponent attribute, SpecularConstant attribute, and Coefficients attribute of ArithmeticComposite special effects, the LightPosition attribute also affects the color of the diagonal effect to a certain extent. This requires experience and experimentation.

All source code and class libraries used can be downloaded here.