Summer night at Xisanqi in Beijing in 2013

This article was first published on BEFE and has since been revised to appear in my column Magical Colours.

I was always curious about what would happen if I superimposed two images together, and how the resulting graph came to be. As we know, the display uses the RGB model of color light, a kind of additive color mixing model, the three primary colors are red, green and blue, and the three colors are equally mixed to form white light. So what happens when two images are superimposed on top of each other? How is the process of combining image and background? Today, WE will talk about Alpha synthesis algorithm.

The article gives an overview of

Based on the original paper published by Thomas Porter and Tom Duff in 1984, this paper introduces the composition and blending algorithm of Alpha channel, which helps us better understand the process of image and background color combination.

You will understand:

  • RGBA model and Alpha channel
  • Compositing Operators
  • Blending
  • Formula derivation process and example

Alpha channel

We often use RGBA when writing CSS, for example, to give div a background color, using

div {
  background-color: rgba(255, 0, 0, 1);
}
Copy the code

The RGBA model is composed of RGB color space (the additive color space of RGB models) and Alpha channel. Alpha is the opacity parameter of the image. The value can be expressed as a percentage, an integer, or the number of entities 0-1. We know that when Alpha is zero, it’s completely transparent and can’t be seen; A value of 100% or 1 indicates that the pixel is completely opaque. When the channel value is between 0% and 100%, the pixels can be translucent as if they were passing through glass, which also makes pixel mixing possible.

RGBA can also be written as ARGB, for example, 100% opaque red is represented as 0xFF0000 or 0xFF0000FF in hexadecimal format, and 50% transparent red is represented as 0xFF000080 in ARGB format: 0x80FF0000.

Compositing Operators

Without further ado, let’s go to the Demo and see what it is.

In the Canvas, apply the Compose or blend mode operators when drawing shapes by setting the globalCompositeOperation.

GlobalCompositeOperation initial value is the source - over the optional range of < composite - mode > | < blend mode - > < composite - mode > = clear | copy | source-over | destination-over | source-in | destination-in | source-out | destination-out | source-atop | destination-atop | xor | lighter <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosityCopy the code

Here is an example of a red-blue combination drawn using the compositing Operators’ 12 operators.

It is easy to understand from the picture:

  • sourceFor the future,destinationAs the background
  • clearAll means clear. No area is available
  • copyOnly the Source field is displayed
  • overFor one above the other
  • inTake the intersection of the two
  • outTake the region where they don’t intersect
  • atopOne on top of the other
  • xorTake or
  • lighterAdditive method

Explain the principle of

In the example, there are 12 porter-duff operators that control the blending results of four subpixel regions.

The synthesis algorithm is based on the pixel model, source and destination constitute the final color of the pixel. The pixel is divided into four sub-pixel regions (binary combination: 00/01/10/11), each representing a combination of source and target.

  • Both (source & destination), both affect the final pixel color
  • Source, the final color is only related to the source
  • Destination, the final color is related only to destination
  • None, neither of which affects the final pixel color

Thus, the influence of each region on the final pixel color is determined by the coverage of the shape of the region’s pixels and the operator operator used. Alpha is used to represent coverage rate. Alpha equals to 1 means complete coverage, and alpha equals to 0 means no coverage. The area equation of each area given by the algorithm is:

Destination and Backdrop are the same concepts. In this model, α S represents the coverage of the source and αb represents the coverage of the backdrop

Both alpha source = alpha b = alpha s * s * (1 - alpha b) destination = (1 - alpha s) * alpha none b = (1 - alpha s) * (1 - alpha b)Copy the code

In the example of the color model, it is known that the coverage of both source and destination is 0.5 (assumed in the model), that is, both αs and αb are equal to 0.5.

Source = 0.5 * (1-0.5) = 0.25 Destination = (1-0.5) * 0.5 = 0.25 None = (1-0.5) * (1 - 0.5) = 0.25Copy the code

So, the coverage in each case is 0.25.

In the algorithm, the equation of pixel final coverage is:

α O = αs * Fa + αb * FbCopy the code

The color value of the corresponding coverage area is:

Co = αs * Fa * Cs + αb * Fb * CbCopy the code

The operation result Co we need should be:

Co = Co / α OCopy the code

Explain the meanings of a few terms:

  • + - * /Are mathematical operators, namely unary addition, unary subtraction, multiplication and division operators
  • All values are in the range of [0, 1], and the color value needs to be converted by 255, for example, 0xFF / 255 = 1
  • coIs the overlap area, the output color, isIn advance by AlphaAfter the value of the
  • Alpha oRepresents the synthesized color alpha
  • Alpha sThe source of alpha
  • Alpha bDestination of alpha
  • CoThe color value of the overlapping area
  • CsThe pixel color value of source
  • CbThe pixel color of backdrop backdrop(same as destination)
  • FaThe Fa value is determined by operator
  • FbThe Fb value is determined by operator

Let’s use operator = source-over to verify the formula.

Source-over corresponds to Fa = 1; Fb = 1 -- αs then: Co = αs * Cs + αb * Cb * (1 -- αs) α O = αs + α B * (1 -- αs) Co = Cs αo = 1 Finally generates the color of the overlapping area as Cs itself, that is, blue in the figure, which is consistent with the fact of the image. Other operation diagrams can also be obtained.Copy the code

The specific Settings for operators such as source-over, such as Fa = 1, are given in the algorithm. The coverage of source is 1, and the background is 1 – αs.

Look again at the plus operator = lighter.

Effect:

The corresponding lighter is known: Fa = 1; Fb = 1, co = αs * Cs + αb * Cb; In the example of α O = αs + αb, both αs and αb are 1, and the formula can be simplified as: Co = Cs + Cb AO = 1 red (1, 0, 0, 1) and blue (0, 0, 1, 1) add color to give magenta (1, 0, 1, 1), also known as magenta or magenta #FF00FF.Copy the code

Straight Alpha

Straight alpha. To put it simply, RGB in an image only represents the color of the pixel, regardless of whether it is transparent or not.

For example, the pixel value RGBA (0.2, 0.6, 0.4, 0.5) indicates that the pixel has 20% red brightness, 60% green brightness, 40% blue brightness, and the opacity is 50%, corresponding to the pure color brightness of (1, 1, 1, 0.5).

In advance by Alpha

Premultiplied alpha means that RGB in an image also represents the color of the pixels, but it’s multiplied with transparency. (The benefit is simplicity and accuracy in mixed calculation logic)

For example, the above RGBA (0.2, 0.6, 0.4, 0.5) converted to pre-multiplied Alpha, is RGB each value multiplied by 0.5 is (0.1, 0.3, 0.2, 0.5), the corresponding pure color is (0.5, 0.5, 0.5, 0.5)

Blending

Blending Blending is an application of Blending. It calculates the blended colors after the foreground and background overlap. It combines the foreground and background colors to obtain new blended colors.

The opacity of the foreground is unlimited. If the foreground is completely transparent, the blended color is the background color. If the foreground is completely opaque, the blended color is the foreground color. The opacity between (0, 1), the blended color, needs to be calculated by weighting the foreground and background colors using the flat Alpha color value.

To understand blending conceptually:

  1. First mix the source and destination to get the corrected source color (Cs)
  2. Then use the corrected color to compose with destination.

In fact, in mixing, there is no step, a one-time operation.

  1. First, the mixing formula is defined as:
Cm = B(Cb, Cs)
Copy the code

Explain the terms:

  • Range of all values [0, 1]
  • CmThe color value calculated by different mixing functions after mixing
  • BMixing functions for different mixing modes
  • CbThe color value of Backdrop is the same as that of Compositing
  • CsSource color value
  1. The modified color is defined by the formula:
Cr = (1 - αb) * Cs + αb * b (Cb, Cs)Copy the code

Explain the meaning of terms:

  • CrCorrected color
  • Alpha bThe backdrop of the alpha value

To understand the definition, you can use the analogy of operator = destination-over

Next, we use operator = source-over to derive the final calculation formula.

  1. knownsource-overOperator content.
Fa = 1; Fb alpha = 1 - alpha s o = alpha s + alpha b * (1 - alpha s) co = alpha s Cs + alpha b * * Cb * (1 - alpha s)Copy the code
  1. It is derived
Corrected source color, Cr, Cs in CO. In co = cs + cb * (1 - alpha s) / / in advance by alpha co = alpha s o * * cs + (1 - alpha s) * alpha b * cb alpha co = alpha s * o * (* (1 - alpha b) cs + alpha b * b (cb, Cs)) + (1 - alpha s) * alpha b * Cb = alpha s * * (1 - alpha b) Cs + alpha s * alpha b * b (Cb, Cs) + (1 - alpha s) * alpha b * Cb = alpha s Cs - alpha b * alpha s * * Cs + alpha s * alpha b * Cm + alpha b * Cb - alpha s * * alpha b * Cb = alpha s Cs + alpha b * (Cb - alpha s * Cs + alpha s * * Cm - alpha s Cb) = alpha s Cs + alpha b * * (Cb - alpha s * (Cb - Cm + Cs) eventually: Co = (alpha s Cs + alpha b * * (Cb - alpha s * (Cb + Cs - Cm)))/alpha oCopy the code

With the simplified derivation formula, we can substitute different Cm functions for different scenarios.

Below is an example of red-blue blending based on the blending theory’s 12 functions:

The small square added to the upper right corner of the blending theory scenario is drawn using the colors derived from the above formula, which is exactly the same as the color at the intersection of red and blue in the figure.

Example shows the 12 kinds of mixed function effect, after four (hue | saturation | color | luminosity) is too complex, regardless of is introduced. Use the mix-blending-mode property in the CSS to specify the blending mode

conclusion

After in-depth study of the algorithm of two big men, more feel that writing code is really a small porter, algorithm is king. As for the column of “Magic Colors”, we are still working hard to construct it. We hope to present the quietness and freshness of colors in a unique way.

The resources

  1. wiki
  2. Magic Colors: Do you really know anything about colors
  3. Compositing and Blending
  4. PORTERDUFF algorithm
  5. github
  6. Source code in example