What Is Color Blending?

Blending is the process of blending two colors together.

The first color is called the source color. This the new color being added. The second color is called the destination color. This is the color that already exists (in the backbuffer, for example). Each color has a separate blend factor that determines how much of each color is combined into the final product. Once the source and destination colors have been multiplied by their blend factors, the results are combined according to the specified blend function. The normal blend function is simple addition.

The full formula looks like this:

(source × source blend factor) (blend function) (destination × destination blend factor)		  

The source blend factor is specified by the SourceBlend property, and the destination blend factor is specified by the DestinationBlend property. The BlendFunction property specifies the blend function to use, normally BlendFunction.Add. In that case the formula looks like this:

(source × SourceBlend) + (destination × DestinationBlend)		  

When the AlphaBlendEnable property is false, no blending occurs during rendering. In this case, the source pixel overwrites the destination pixel. When AlphaBlendEnable is true, you can create a lot of special effects using the SourceBlend and DestinationBlend properties:

Blend Type	Blend Settings
Alpha Blending	(source × Blend.SourceAlpha) + (destination × Blend.InvSourceAlpha)
Additive Blending	(source × Blend.One) + (destination × Blend.One)
Multiplicative Blending	(source × Blend.Zero) + (destination × Blend.SouceColor)
2X Multiplicative Blending	(source × Blend.DestinationColor) + (destination × Blend.SourceColor)

Figure 1.  This picture illustrates four common blend modes. From left to right: Alpha blending, Additive blending, Multiplicative blending, and 2X Multiplicative blending. The top image in each column is the source image and below, it's effect when added to the destination.

Alpha blending uses the alpha channel of the source color to create a transparency effect so that the destination color appears through the source color. For example, if you clear your backbuffer to Color.Gray, it will be colored (0.5,0.5,0.5,1). If you then take a Color.White color with a partial alpha value (1,1,1,0.4), the result will be 60 percent of the destination color and 40 percent of the source: (0.5 x 0.6) + (1 x 0.4). The resulting color will be (0.7,0.7,0.7, 1). The alpha values are multiplied as well - (.6 x 1) + .4 gives us an alpha value of 1.

In some cases, alpha blending is automatic. When drawing sprites using the SpriteBatch class, choosing SpriteBlendMode.AlphaBlend configures alpha blending for you.

By default, the alpha channel is blended along with the red, green, and blue channels using the SourceBlend and DestinationBlend properties. You can choose to customize the blending for just the alpha channel by using the AlphaSourceBlend and AlphaDestinationBlend properties. When you compute the alpha channel, these properties are used as blending factors if the SeparateAlphaBlendEnabled property is true.

See Also

Concepts

2D Graphics Overview
3D Graphics Overview

Tasks

How To: Draw a Masked Sprite over a Background

Reference

RenderState
SourceBlend
DestinationBlend
AlphaSourceBlend
AlphaDestinationBlend
Blend
SpriteBlendMode.AlphaBlend