Search code examples
algorithmgraphicsblend

Blend mode on a transparent and semi transparent background


In general, the "normal" blend mode equation looks like this:

D = Sa * S + D * (1.0 - Sa)

where D is destination color, Sa is source alpha and S is source color.

Now, this works fine with fully opaque destination but I'd like to know how you would handle that with semi and fully transparent destination.

When blending the source over a fully transparent destination, the source pixel (a pixel being color and alpha) will be unchanged and not blended like in the equation before, and if the destination background is fully opaque, the above equation should be applied, but I can't find a nice way to handle the situations where destination alpha is in between 0 and 1.

For example, if you blend a white pixel with 50% alpha on a transparent background, the color should not tend to that transparent color value (which is more or less in an undefined state), the destination color should be full white, and not 50% (after alpha multiplication), which is what you get after applying the above equation (if D is made the same color as S, which was something I thought of).


Solution

  • This equation is a simplification of the general blending equation. It assumes the destination color is opaque, and therefore drops the destination color's alpha term.

    D = C1 * C1a + C2 * C2a * (1 - C1a)
    

    where D is the resultant color, C1 is the color of the first element, C1a is the alpha of the first element, C2 is the second element color, C2a is the alpha of the second element. The destination alpha is calculated with:

    Da = C1a + C2a * (1 - C1a)
    

    The resultant color is premultiplied with the alpha. To restore the color to the unmultiplied values, just divide by Da, the resultant alpha.