Add sizzle to your app with image effects: Part 3


This is part 3 of a 3 part series about Win2D image effects. I strongly recommend you start with parts 1 and 2 if you haven’t already read them.

Part 1
Part 2
Part 3 (this part)

How do image effects work under the covers?

As you probably know, Win2D is a wrapper for existing platform functionality in Direct2D and other parts of the DirectX family of APIs. Image effects specifically wrap the Direct2D Effects API; the concepts and capabilities you’ve read about in this blog series have a 1:1 mapping to Direct2D Effects.

As mentioned in Part 1, the core of an image effect is HLSL shader code. Win2D image effects support pixel, vertex and compute shaders. They also can access the hardware blend unit. This means that, in addition to pixel-centric manipulations, an effect can alter an image’s geometry in 3D space as well as perform advanced computational analysis.

What image effects are available in Win2D?

As of today, Win2D ships with the following built-in effects:

  • ArithmeticComposite
  • Atlas
  • Blend
  • Border
  • Brightness
  • ColorMatrix
  • ColorSource
  • Composite
  • Crop
  • DirectionalBlur
  • DisplacementMap
  • DistantDiffuse
  • DistantSpecular
  • DpiCompensation
  • GammaTransfer
  • GaussianBlur
  • HueRotation
  • LinearTransfer
  • LuminanceToAlpha
  • Morphology
  • OpacityMetadata
  • PointDiffuse
  • PointSpecular
  • Premultiply
  • Saturation
  • Scale
  • Shadow
  • SpotDiffuse
  • SpotSpecular
  • Tile
  • Transform2D
  • Transform3D
  • Turbulence
  • UnPremultiply

This is almost the entire list of effects that are in Direct2D Effects. We hope to eventually expose all of them in Win2D.

Can I write my own image effects?

Unfortunately, it is not possible to add custom image effects to Win2D today. For native DirectX developers, Direct2D Effects offers rich support for custom effects; in fact, the API available to third party effect authors is identical to the API that the Direct2D team uses to implement the built-in effects.

Custom effects is on our backlog. Because implementing an effect is significantly more complicated than using precanned effects, we are thinking hard about the best way to expose this to our developer audience. Please let us know if you think this is something that we should bump up in priority in our backlog, or if you have specific requirements or use cases!

As of Win2D version 1.6.0, it is possible to create custom image effects.

I know how to write HLSL, so why should I use image effects?

(This question is geared towards seasoned Direct3D developers. If you don’t care about Direct3D or HLSL, the key point is that Direct2D and Win2D do a lot of hard work in order to ensure correct behavior and maximize performance on your behalf.)

You may be wondering what value Direct2D and Win2D image effects provide over rolling your own Direct3D-based pipeline.

First, we expect that many authors of custom Direct2D effects already have their core imaging algorithms implemented in HLSL or another language; this imaging “kernel” is often the part that they care most about. But having an HLSL shader is only a small part of the work needed to correctly implement an effects pipeline. Direct2D and Win2D handle everything needed to:

  • manage Direct3D pipeline state and make Direct3D calls
  • traverse and execute arbitrary directed acyclic graphs of effects
  • allocate and manage intermediate resources
  • support a fully-featured property system and animation
  • support high DPI
  • dynamically throttle rendering operations to maintain responsiveness of the GPU

(Direct2D also supports images that exceed the Direct3D maximum texture size and high-precision/HDR, but these are not in Win2D yet.

As of Win2D version 1.10.0, CanvasVirtualBitmap adds support for images greater than max texture size)

Second, we’ve invested heavily over the years to optimize Direct2D Effects’ performance (and hence, Win2D) for 2D and imaging scenarios. Among other optimizations, Direct2D and Win2D will:

  • analyze the effect graph and only process the minimum number of pixels necessary by tracking clipping rectangles and opaque regions
  • adapt to differing graphics hardware capabilities
  • intelligently reorder and cache rendering operations to reduce expensive Direct3D state changes and resource creation operations
  • split up rendering into tiles which improves cache coherency and also avoids GPU hangs due to overly complex effect graphs
  • collapse eligible combinations of effects into a single render pass
  • tightly integrate with other parts of Direct2D which greatly increases the performance of interleaving geometry-based and pixel-based commands together
  • tightly integrate with the Windows Imaging Component to more efficiently decode and encode image files

What’s next?

Try out Win2D image effects, send us feedback, and start writing cool apps!

The sky is the limit with image effects. We originally focused on optimizing for UI and photo scenarios. Two early customers of Direct2D effects were the Windows 8 Photos app which implemented their photo editing pipeline using image effects, and Internet Explorer for, among other things, SVG filter effect support (check out the cool IE filter effects demo page which includes Burning Text implemented in SVG!). However, image effects is a general purpose API and we look forward to seeing what crazy scenarios you can accomplish. You are more than welcome to create a heavy metal rock band app and use Burning Text to give it that authentic look J.

Resources

For convenience, here are the main links that are referenced in this blog series:

Win2D image effects reference
Win2D backlog
DirectX HLSL reference
Burning text source code (burningtextexample.xaml, burningtextexample.xaml.cs)
Direct2D Effects reference
Direct2D custom effects

Comments (1)

  1. Omari_O says:

    Hi Simon.

    Have a look at the comments here blogs.msdn.com/…/the-roadmap-for-wpf.aspx

    People want D2D drawing on desktop 🙂

Skip to main content