Copyright © 2012 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
Compositing describes how shapes of different elements are combined into a single image. Conceptually, each element is rendered into its own buffer and is then merged with its backdrop. The most widely used compositing operation is simple alpha compositing. (see Simple Alpha Compositing) This spec will introduce additional compositing operators that will enable advanced graphical effects.
Blending (also known as transparency) describes how colors are
‘blended’ together. Typically, the
color of an element and the color of its backdrop are combined to create a
new color. This new color replaces the old color and is then composited
with the backdrop using the specified compositing mode.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This document is the first public working draft of this specification.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
The (archived) public mailing list public-fx@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “Compositing” in the subject, preferably like this: “[Compositing] …summary of comment…”
This document was produced by the CSS Working Group (part of the Style Activity) and the SVG Working Group (part of the Graphics Activity)
This document was produced by groups operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures (CSS) and a public list of any patent disclosures (SVG) made in connection with the deliverables of each group; these pages also include instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
The list of changes made to this specification is available.
normal’ blend
mode
plus’ blend mode
multiply’ blend
mode
screen’ blend
mode
overlay’ blend
mode
darken’ blend
mode
lighten’ blend
mode
color-dodge’ blend
mode
color-burn’ blend
mode
hard-light’ blend
mode
soft-light’ blend
mode
difference’ blend
mode
exclusion’ blend
mode
At the basic level, compositing describes how shapes interact while blending describes how colors interact. Both idioms use a rendered version of the current element (ie a shape or a group) and mix it with the backdrop.
This document will describe the algorithms of compositing and blending in the first part. The second part describes how they are specified in CSS.
Compositing is the process by which graphical objects are combined.
Alpha compositing uses the alpha values, or channel (bit mask) to
represent the coverage of each pixel. The alpha channel is often said to
represent the ‘opacity’. This
coverage information is used to control the compositing of colors.
Simple alpha compositing, like that found by default in SVG 1.1 and in GDI+ and many other graphics engines, composites each object onto the background image using a simplistic formula that has the effect of overlaying the object over the background. Where the objects overlap and coverage is not complete the color of the background may show through the object that has just been rendered.
In computer graphics, alpha compositing is the process of combining an image with a background to create the appearance of partial or full transparency. The alpha value is stored alongside the color and has a value between 0 and 1. A value of 0 means that the pixel does not have any coverage information and is transparent; i.e. there was no color contribution from any geometry because the geometry did not overlap this pixel. A value of 1 means that the pixel is opaque because the geometry completely overlapped the pixel.
A shape's contribution to a composition is described by the
multiplication of its color (Ca) and its alpha (αa). This is also called
the premultiplied alpha value. We will call this the
‘pixel’ from here on.
ca = Ca x αa
with
ca: the pixel value
Ca: the color value
αa: the alpha value
Conceptually, ‘alpha’ means
‘allow (1 - alpha) from behind to
show’. With this in mind, we can easily determine the pixel
after compositing.
Take the foreground pixel and add (1 - alpha) of the background pixel.
Thus, the formula becomes:
co = ca + cb x (1 - αa)
with
co: the pixel after compositing
ca: the pixel of the shape
cb: the pixel of the backdrop
αa: the alpha value of the shape
Figure 1
There are circumstances that we have to know the alpha value of the
pixel. For example in figure 1, shape 2 and 3 have opacity. They are
composited together because they are in a group.
This group is then composited on top of shape1. Note how the alpha of
shape 2 and 3 is still in effect and is letting the shape 1 shine through.
Without knowing αa of the group, we would not be able to calculate
this.
Luckily, the alpha value is determined the same way as the pixel
value:
take the alpha of the shape and add (1-alpha) of the backdrop. So:
αo = αa + αb x (1 - αa)
with
αo: the alpha after compositing
αa: the alpha of the shape
αb: the alpha of the backdrop
If you want to know the color of a shape and not just its pixel value, you can reverse the formula for premultiplied alpha:
Co = co / αo
By replacing co with the simple alpha compositing formula, you can directly use the color values that the user specified:
Co = 1/αo x (Ca x αa + Cb x αb x (1 - αa))
with
αo: the alpha after compositing
Co: the color after compositing
Ca: the color of the shape
Cb: the color of the backdrop
αa: the alpha of the shape
αb: the alpha of the backdrop
Next we will run through a couple of scenarios that show how alpha compositing works.
Figure 1
Figure 1 describes the most basic case. It consists of 1 shape that is
filled with a solid color so no compositing operation is required.
Figure 2
Figure 2 is a more complex example. There is still no alpha but there are 2 shapes that intersect each other.
Applying the compositing value, you get:
αo = 1 + 1 x (1 - 1) = 1 co = RGB(0, 0, 255) x 1 + RGB(255, 0, 0) x 1 x (1 - 1) co = RGB(0, 0, 255) Co = 1/1 * RGB(0, 0, 255) = RGB(0, 0, 255)
Figure 3
Figure 3 is an example where the shape has alpha but the backdrop is opaque.
Applying the compositing value, you get:
αo = .5 + 1 x (1 - .5) = 1 co = RGB(0, 0, 255) * .5 + RGB(255, 0, 0) * 1 * (1 - .5) co = RGB(0, 0, 127) + RGB(127, 0, 0) co = RGB(127, 0, 127) Co = 1/1 * RGB(127, 0, 127) = RGB(127, 0, 127)
Figure 4
Figure 4 is an example where both the shape and the backdrop have alpha.
Applying the compositing value, you get:
αo = .5 + .5 x (1 - .5) = .75 co = RGB(0, 0, 255) * .5 + RGB(255, 0, 0) * .5 * (1 - .5) co = RGB(0, 0, 127) + RGB(127, 0, 0) co = RGB(63, 0, 127) Co = 1/.75 * RGB(63, 0, 127) = RGB(84, 0, 169)
An important behavior of simple alpha compositing is its group
invariance. Adding or removing grouping with default attributes should not
show visual differences.
so: a + b + c = a + (b + c) = (a + b)+c
When adding attributes to the group such as knockout, isolate, blending or
Port-Duff compositing, groups are no longer be invariant.
Conceptually each group creates a new context. The content of a group is calculated first followed by blending and compositing. If there is alpha on the group, it is multipied with the alpha value of the group's content.
The end result of alpha compositing can contain alpha. For instance, a
solid red shape with an opacity value of .5 will end up with a RGB(255, 0,
0, .5) color. Since monitors and printers can't display opacity, we have
to remove this alpha value by compositing it with solid white. This
process is called ‘matting’.
Applying the compositing formula, you get:
co = RGB(255, 0, 255) * .5 + RGB(255, 255, 255) * 1 * (1 - .5) co = RGB(0, 0, 127) + RGB(127, 127, 127) co = RGB(127, 127, 255)
Until now, we haven't discussed how the backgkdrop is calculated. A
first assumption would be that it consists of everything that was drawn
earlier.
The problem with that is how you would deal with parent groups that have
opacity or non-default blending or compositing modes since the opacity and
blending on a group is applied at a later stage.
It turns out that these non-default attributes can be ignored when
calculating the background. So, if you are an element in a group that has
opacity, the opacity is ignored when calculating the backdrop.
Figure 5
Figure 5 has 2 simple shapes. The backdrop for the blue shape is the bottom right corner of the red shape. The dotted line shows the area that is examined during compositing of the blue shape.
Figure 6
In figure 6, the shape in the background has an alpha value. The alpha value of the background shape is preserved when the backdrop is calculated.
Figure 7
In figure 7, the blue and green shapes are in a group that has alpha. When calculating the backdrop for the blue shape, the red and green shapes are combined with simple alpha compositing and the group alpha is ignored. If the group had blending, compositing or filtering, those would also be ignored.
Under certain circumstances, you might want to limit the background
calculation upto a certain parent group. Compositing and blending each
have an attribute (or TBD the same attribute) that can be set on the group
where you want this to happen.
See the sections on compositing and blending on how this affects
rendering.
NOT FINISHED The landmark 1984 paper [3] by Thomas Porter and Tom Duff,
who worked for Lucasfilm, defined the algebra of compositing and developed
the twelve "Porter Duff" operators. These operators control the results of
mixing the four sub-pixel regions formed by the overlapping of graphical
objects that have an alpha or pixel coverage channel/value. The operators
use all practical combinations of the four regions. The list of PD
operators is: [add list] The following diagram shows the four different
regions of a single pixel that are considered when compositing: [show
diagram] The ‘source over’ compositing
operator corresponds with the default simple alpha compositing rules. The
diagram below shows an example of the ‘source
over’ operator with two 50% opaque shapes. Firstly, it shows
the two shapes that will be composited together using the ‘source over’ operator. The next section
demonstrates a subpixel view of the region where the two objects overlap.
It shows the coverage of the colors input to the compositing operation.
The third section indicates which colors from this sub-pixel view are
selected by the operator to contribute to the resultant color of the
overlapping region. The resulting opacity of the overlapping region of the
two shapes will be 75% as all of the sub-pixel regions contribute color
and opacity. The calculation of resultant opacities will be described
later. The last section of the diagram demonstrates the combination of the
two objects using the ‘source over’
operator. [show diagram] A Porter Duff operator such as ‘source atop’, used extensively in upcoming
examples, contains contributions from only two of the sub-pixel regions.
The ‘source atop’(src-atop) operator
selects the source color from the overlapping region and the destination
color not obscured by the source to produce the resultant color. The
resultant opacity is the combined opacity from these two regions. The
diagram below shows an example of the ‘source
atop’ operator with two 50% opaque shapes. It is similar to
the previous diagram for ‘source over’.
Firstly, it shows the two shapes that will be composited together using
the ‘source atop’ operator. The next
section demonstrates a subpixel view of the region where the two objects
overlap. It shows the coverage of the colors input to the compositing
operation. The third section of the diagram indicates which colors from
this sub-pixel view are selected by the operator to contribute to the
resultant color of the overlapping region. The resulting opacity of the
overlapping region of the two shapes will be 50%, as only two of the
sub-pixel regions contribute color and opacity. The calculation of
resultant opacities will be described later. The last section of the
diagram demonstrates the combination of the two objects using the
‘source atop’ operator. The region
where only source color was present is not rendered as the ‘source atop’ only select source color that overlaps
destination color. The twelve porter duff operators are shown below for
opaque and partially transparent objects. The blue rectangle is the source
and the orange circle is the destination.
Blending takes the colors of the source element and mixes them with the backdrop. The resulting blended element then replaces the original source. Note that the opacity of the source element is ignored during blending. The backdrop will also be matted to remove all alpha.
We will describe the ‘mixing’
formula as:
Cr = B(Cb, Cs)
with:
Cr: the result color
B: the formula that does the blending
Cb: the backdrop color
Cs: the source color
If the result of the mixing formula falls outside of the color range, it
will be clamped.
A blend mode is termed separable if each component of the result color is completely determined by the corresponding components of the constituent backdrop and source colors—that is, if the blend mode function B is applied separately to each set of corresponding components.
Each of the following blend modes will apply the blending function B(Cb, Cs) on each of the color components.
normal’ blend modeThis is the default attribute which specifies no blending. The blending formula simply select the source color.
B(Cb, Cs) = Cs
plus’ blend modeThe source is added to the backdrop.
B(Cb, Cs) = Cb + Cs
multiply’ blend modeThe source color is multiplied by the destination color and replaces the destination.
The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color.
B(Cb, Cs) = Cb x Cs
screen’ blend modeMultiplies the complements of the backdrop and source color values, then complements the result.
The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen.
B(Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
= Cb + Cs -(Cb x Cs)
overlay’ blend modeMultiplies or screens the colors, depending on the backdrop color value.
Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop.
B(Cb, Cs) = HardLight(Cs, Cb)
Overlay is the inverse of the ‘hardlight’ blend mode. See the definition of
‘hardlight’ for the formula.
darken’ blend modeSelects the darker of the backdrop and source colors.
The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
B(Cb, Cs) = min(Cb, Cs)
lighten’ blend modeSelects the lighter of the backdrop and source colors.
The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
B(Cb, Cs) = max(Cb, Cs)
color-dodge’ blend modeBrightens the backdrop color to reflect the source color. Painting with black produces no changes.
if(Cs < 1)
B(Cb, Cs) = min(1, Cb / (1 - Cs))
else
B(Cb, Cs) = 1
color-burn’ blend modeDarkens the backdrop color to reflect the source color. Painting with white produces no change.
if(Cs > 0)
B(Cb, Cs) = 1 - min(1, (1 - Cb) / Cs)
else
B(Cb, Cs) = 0
hard-light’ blend modeMultiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop.
if(Cs <= 0.5)
B(Cb, Cs) = Multiply(Cb, 2 x Cs)
else
B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
See the definition of ‘multiply’
and ‘screen’ for their formulas.
soft-light’ blend modeDarkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop
if(Cs <= 0.5)
B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb)
else
B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb)
with
if(Cb <= 0.25)
D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb
else
D(Cb) = sqrt(Cb)
difference’ blend modeSubtracts the darker of the two constituent colors from the lighter color.
Painting with white inverts the backdrop color; painting with black produces no change.
B(Cb, Cs) = | Cb - Cs |
exclusion’ blend modeProduces an effect similar to that of the Difference mode but lower in contrast. Painting with white inverts the backdrop color; painting with black produces no change
B(Cb, Cs) = Cb + Cs - 2 x Cb x Cs
Nonseparable blend modes consider all color components in combination
as opposed to the seperable ones that looks at each component
individually.
All of these blend modes conceptually entail the following steps:
a) Convert the backdrop and source colors from the blending color space to
an intermediate HSL (hue-saturation-luminosity) representation.
b) Create a new color from some combination of hue, saturation, and
luminosity components selected from the backdrop and source colors.
c) Convert the result back to the original color space.
The nonseparable blend mode formulas make use of several auxiliary functions:
Lum(C) = 0.3 x Cred + 0.59 x Cgreen + 0.11 x Cblue
ClipColor(C)
L = Lum(C)
n = min(Cred, Cgreen, Cblue)
x = max(Cred, Cgreen, Cblue)
if(n < 0)
C = L + (((C - L) * L) / (L - n))
if(x > 1)
C = l + (((Cred - L) * (1 - L) / (x - L))
SetLum(C, l)
d = l - Lum(C)
Cred = Cred + d
Cgreen = Cgreen + d
Cblue = Cblue + d
return ClipColor(C)
The subscripts min, mid, and max in the next function refer to the color
components having the minimum, middle, and maximum values upon entry to the function.
SetSat(C, s)
if(Cmax > Cmin)
Cmid = (((Cmid - Cmin) x s) / (Cmax - Cmin))
Cmax = s
else
Cmid = Cmax = 0
Cmin = 0
return C;
hue’ blend modeCreates a color with the hue of the source color and the saturation and luminosity of the backdrop color.
B(Cb, Cs) = SetLum(SetSat(Cs, Sat(Cb)), Lum(Cb))
saturation’ blend modeCreates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change.
B(Cb, Cs) = SetLum(SetSat(Cb, Sat(Cs)), Lum(Cb))
color’ blend modeCreates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for colouring monochrome images or tinting colour images.
B(Cb, Cs) = SetLum(Cs, Lum(Cb))
luminosity’ blend modeCreates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode.
B(Cb, Cs) = SetLum(Cb, Lum(Cs))
In the following example, the red and green rectangles are in a group and the green rectangle has a multiply blend mode.
The background that is available for blending, is the blue and red
rectangle and is shown on the right.
Now, if we made the group isolated, only the red rectangle is in the
background and the result becomes as follows:
The result is that the green rectangle doesn't blend with the blue rectangle.
If an element specifies non-default blending, compositing or opacity,
its renderstyle will revert to ‘flat’. This means that elements with z-index
will be not honor the depth of elements outside of the group.
Order: first blending is applied, followed by filtering and then compositing.
alpha-compositing’ property The description of the ‘alpha-compositing’ property is as
follows:
alpha-compositing’
| Value: | clear | src | dst | src-over | dst-over | src-in | dst-in | src-out | dst-out | src-atop | dst-atop | xor | inherit |
| Initial: | src-over |
| Applies to: | All elements In SVG 1.1 it applies only to
"container elements (except ‘mask’) and graphics elements"
|
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
enable-background’ property The description of the ‘enable-background’ property is as
follows:
enable-background’
| Value: | accumulate | new | inherit |
| Initial: | accumulate |
| Applies to: | All elements In SVG 1.1 it applies only to
"container elements (except ‘mask’) and graphics elements"
|
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
blend-mode’ property The description of the ‘blend-mode’ property is as follows:
blend-mode’
| Value: | normal | plus | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity | inherit |
| Initial: | normal |
| Applies to: | All elements In SVG 1.1 it applies only to
"container elements (except ‘mask’) and graphics elements"
|
| Inherited: | no |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
isolation’
property The description of the ‘isolation’ property is as follows:
isolation’
| Value: | accumulate | isolate | inherit |
| Initial: | accumulate |
| Applies to: | All elements In SVG 1.1 it applies only to
"container elements (except ‘mask’) and graphics elements"
|
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
knock-out’
property The description of the ‘knock-out’ property is as follows:
knock-out’
| Value: | preserve | knock-out | inherit |
| Initial: | preserve |
| Applies to: | All elements In SVG 1.1 it applies only to
"container elements (except ‘mask’) and graphics elements"
|
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
84 Conference Proceedings, Association
for Computing Machinery, Volume 18, Number 3, July 1984.