Blend effect

Use the blend effect to combine 2 images. This effect has 26 blend modes.

The CLSID for this effect is CLSID_D2D1Blend.

Blending examples

Here is an example image of every blend mode of the blend effect. A full list of the blend modes and the corresponding mode properties are in the next section

Effect example screenshot of all the available blend modes.

Here is another example using the exclusion mode.

Before image 1
The first source image before the effect.
Before image 2
The second image before the effect.
After
The image after the transform.

 


ComPtr<ID2D1Effect> blendEffect;
m_d2dContext->CreateEffect(CLSID_D2D1Blend, &blendEffect);

blendEffect->SetInput(0, bitmap);
blendEffect->SetInput(1, bitmapTwo);
blendEffect->SetValue(D2D1_BLEND_PROP_MODE, D2D1_BLEND_MODE_EXCLUSION);

m_d2dContext->BeginDraw();
m_d2dContext->DrawImage(blendEffect.Get());
m_d2dContext->EndDraw();

Effect properties

Display name and index enumerationType and default valueDescription

Mode

D2D1_BLEND_PROP_MODE

D2D1_BLEND_MODE

D2D1_BLEND_MODE_MULTIPLY

The blend mode used for the effect. See Blend modes for more info.

 

Blend modes

The table here shows all the blend modes of this effect. The helper functions necessary to compute the output of the effect are in the next section.

Color: OPRGB = f(FRGB, BRGB) * FA * BA + FRGB * FA * (1 - BA) + BRGB * BA * (1 - FA)

Alpha: OA = FA * (1 - BA) + BA

Where:

  • OPRGB is the pre-multiplied output color
  • OA is Output Alpha
  • BRGB is the un-pre-multiplied destination color
  • BA is destination alpha
  • FRGB is the un-pre-multiplied source color
  • FA is source alpha
  • f(SRGB, DRGB) is a blend function that varies per-blend-mode

Some of the blend modes require conversion to and from the hue, saturation, luminosity (HSL) color space to RGB.

Enumeration NameEquation
D2D1_BLEND_MODE_DARKENDarkenBasic blend formula for alpha only. mathematical formula for a darken effect.
D2D1_BLEND_MODE_MULTIPLYMultiplyBasic blend formula for alpha only. Mathematical formula for a mutiply effect.
D2D1_BLEND_MODE_COLOR_BURNColor BurnBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a coor burn effect.
D2D1_BLEND_MODE_LINEAR_BURNLinear BurnBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a linear burn effect.
D2D1_BLEND_MODE_DARKER_COLORDarker ColorBasic blend formula for alpha only. Mathematical formla for a darken color effect.
D2D1_BLEND_MODE_LIGHTENLightenBasic blend formula for alpha only. Mathematical formula for a lighten effect.
D2D1_BLEND_MODE_SCREENScreenBasic blend formula for alpha only. Mathematical formula for a screen effect.
D2D1_BLEND_MODE_COLOR_DODGEColor DodgeBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a color dodge effect.
D2D1_BLEND_MODE_LINEAR_DODGELinear DodgeBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a linear dodge effect.
D2D1_BLEND_MODE_LIGHTER_COLORLighter ColorBasic blend formula for alpha only. Mathematical formula for a lighter color effect.
D2D1_BLEND_MODE_OVERLAYOverlayBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for an overlay effect.
D2D1_BLEND_MODE_SOFT_LIGHTSoft LightBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a soft light effect.
D2D1_BLEND_MODE_HARD_LIGHTHard LightBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a hard light effect.
D2D1_BLEND_MODE_VIVID_LIGHTVivid LightBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a vivid light effect.
D2D1_BLEND_MODE_LINEAR_LIGHTLinear LightBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a linear light effect.
D2D1_BLEND_MODE_PIN_LIGHTPin LightBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a pin light effect.
D2D1_BLEND_MODE_HARD_MIXHard MixBasic blend formulas with f(FRGB, BRGB) = Mathematical formula for a hard mix effect.
D2D1_BLEND_MODE_DIFFERENCEDifferenceBasic blend formulas with f(FRGB, BRGB) = abs(FRGB - BRGB)
D2D1_BLEND_MODE_EXCLUSIONExclusionBasic blend formulas with f(FRGB, BRGB) = FRGB + BRGB – 2 * FRGB * BRGB
D2D1_BLEND_MODE_HUEHueBasic blend formula for alpha only. Mathematical formula for a hue blend effect.
D2D1_BLEND_MODE_SATURATIONSaturationBasic blend formula for alpha only. Mathematical formula for a sturation blend effect.
D2D1_BLEND_MODE_COLORColorBasic blend formula for alpha only. Mathematical formula for a color blend effect.
D2D1_BLEND_MODE_LUMINOSITYLuminosityBasic blend formula for alpha only. Mathematical formula for a luminosity blend effect.
D2D1_BLEND_MODE_DISSOLVEDissolve

Given:

  • A scene coordinate XY for the current pixel
  • A deterministic pseudo-random number generator rand(XY) based on seed coordinate XY, with unbiased distribution of values from [0, 1]

Mathematical formula for a dissolve blend effect.

D2D1_BLEND_MODE_SUBTRACTSubtractBasic blend formula for alpha only. Mathematical formula for a subtract blend effect.
D2D1_BLEND_MODE_DIVISIONDivisionBasic blend formula for alpha only. Mathematical formula for a division blend effect.

 

Note  For all Blend modes, the output value is premultiplied and clamped to the range [0, 1].

HSL color space conversions

The luminosity component is computed using the RGB weights here:

  • kR = 0.30
  • kG = 0.59
  • kB = 0.11

Converting from RGB to HSL

Mathematical formula describing the transformation from RGB color to HSL color.

This places S and L in the range [0.0, 1.0] and H in the range [-1.0, 5.0].

Converting from HSL to RGB

To convert the other way we use the inverse of the previous calculations.

If S = 0 then R = G = B = L

Otherwise there are six hue-dependant cases:

If H is greater than 0, the values are in the red/magenta sector where R > B > G.

Mathematical equaiton step one of six converting HSL color to RGB.

If H is greater than or equal to 0 and less than 1, the values are in the red/yellow sector where R > G > B.

Mathematical equaiton step two of six converting HSL color to RGB.

If H is greater than or equal to 1 and less than 2, the values are in the yellow/green sector where G > R > B.

Mathematical equaiton step three of six converting HSL color to RGB.

If H is greater than or equal to 2 and less than 3, the values are in the green/cyan sector where G > B > R.

Mathematical equaiton step four of six converting HSL color to RGB.

If H is greater than or equal to 3 and less than 4, the values are in the cyan/blue sector where B > G > R.

Mathematical equaiton step five of six converting HSL color to RGB.

If H is greater than or equal to 4, the values are in the blue/magenta sector where B > R > G.

Mathematical equaiton step six of six converting HSL color to RGB.

Because the blending modes make arbitrary combinations of HSL components from two different colors, it is common for the converted RGB value to be out-of-gamut, that is, one or more channel components may be outside the legal range of [0.0, 1.0]. These colors are brought back into gamut by minimally reducing the saturation, while preserving both hue and luminosity:

Mathematical formula describing the corrections required for out of gamut instances.

Output bitmap

The output bitmap for this effect is always the size of the union of the two input images.

Sample code

For an example of this effect, download the Direct2D composite effect modes sample.

Requirements

Minimum supported clientWindows 8 and Platform Update for Windows 7 [desktop apps | Windows Store apps]
Minimum supported serverWindows 8 and Platform Update for Windows 7 [desktop apps | Windows Store apps]
Headerd2d1effects.h
Libraryd2d1.lib, dxguid.lib

 

Related topics

ID2D1Effect

 

 

Community Additions

ADD
Show:
© 2014 Microsoft