Blend Modes, Part II

In Part I of this series, I showed how I was able to eventually figure out how to create the Linear Burn blend mode effect and how to apply this effect to a Border element.

In Part II of this series, I am going to start off by showing how I was able to truly verify that I had written the Linear Burn blend mode effect correctly. And, then, I will share a few of the A + B = R gradient squares for a few of the blend modes that Paul Dunn’s post didn’t have. Finally, I will share the full blend mode effect library and the test harnesses that go with it.

So … here we go …

With the Linear Burn blend mode effect that I had created, it bothered me that the gradient that I had blended with the green … was white to gray … and not white to black as Robby’s post had shown. Was I doing things correctly? Was the HLSL that I written, right?

A little more searching and I ran into Paul Dunn’s post on Photoshop’s blend modes. Ah! Perfect! Exactly what I wanted, and sure enough, I had written Linear Burn correctly. Check out the screen shot below (from my test harness) and compare it to what you see on Paul Dunn’s post. A match. Whew!

linearburnverified.png

 

At that point, I started creating and going through every blend mode in his blog post, verifying each along the way. This went along fine until I hit the Vivid Light blend mode. The math that he had just wasn’t working. I tried to figure out what was wrong with it, but eventually I ran into another post that had a different way of expressing the math … it was in HLSL! Plugging in this HLSL worked! And what’s better, he had some additional effects that could be added to the library I was creating. And, so, I finished it off.

Now, as mentioned above, mouaif’s post had some blend mode effects that Paul Dunn’s post didn’t show visually. And, so, I will share those here:

Glow Effect

gloweffect.png

 

 

Reflect Effect

  reflecteffect.png

 

Hard Mix Effect

 hardmixeffect.png

 

Negation Effect

 negationeffect.png

 

Phoenix Effect

 phoenixeffect.png

 

Finally, Nathan’s post had a visual way of verifying things as well (near the bottom) and so I included in my test harness a window that let’s you apply the various blend mode effects to images from Nathan’s page. Here’s a screen shot of that window (with the Phoenix blend mode effect applied … which I think looks cool):

Test Harness Window (Images)

 

Without any further adieu, here’s the blend mode effects library and the test harness. All the same caveats apply to what you need on your machine to build the sample code (.NET 3.5 SP1, DirectX SDK, and the Shader Effects BuildTask and Templates from the WPF Futures stuff on CodePlex).

If you don’t want to build the library and test harness yourself … here are the binaries.

Also, I now have a live Silverlight test harness (you will need the Silverlight 3.0 runtime, 3.0.40624). 

Enjoy!

p.s. Thanks to Kevin Moore for the Color Picker that I used in this sample code. I believe I created that Color Picker from an article he did at one point. In fact, I think that some variant of this Color Picker ended up in his Bag-o-Tricks.

9 thoughts on “Blend Modes, Part II”

  1. Pingback: Cory Plotts’ Blog » Blend Modes, Part III

  2. Good job with the library.

    Do you know why the properties of the effects do not show up in Expression Blend 3? Means you are unable to edit the DPs such as Input and Texture from the design tool.

    Cheers,
    Jack

  3. Thanks.

    No, I don’t know why they aren’t showing up in Blend. That has bugged me too. Another thing is that when using the BackgroundEffectBehavior as in this post … the blending doesn’t show up WYSIWYG in Blend either. Sadness.

    Let me know if you figure out how to get it to work. I’m all for a good Blend experience.

  4. Pingback: Cory Plotts’ Blog » Blend Modes, Part I
  5. Pingback: Cory Plotts’ Blog » Blend Modes: Now Opacity Aware
  6. Pingback: Cory Plotts’ Blog » Blend Modes: Hue, Saturation, Color, and Luminosity with WPF 4.0
  7. Pingback: Resources from my QMSDNUG presentation about WPF Animations | Patrick Klug

  8. Hello,

    I have some questions about your blend mode library. I tested using the multiply blend mode effect in xaml and also directly from code. When I use it from XAML, it works fine. When I use it from code like:

    var e = new MultiplyEffect();
e.Texture = new VisualBrush(any Visual);

var rect = new Rectangle();
rect.Fill = Brushes.Blue;
rect.Effect = e;

    Then all I get is a grey color as a result … and not the proper result of multiplying a blue rectangle into the visual. I don’t know why the effect is not working correctly from code.

    Have you any idea or can you post the correct way to initialize the effect from code behind?

    Thanks,
    Daniel

  9. @Daniel, there is no reason that doing this by code shouldn’t work … you just need to make sure you are coding exactly what the xaml is doing.

    Using these blend modes was quite finicky at times. That is, blend modes really needed to be baked into the platform (which it never was) … and not cobbled together into library like I have done. I say this … by way of emphasizing that you really need to do in code what I’ve done in xaml. Any slight departure might cause you problems.

    In regards to your posted code, I didn’t have a Texture property on the effects. Did you rename BInput to Texture or something. If so, what you’ve posted should work.

    Are you trying to blend items of two different geometries? If so, remember (from my blog series) that you need the BackgroundEffectBehavior (see my Blend Modes, Part III post). And also note that things didn’t work properly, in that scenario, unless I had to have the visual I was blending into … as a sibling to the item I was blending in. See the HelloWorldVideoTestWindow test harness for more info on what I am talking about there.

    Good luck.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.