subscribe

Alpha-Blending

alphablending

Alpha-blending is a technique which can be used when computer graphics are laid on top of each other and one or more of the objects contain a transparent, or semi-transparent, portion.

It ensures that the pixels of the graphic which are underneath a transparent area are visible through it and that their colour or brightness is adjusted according to the degree of transparency of the upper object. The alpha channel is really a form of mask, dictating what amount of information should be allowed to show through from lower-lying graphics.

In a 24-bit/pixel graphic there are three “channels”, which represent the three primary additive colours: red, green and blue. The red channel contains information about how much red is contained in each pixel of the image, the green channel how much green and so on. Each channel takes up eight of the 24 bits used to represent each pixel. When 32-bit graphics are used, the extra eight pixels can be used to hold transparency information and are known collectively as the “alpha channel”.

A pixel in the alpha channel with all eight bits holding a value of ‘0’ represents an alpha value of zero, which means that the corresponding pixel is completely transparent. If all eight bits hold a value of ‘1’, then the alpha value for that pixel is one and the pixel is opaque. If the first four bits are set to ‘1’ and the remainder to ‘0’, then the alpha value is 0.5 and the pixel is 50% transparent.

Imagine that we have a lower graphic, an upper graphic which is partly transparent and a “target graphic” which will hold the image resulting from overlaying the lower graphic with the upper. When alpha-blending is applied, the value representing the amount of red in a pixel of the lower graphic is picked up and multiplied by one minus the alpha value of the pixel in the upper graphic which is immediately above it. The red value of the pixel in the upper graphic is then multiplied by the value in its own alpha channel. These two values are then added together and stored in the red channel of the corresponding pixel in the target graphic. The process is repeated for the green and blue channels and the alpha value is then discarded. Once all the pixels in the upper and lower graphics have been processed, further layers can be applied using the same technique, allowing complex graphic scenes to be built up.

In the accompanying image, the same simple graphic, a graduated fill, has been overlaid on the photograph with (upper) and without (lower) using alpha-blending. The alpha channel values in the graphic range from one (completely opaque) on the left to zero (completely transparent) on the right.