Alpha compositing

Alpha compositing (or simply compositing) is combining multiple (possibly partially transparent) layers of image data into a single image. If you have ever used Photoshop or GIMP, compositing is how all the layers are combined into a final image that can be displayed on screen.

The image data is assumed to be saved in the form of a grid of pixels, so that compositing can be done per pixel. In this post I will derive the composition equation, which describes how to compose one pixel onto another.

Notation

I will write a pixel PP as
P=((R,G,B),α) P = ((R, G, B), \alpha)

RR, GG, BB, and α\alpha are values in [0,1][0, 1]. The RGB components should correspond to the color of the pixel, expressed in a linear color space. This is important: as I wrote before, the default color space sRGB is not linear, so it needs to be converted! The alpha component corresponds to the opacity of the pixel, if α=0\alpha = 0 the pixel is fully transparent (e.g. invisible) and if α=1\alpha = 1 it is fully opaque (e.g. if it is composited on top of another pixel, that other pixel will not be visibly anymore).

I will often write C=(R,G,B)C = (R, G, B) because in the equations we don’t need to distinguish between the individual RGB components. The composition of a pixel XX on top of a pixel YY is denoted as X→YX \rightarrow Y, and the RGB and alpha components of a pixel XX are denoted as CXC_X and αX\alpha_X.

The compositing equation

First, we consider the case where we composite a pixel XX on a pixel YY which is opaque (so αY=1\alpha_Y = 1). If αX=1\alpha_X = 1 we expect the resulting color to be equal to CXC_X, and if αX=0\alpha_X = 0 we expect the resulting color to be equal to CYC_Y. Assuming that the transition is linear we derive
αX→Y=1CX→Y=αXCX+(1−αX)CY \begin{aligned} \alpha_{X \rightarrow Y} &= 1 \\ C_{X \rightarrow Y} &= \alpha_X C_X + (1 - \alpha_X) C_Y \end{aligned}

The generic case is a bit more complicated. We start with the alpha component. Physically, transparent object lets a certain fraction of light pass through it. If we have two objects on top of each other, and the first object lets a fraction (1−αX)(1 - \alpha_X) of light through, and the second lets a fraction (1−αY)(1 - \alpha_Y) of light through, we expect a fraction of (1−αX)(1−αY)(1 - \alpha_X)(1 - \alpha_Y) to go through both objects. Applying the same principles, we expect that 1−αX→Y=(1−αX)(1−αY)1 - \alpha_{X \rightarrow Y} = (1 - \alpha_X)(1 - \alpha_Y). More elegantly put,
αX→Y=αX+αY−αXαY \alpha_{X \rightarrow Y} = \alpha_X + \alpha_Y - \alpha_X \alpha_Y

For the RGB components it’s not clear where to start. It turns out to be informative to evaluate the RGB components of X→Y→ZX \rightarrow Y \rightarrow Z where ZZ is opaque. We can evaluate this as (X→Y)→Z(X \rightarrow Y) \rightarrow Z or as X→(Y→Z)X \rightarrow (Y \rightarrow Z). We find
C(X→Y)→Z=αX→YCX→Y+(1−αX→Y)CZ C_{(X \rightarrow Y) \rightarrow Z} = \alpha_{X \rightarrow Y} C_{X \rightarrow Y} + (1 - \alpha_{X \rightarrow Y})C_Z

and
CX→(Y→Z)=αXCX+(1−αX)CY→Z=αXCX+(1−αX)(αYCY+(1−αY)CZ) \begin{aligned} C_{X \rightarrow (Y \rightarrow Z)} &= \alpha_X C_X + (1 - \alpha_X) C_{Y \rightarrow Z} \\ &= \alpha_X C_X + (1 - \alpha_X)(\alpha_Y C_Y + (1 - \alpha_Y) C_Z) \end{aligned}

Since there really is just one result of compositing three pixels, we expect that both orders of evaluation give the same result (in mathspeak, the composition operator →\rightarrow is associative. That is, (X→Y)→Z=X→(Y→Z)(X \rightarrow Y) \rightarrow Z = X \rightarrow (Y \rightarrow Z).

Now, setting C(X→Y)→Z=CX→(Y→Z)C_{(X \rightarrow Y) \rightarrow Z} = C_{X \rightarrow (Y \rightarrow Z)} and simplifying a bit using the formula for αX→Y\alpha_{X \rightarrow Y} we found before, we find
αX→YCX→Y=αXCX+(1−αX)αYCY \alpha_{X \rightarrow Y} C_{X \rightarrow Y} = \alpha_X C_X + (1 - \alpha_X) \alpha_Y C_Y

This finally gives us the full, generic composition equation
αX→Y=αX+αY−αXαYCX→Y=αXCX+(1−αX)αYCYαX→Y \begin{aligned} \alpha_{X \rightarrow Y} &= \alpha_X + \alpha_Y - \alpha_X \alpha_Y \\ C_{X \rightarrow Y} &= \frac{\alpha_X C_X + (1 - \alpha_X) \alpha_Y C_Y}{\alpha_{X \rightarrow Y}} \end{aligned}

Premultiplied alpha

It is worth noting that the composition equation we derived in the last section contains a division. This is not ideal as divisions are very expensive to compute. The astute reader might have noticed that for any pixel we really only use the product of the RGB components and the alpha component. So instead of storing the RGB components, we can store the product of the RGB components and the alpha component (we still need to store the alpha component itself since it is needed in the composition equation).

This technique is known as premultiplied alpha or associated alpha (and not using it is sometimes called straight alpha or unassociated alpha). It makes computing compositions much nicer; instead of computing CX→YC_{X \rightarrow Y} we compute αX→YCX→Y\alpha_{X \rightarrow Y} C_{X \rightarrow Y} and the composition equation becomes

αX→Y=αX+αY−αXαYαX→YCX→Y=αXCX+(1−αX)αYCY \begin{aligned} \alpha_{X \rightarrow Y} &= \alpha_X + \alpha_Y - \alpha_X \alpha_Y \\ \alpha_{X \rightarrow Y} C_{X \rightarrow Y} &= \alpha_X C_X + (1 - \alpha_X) \alpha_Y C_Y \end{aligned}

It is worth noting that using premultiplied alpha throws away information in the color components for which α≠1\alpha \neq 1. So you should never store images with premultiplied alpha if you intend on making changes to the alpha channel. So in the context of a project, it’s probably best to have images with straight alpha under version control, and then convert them to premultiplied alpha as a build step. Alternatively, your application can convert to premultiplied alpha when it imports images (this is also a good place to convert to a linear color space, if it is necessary).

Sources

[1] Bartosz Ciechanowski - Alpha Compositing

[2] Wikipedia - Alpha compositing