8000 csswg-drafts/compositing-2/Overview.bs at main · myakura/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
1566 lines (1164 loc) · 59.2 KB

Overview.bs

File metadata and controls

1566 lines (1164 loc) · 59.2 KB
Raw
<pre class='metadata'>
Title: Compositing and Blending Module Level 2
Group: csswg
Status: ED
Work Status: Exploring
ED: https://drafts.csswg.org/compositing-2/
TR: https://www.w3.org/TR/compositing-2/
Previous Version:
Shortname: compositing
Level: 2
Link Defaults: css-color-5 (property) color, css-masking-1 (property) mask
Editor: Rik Cabanier, Adobe Systems Inc., cabanier@adobe.com, w3cid 106988
Editor: Chris Harrelson, Google, chrishtr@chromium.org, w3cid 90243
Former Editor: Nikos Andronikos, Canon Information Systems Research Australia, Nikos.Andronikos@cisra.canon.com.au
Abstract: Compositing describes how shapes of different elements are combined into a single image. There are various possible approaches for compositing. Previous versions of SVG and CSS used <a href="https://www.w3.org/TR/SVG11/masking.html#SimpleAlphaBlending">Simple Alpha Compositing</a>. In this model, each element is rendered into its own buffer and is then merged with its <a>backdrop</a> using the Porter Duff ''source-over'' operator. This specification will define a new compositing model that expands upon the Simple Alpha Compositing model by offering:
Abstract: <ul><li>additional Porter Duff compositing operators</li><li>advanced blending modes which allow control of how colors mix in the areas where shapes overlap</li><li>compositing groups</li></ul>
Abstract: In addition, this specification will define CSS properties for blending and group isolation and the properties of the {{globalCompositeOperation}} attribute.
</pre>
<pre class="link-defaults">
spec: css2;
type: dfn; text: stacking context
spec: css-cascade-3
type: dfn; text: inherit
spec:html;
type:element; text:body
</pre>
<style type="text/css">
a[data-link-type=element]::before,span[data-link-type=element]::before {
content: '<';
}
a[data-link-type=element]::after,span[data-link-type=element]::after {
content: '>';
}
</style>
<h2 id="introduction">Introduction</h2>
<em>This subsection is non-normative.</em><br>
The first part of this document describes the properties used to control the compositing in CSS.
The second part will describe the algorithms of Porter Duff compositing and blending.
<h2 id="reading-this-document">Reading This Document</h2>
Each section of this document is normative unless otherwise specified.
<h3 id="module-interactions">Module interactions</h3>
This specification defines a set of CSS properties that affect the visual rendering of elements to which
those properties are applied; these effects are applied after elements have been sized and positioned according
to the [[css2/visuren#visual-model-intro|Visual formatting model]]. Some values of these properties result in the creation of a
[=containing block=],
and/or the creation of a [=stacking context=].
The 'background-blend-mode' property also builds upon the properties defined in the <a href="https://www.w3.org/TR/css3-background/#placement" title="Backgrounds and Borders">CSS Backgrounds and Borders</a> module [[!CSS3BG]].
This specification also enhances the rules as specified in <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending" title="simple alpha blending">Section 14.2 Simple alpha compositing</a> of [[SVG11]] and <a href="https://www.w3.org/TR/css3-color/#alpha" title="simple alpha compositing">simple alpha compositing</a> of [[!CSS3COLOR]].
This module also extends the
{{globalCompositeOperation}}.
<h3 id="values">Values</h3>
This specification follows the [[css2/about#property-defs|CSS property
definition conventions]]. Value types not defined in
this specification are defined in CSS Level 2 Revision 1 [[!CSS21]]. Other CSS
modules may expand the definitions of these value types: for example [[!CSS3COLOR]],
when combined with this module, expands the definition of the &lt;color>
value type as used in this specification.
In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the [=inherit=]
keyword as their property value. For readability it has not been repeated
explicitly.
<h2 id="csscompositingandblending">Specifying Blending in CSS </h2>
<h3 id="compositingandblendingorder">Order of graphical operations</h3>
The compositing model must follow the <a href="https://www.w3.org/TR/SVG11/render.html#Introduction">SVG compositing</a> model [[!SVG11]]: first any filter effect is applied, then any clipping, masking, blending and compositing.
<h3 id="csscompositingrules_CSS">Behavior specific to HTML</h3>
<!-- <p>
If an element specifies non-default blending or <a href="https://www.w3.org/TR/css3-color/#transparency">'opacity'</a>, its <a href="https://www.w3.org/TR/css3-2d-transforms/#transform-style-property">transform-style</a> [[CSS3-TRANSFORMS]] and that of all of its children must revert to 'flat'.<br>
The application of blending other than 'normal' to an element must also establish a [=stacking context=] the same way that CSS <a href="https://www.w3.org/TR/css3-color/#transparency">'opacity'</a> does. One of the consequences is that elements with z-index must not honor the depth of elements outside of the group.<br> -->
Everything in CSS that creates a [=stacking context=] must be considered an <a href="#isolatedgroups">‘isolated’ group</a>. HTML elements themselves should not create groups.
An element that has blending applied, must blend with all the underlying content of the [=stacking context=] that that element belongs to.
The root element for an HTML document is the <a href="https://dom.spec.whatwg.org/#document-element">document element</a>.
<h3 id="csscompositingrules_SVG">Behavior specific to SVG</h3>
By default, every element must create a <a href="#isolatedgroups">non-isolated group</a>.
<!-- SVG has the following <a href="https://www.w3.org/TR/SVG11/render.html#Introduction">compositing model</a>: first any filter effect is applied, then any clipping, masking, blending and compositing -->
However, certain operations in SVG will create <a href="#isolatedgroups">isolated groups</a>. If one of the following features is used, the group must become isolated:
<ul>
<li>opacity</li>
<li>filters</li>
<li>3D transforms (2D transforms must NOT cause isolation)</li>
<li>blending</li>
<li>masking</li>
</ul>
The root element for SVG is the <a href="https://www.w3.org/TR/SVG11/struct.html#NewDocument">SVG element</a>.
<h3 id="csskeywords">CSS Properties</h3>
<h4 id="mix-blend-mode">The 'mix-blend-mode' property</h4>
The blend mode defines the formula that must be used to mix the colors with the backdrop.
This behavior is described in more detail in <a href="#blending">Blending</a>.
<pre class='propdef'>
Name: mix-blend-mode
Value: <<blend-mode>> | <a>plus-lighter</a>
Initial: normal
Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
Inherited: no
Percentages: N/A
Computed value: as specified
Media: visual
Animation type: discrete
</pre>
The syntax of the property of <<blend-mode>> is given with:
<pre class="blendmode prod">
<dfn id="ltblendmodegt">&lt;blend-mode></dfn> =
<a value>normal</a> |
<a value>darken</a> | <a value>multiply</a> | <a value>color-burn</a> |
<a value>lighten</a> | <a value>screen</a> | <a value>color-dodge</a> |
<a value>overlay</a> | <a value>soft-light</a> | <a value>hard-light</a> |
<a value>difference</a> | <a value>exclusion</a> |
<a value>hue</a> | <a value>saturation</a> | <a value>color</a> | <a value>luminosity</a>
</pre>
Note: Applying a blendmode other than <a value>normal</a> to the element must establish a new [=stacking context=]. This group must then be blended and composited with the [=stacking context=] that contains the element.
<div class="example">
Given the following sample markup:
<pre>
&lt;body>
&lt;img src="ducky.png"/>
&lt;/body>
</pre>
And the following style rule:
<pre>
body { background-color: lime; }
</pre>
... will produce the following result:
<div class="figure">
<img alt="example of an image of duck with the lime color of the document" src="examples/ducky_normal.png" width="489" height="537" style="width:30%">
<p class="caption">
Partially transparent image on a lime backdrop.
</p>
</div>
If we change the style rule to include blending:
<pre>
body { background-color: lime; }
img { mix-blend-mode: multiply; }
</pre>
... the output will be the image blending with the lime background of the <a element>body</a> element.
<div class="figure">
<img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_multiply.png" width="489" height="537" style="width:30%">
<p class="caption">
Blending of a transparent image on a lime backdrop.
</p>
</div>
</div>
<div class="example">
Given the following svg code:
<pre>
<!-- -->&lt;svg>
<!-- --> &lt;circle cx="40" cy="40" r="40" fill="red"/>
<!-- --> &lt;circle cx="80" cy="40" r="40" fill="lime"/>
<!-- --> &lt;circle cx="60" cy="80" r="40" fill="blue"/>
<!-- -->&lt;/svg>
</pre>
And the following style rule:
<pre>
circle { mix-blend-mode: screen; }
</pre>
... the output will be blending of the 3 circles. Each circle is rendered from bottom to top. Where the elements overlap, the blend mode produces a change in color.
<div class="figure">
<img alt="example of 3 circles blending with a screen blend mode" src="examples/screen_example.svg" width="233" height="233" style="width:30%">
<p class="caption">
Example of 3 circles blending with a screen blend mode.
</p>
</div>
</div>
<div class="example">
In the following style sheet and document fragment:
<pre>
body { background-color: lime; }
div { background-color: red; width: 200px; opacity: .95}
img { mix-blend-mode: difference; }
<!-- -->&lt;body>
<!-- --> &lt;div>
<!-- --> &lt;img src="ducky.png"/>
<!-- --> &lt;/div>
<!-- -->&lt;/body>
</pre>
... the 'opacity' on the &lt;div> element is causing the creation of a stacking context. This causes the creation of a new group so the image doesn't blend with the color of the <a element>body</a>.
<div class="figure">
<img alt="example of an image of duck blending with the lime color of the document" src="examples/ducky_difference.png" width="489" height="537" style="width:30%">
<p class="caption">
Example of blending within a stacking context.
</p>
</div>
Note how the image is not blending with the lime color.
</div>
<div class="example">
Given the following sample markup:
<pre>
&lt;body>
&lt;div>
&lt;p>''overlay'' blending on text&lt;/p>
&lt;/div>
&lt;/body>
</pre>
And the following style rule:
<pre>
div { background-image: url('texture.png'); }
@font-face {
font-family: "Mythos Std";
src: url("http://myfontvendor.com/mythos.otf");
}
p {
mix-blend-mode: overlay;
font-family: "Mythos Std"
}
</pre>
<div class="figure">
<img alt="example of text that has an overlay blend on top of a texture" src="examples/overlay_text.png" width="510" height="295" style="width:75%">
<p class="caption">
Text with a blend overlay on top of an image.
</p>
</div>
</div>
<h4 id="isolation">The 'isolation' property</h4>
In SVG, this defines whether an element is isolated or not.<br>
For CSS, setting 'isolation' to ''isolation/isolate'' will turn the element into a stacking context.
By default, elements use the ''isolation/auto'' keyword which implies that they are not isolated. However operations that cause the creation of [=stacking context=] must cause a group to be isolated. These operations are described in <a href="#csscompositingrules_CSS">'behavior specific to HTML'</a> and <a href="#csscompositingrules_SVG">'behavior specific to SVG'</a>.
<pre class='propdef'>
Name: isolation
Value: <<isolation-mode>>
Initial: auto
Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
Inherited: no
Percentages: N/A
Computed value: as specified
Media: visual
Animation type: discrete
</pre>
The syntax of the property of <<isolation-mode>> is given with:
<pre class="isolated prod"><dfn id="isolated-propid">&lt;isolation-mode></dfn> = auto | isolate</pre>
<p id="img_isolation">
In CSS, a background image or the content of an <a element>img</a> must always be rendered into an isolated group.<br>For instance, if you link to an SVG file through the <a element>img</a> tag, the artwork of that SVG will not blend with the backdrop of the content.
In SVG, 'mask' always creates an isolated group.
<h4 id="background-blend-mode">The 'background-blend-mode' property</h4>
Defines the blending mode of each background layer.
Each background layer must blend with the element's background layer that is below it and the element's background color. Background layers must not blend with the content that is behind the element, instead they must act as if they are rendered into an isolated group.
The description of the 'background-blend-mode' property is as follows:
<pre class='propdef'>
Name: background-blend-mode
Value: <<'mix-blend-mode'>>#
Initial: normal
Applies to: All HTML elements
Inherited: no
Percentages: N/A
Computed value: as specified
Media: visual
Animation type: discrete
</pre>
The 'background-blend-mode' list must be applied in the same order as 'background-image' [[!CSS3BG]]. This means that the first element in the list will apply to the layer that is on top. If a property doesn't have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
If the 'background' [[!CSS3BG]] shorthand is used, the 'background-blend-mode'
property for that element must be reset to its initial value.
<div class="example">
Given the following sample markup:
<pre>
<!-- -->&lt;body>
<!-- --> &lt;div>&lt;/div>
<!-- -->&lt;/body>
</pre>
And the following style rule:
<pre>
body { background-color: lime; }
div {
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, #000000 0%,#ffffff 100%), url('ducky.png');
background-blend-mode: difference, normal;
}
</pre>
<div class="figure">
<img alt="example of div that has an image of a duck and a gradient that is blending" src="examples/ducky_background_blend.png" width="504" height="576" style="width:30%">
<p class="caption">
Blending of 2 background images.
</p>
</div>
Note that the gradient is not blending with the color of <a element>body</a>. Instead it retains its original color.
</div>
<h2 id="canvascompositingandblending">Specifying Compositing and Blending in Canvas 2D</h2>
The <a href="https://html.spec.whatwg.org/multipage/canvas.html#2dcontext">canvas 2d</a> context defines the {{globalCompositeOperation}} attribute that is used to set the current compositing and blending operator.
This property takes the following value:
<div class="propdef">
<dl>
<dt id='propdef-mix'><span class='propdef-title prop-name'>‘globalCompositeOperation’</span></dt>
<dd>
<table class="propinfo">
<tbody>
<tr>
<td><em>Value:</em>  </td>
<td> <<blend-mode>> | <<composite-mode>> </td>
</tr>
<tr>
<td><em>Initial:</em>  </td>
<td>source-over</td>
</tr>
</tbody>
</table>
</dd>
</dl>
</div>
The syntax of the property of <<composite-mode>> is given with:
<pre class="compositemode prod"><dfn id="compositemode">&lt;composite-mode></dfn> = <a>clear</a> | <a>copy</a> | <a>source-over</a> | <a>destination-over</a> | <a>source-in</a> | <br><a>destination-in</a> | <a>source-out</a> | <a>destination-out</a> | <a>source-atop</a> | <br><a>destination-atop</a> | <a>xor</a> | <a>lighter</a> | <a>plus-darker</a> | <a>plus-lighter</a></pre>
<h2 id="whatiscompositing">Introduction to compositing</h2>
Compositing is the combining of a graphic element with its backdrop.
<!--
The figure below, gives a basic example of compositing. The graphic element is overlaid on top of the backdrop to produce a composite image.
Where the graphic element is opaque, it obscures the backdrop and where the graphic element is partially transparent, some of the backdrop can be seen through.
-->
In the model described in this specification there are two steps to the overall compositing operation - <a href="#advancedcompositing">Porter-Duff compositing</a> and <a href="#blending">blending</a>.
<!--Porter Duff compositing takes into account the overall shape of the graphic element and its opacity, as well as the opacity and shape of the backdrop, and
determines where the backdrop is visible, where the graphic element is visible and where one is visible through the other.-->
The blending step determines how the colors from the graphic element and the backdrop interact.
Typically, the blending step is performed first, followed by the Porter-Duff compositing step.
In the blending step, the resultant color from the mix of the element and the the <a>backdrop</a> is calculated. The graphic element's color is replaced with this resultant color.
The graphic element is then composited with the <a>backdrop</a> using the specified compositing operator.
Note: Shape is defined by the mathematical description of the shape. A particular point is either inside the shape or it is not. There are no gradations.
Note: Opacity is described using an alpha value, stored alongside the color value for each particular point. The alpha value is between 0 and 1, inclusive.
A value of 0 means that the pixel has no coverage at that point, and is therefore
transparent; i.e. there is no color contribution from any geometry because the geometry does not overlap this pixel. A value of 1 means that the pixel is fully opaque; the geometry completely overlaps the pixel.
<h3 id="simplealphacompositing">Simple alpha compositing</h3>
The formula for simple alpha compositing is
<pre>
co = Cs x αs + Cb x αb x (1 - αs)
</pre>
Where
<ul>
<li>co: the premultiplied pixel value after compositing
<li>Cs: the color value of the source graphic element being composited
<li>αs: the alpha value of the source graphic element being composited
<li>Cb: the color value of the <a>backdrop</a>
<li>αb: the alpha value of the <a>backdrop</a>
</ul>
Note: All values are between 0 and 1 inclusive.
The pixel value after compositing (co) is given by adding the contributions from the source graphic element [Cs x αs] and the backdrop [Cb x αb x (1 - αs)].
For both the graphic element and the backdrop, the color values are multiplied by the alpha to determine the amount of color that contributes.
With zero alpha meaning that the color does not contribute and partial alpha means that some percentage of the color contributes.
The contribution of the backdrop is further reduced based on the opacity of the graphic element.
Conceptually, (1 - αs) of the backdrop shows through the graphic element, meaning that if the graphic element is fully opaque (αs=1) then no backdrop shows through.
The simple alpha compositing formula listed above gives a resultant color which is the result of the
weighted average of the backdrop color and graphic element color, with the weighting determined by the backdrop and
graphic element alphas.
The resultant alpha value of the composite is simply the sum of the contributed alpha of the composited elements.
The formula for the resultant alpha of the composite is
<pre>
αo = αs + αb x (1 - αs)
</pre>
Where
<ul>
<li>αo: the alpha value of the composite
<li>αs: the alpha value of the graphic element being composited
<li>αb: the alpha value of the <a>backdrop</a>
</ul>
<div class="note">
Often, it can be more efficient 10BC8 to store a <code>pre-multiplied value</code> for the color and opacity.
The pre-multiplied value is given by
<pre>
cs = Cs x αs
</pre>
with
<ul>
<li>cs: the pre-multiplied value
<li>Cs: the color value
<li>αs: the alpha value
</ul>
Thus the formula for simple alpha compositing using pre-multiplied values becomes
<pre>
co = cs + cb x (1 - αs)
</pre>
To extract the color component of a pre-multiplied value, the formula is reversed:
<pre>
Co = co / αo
</pre>
</div>
<h4 id="simplealphacompositingexamples">Examples of simple alpha compositing</h4>
<div class="example">
<div class="figure">
<img src="examples/simple_box.svg" width="267" height="137" alt="Simple box showing alpha compositing">
</div>
This describes the most basic case. It consists of 1 shape that is filled with a solid color (α = 1).
The shape is composited with an empty background. The empty background has no effect on the resultant composite.
<pre>
Cs = RGB(1,0,0)
αs = 1
Cb = RGB(0,0,0)
αb = 0
co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(1,0,0) x 1 + RGB(0,0,0) x 0 x (1 - 1)
co = RGB(1,0,0) x 1
co = RGB(1,0,0)
</pre>
</div>
<div class="example">
<div class="figure">
<img src="examples/two_box.svg" width="295" height="243" alt="simple shape">
</div>
This is a more complex example. There is no transparency, but the 2 shapes intersect.
Applying the compositing formula in the area of intersection, gives:
<pre>
Cs = RGB(0,0,1)
αs = 1
Cb = RGB(1,0,0)
αb = 1
co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x (1 - 1)
co = RGB(0,0,1) x 1 + RGB(1,0,0) x 1 x 0
co = RGB(0,0,1) x 1
co = RGB(0,0,1)
</pre>
Calculating the alpha of the resultant composite
<pre>
αo = αs + αb x (1 - αs)
αo = 1 + 1 x (1 - 1)
αo = 1
</pre>
Calculating the color component of the resultant composite
<pre>
Co = co / αo
Co = RGB(0, 0, 1) / 1
Co = RGB(0, 0, 1)
</pre>
</div>
<div class="example">
<div class="figure">
<img src="examples/two_box_transparency.svg" width="279" height="233" alt="interaction of a solid box with a transparent box on top">
</div>
This is an example where the shape has some transparency, but the <a>backdrop</a> is fully opaque.
Applying the compositing formula in the area of intersection, gives:
<pre>
Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 1
co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 1 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5
co = RGB(0.5,0,0.5)
</pre>
Calculating the alpha of the resultant composite
<pre>
αo = αs + αb x (1 - αs)
αo = 0.5 + 1 x (1 - 0.5)
αo = 1
</pre>
Calculating the color component of the resultant composite
<pre>
Co = co / αo
Co = RGB(0.5, 0, 0.5) / 1
Co = RGB(0.5, 0, 0.5)
</pre>
</div>
<div class="example">
<div class="figure">
<img src="examples/two_box_transparency_both.svg" width="279" height="233" alt="interaction of 2 transparent boxes">
</div>
Figure 4 shows an example where both the shape and the <a>backdrop</a> are transparent.
Applying the compositing formula in the area of intersection, gives:
<pre>
Cs = RGB(0,0,1)
αs = 0.5
Cb = RGB(1,0,0)
αb = 0.5
co = Cs x αs + Cb x αb x (1 - αs)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.5 x (1 - 0.5)
co = RGB(0,0,1) x 0.5 + RGB(1,0,0) x 0.25
co = RGB(0.25, 0, 0.5)
</pre>
Calculating the alpha of the resultant composite
<pre>
αo = αs + αb x (1 - αs)
αo = 0.5 + 0.5 x (1 - 0.5)
αo = 0.75
</pre>
Calculating the color component of the resultant composite
<pre>
Co = co / αo
Co = RGB(0.25, 0, 0.5) / 0.75
Co = RGB(0.33, 0, 0.66)
</pre>
</div>
<h2 id="generalformula">General Formula for Compositing and Blending</h2>
The general formula for compositing and blending which allows for selection of the compositing operator and blending function comprises two steps.
The terms used in these functions will be described in detail in the following sections.
Apply the blend in place
<pre>
Cs = (1 - αb) x Cs + αb x B(Cb, Cs)
</pre>
Composite
<pre>
Co = αs x Fa x Cs + αb x Fb x Cb
</pre>
Where:
<ul>
<li><strong>Cs</strong>: is the source color
<li><strong>Cb</strong>: is the backdrop color
<li><strong>αs</strong>: is the source alpha
<li><strong>αb</strong>: is the backdrop alpha
<li><strong>B(Cb, Cs)</strong>: is the mixing function
<li><strong>Fa</strong>: is defined by the Porter Duff operator in use
<li><strong>Fb</strong>: is defined by the Porter Duff operator in use
</ul>
<h2 id="backdropCalc">Backdrop calculation</h2>
The <dfn export>backdrop</dfn> is the content behind the element and is what the element is composited with.
This means that the backdrop is the result of compositing all previous elements.
<h3 id="backdropexamples">Examples of backdrop calculation</h3>
<div class="example">
<div class="figure">
<img src="examples/simple_backdrop.svg" width="279" height="233" alt="example of a simple backdrop calculation">
</div>
This example has 2 simple shapes. The backdrop for the blue shape includes the bottom right corner of the red shape .
The dotted line shows the area that is examined during compositing of the blue shape.
</div>
<div class="example">
<div class="figure">
<img src="examples/simple_backdrop_alpha.svg" width="279" height="233" alt="example of a backdrop with alpha">
</div>
The shape in the backdrop has an alpha value. The alpha value of the backdrop shape is preserved when the backdrop is calculated.
</div>
<h2 id="groups">Compositing Groups</h2>
Compositing groups allow more control over the interaction of compositing with the backdrop. Groups can be used to specify how a compositing effect
within a group will interact with the content that is already in the scene (the backdrop).
Compositing groups may be made up of any number of elements, and may contain other compositing groups.
The default properties of a compositing group shall cause no visual difference compared to having no group. See <a href="#groupinvariance">Group Invariance</a>.
A compositing group is rendered by first compositing the elements of the group onto the initial backdrop. The result of this is a single element containing
color and alpha information. This element is then composited onto the group backdrop.
Steps shall be taken to ensure the group backdrop makes only a single contribution to the final composite.
<dl>
<dt id="initialbackdrop">initial backdrop</dt>
<dd>
The initial backdrop is the backdrop used for compositing the group's first element. This will be the same as the group backdrop in a non-isolated
group, or a fully transparent backdrop for an isolated group.
</dd>
<dt id="groupbackdrop">group backdrop</dt>
<dd>
The group backdrop is the result of compositing all elements up to but not including the first element in the group.
</dd>
</dl>
<h3 id="groupinvariance">Group invariance</h3>
An important property of simple alpha compositing is its group invariance. This behavior is preserved in the more complex model described in this specification.
Adding or removing grouping with default attributes shall not show visual differences.
<pre>so: A + B + C = A + (B + C) = (A + B) + C</pre>
When adding attributes to the group such as <!--'knockout', --> ''isolation/isolate'', blending modes other than ''normal'' or Porter Duff compositing operators other than ''source-over'', groups may no longer be invariant.
<h3 id="isolatedgroups">Isolated Groups</h3>
In an isolated group, the initial backdrop shall be black and fully transparent.
In this instance, the initial backdrop is different than the group backdrop. The only interaction with the group backdrop shall occur when the group's
computed color, shape and alpha are composited with it.
See '<a href="#groupcompositing">Isolated groups and Porter Duff modes</a>' for a description of the effect of isolated groups on compositing.
See '<a href="#isolationblending">Effect of group isolation on blending</a>' for a description of the effect of isolated groups on blending.
<!--
<h3 id="knockoutgroups">Knockout Groups</h3>
In a knockout group, each individual element shall be composited with the initial backdrop rather than with the stack of preceding elements in the group.
When calculating the <a>backdrop</a> for an element inside a knockout group, the elements of the group are ignored. Instead, only the elements that are behind the knockout group are included in the backdrop.
<div class="example">
<img src="examples/knockout.png" alt="example of a knockout group">
< 8 /div>
</div>
The above example demonstrates two versions of a group containing three squares (red, green, blue) that are 50% opaque. The group is composited over a grey striped background.<br>
On the left, the group has the 'knock-out' property activated. On the right, the group has the 'knock-out' property disabled'.<br>
If the 'knock-out' property is disabled, each element within the group is only composited with the elements underneath the group.
-->
<h3 id="pagebackdrop">The Root Element Group</h3>
The <a href="#isolatedgroups">isolated group</a> for the root element is the
root element group. All other elements and groups are composited into this group. The background of the root element (if specified) is painted into the
root element group, and any filter, clip-path, mask and and opacity is then
applied, before compositing into the <a href="#rootgroup">root group</a>,
if present.
<h3 id="rootgroup">The Root Group</h3>
The root group encompasses the entire canvas and contains (or is below) the root element group of the root element of a web page.
<p class="note">Browsers often use an infinite <a href="https://www.w3.org/TR/css-color-4/#sample">white, 100% opaque</a> root group,
for final compositing, but this is not required.
<h2 id="advancedcompositing">Advanced compositing features</h2>
<a href="#simplealphacompositing">Simple alpha compositing</a> uses the [=source-over=] Porter Duff compositing operator. <!-- Additional compositing operators exist and may be specified with the <a href="#propdef-mix-composite">mix-composite property</a>.
The additional compositing operators allow for more complex interactions between the shapes of elements being composited. The compositing operators are described in the <a href="#porterduffcompositingoperators">Porter Duff compositing operators</a>.
The operators that applies to an element or group is selected using the <a href="#propdef-mix-composite">mix-composite</a> property.-->
Porter Duff compositing is based on a model of a pixel in which two shapes (source and destination) may contribute to the final color of the pixel. The pixel is divided into 4 sub-pixel regions and each region represents a possible combination of source and destination. [[PORTERDUFF]]
The four regions are:
<dl>
<dt>Source Only</dt><dd>Where only the source contributes to the pixel color</dd>
<dt>Destination only</dt><dd>where only the destination contributes to the pixel color</dd>
<dt>Both</dt><dd>Source and Destination – where both the source and destination may combine to define the pixel color</dd>
<dt>None</dt><dd>No source or Destination – where neither make a contribution to the final pixel color</dd>
</dl>
Note: Destination is synonymous with backdrop. The term destination is used in this section as this is considered the standard when working with Porter Duff compositing. Additionally, the compositing operators use ''destination'' in their names.
<div class="figure">
<img src="examples/PD_regions.svg" width="280" height="280" alt="overview of the regions affected by porter duff">
</div>
The contribution from each region to the final pixel color is defined by the coverage of the shape at that pixel, and the operator in use.
Coverage is specified in terms of alpha. Full alpha (1) implies full coverage, while zero alpha (0) implies no coverage.
This means that the area of each region within the sub-pixel is dependent on the coverage of each shape contributing to the pixel.
The area of each region can be calculated with the following equations:
<div class="data">
<table>
<tr>
<th>Both</th>
<th>αs x αb</th>
</tr>
<tr>
<th>Source only</th>
<th>αs x (1 – αb)</th>
</tr>
<tr>
<th>Destination only</th>
<th>αb x (1 – αs)</th>
</tr>
<tr>
<th>None</th>
<th>(1 – αs) x (1 – αb)</th>
</tr>
</table>
</div>
The figure above represents coverage of 0.5 for both source and destination.
<pre>
Both = 0.5 x 0.5 = 0.25
Source Only = 0.5 (1 – 0.5) = 0.25
Destination Only = 0.5(1 – 0.5) = 0.25
None = (1 – 0.5)(1 – 0.5) = 0.25
</pre>
Therefore, the coverage of each region is 0.25 in this example.
<h3 id="porterduffcompositingoperators">The Porter Duff Compositing Operators</h3>
The landmark paper 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.
There are 12 basic Porter Duff operators, satisfying all possible combinations of source and destination.
From the geometric representation of each operator, the contribution of each shape can be seen to be expressed as a fraction of the total coverage of the output.
For example, in source over, the possible contribution of source is full (1) and the possible contribution of destination is whatever is remaining (1 – αs). This is modified by the coverage of source and destination to give the equation for the final coverage of the pixel:
<pre>
αo = αs x 1 + αb x (1 – αs)
</pre>
The fractional terms Fa (1 in this example) and Fb (1 – αs in this example) are defined for each operator and specify the fraction of the shapes that may contribute to the final pixel value.
The general form of the equation for coverage is:
<pre>
αs x Fa + αb x Fb
</pre>
and incorporating color gives the general Porter Duff equation
<pre>
co = αs x Fa x Cs + αb x Fb x Cb
</pre>
Where:
<ul>
<li>co is the output color pre-multiplied with the output alpha [0 <= co <= 1]
<li>αs is the coverage of the source Fa is defined by the operator and controls inclusion of the source Cs is the color of the source (not multiplied by alpha)
<li>αb is the coverage of the destination Fb is defined by the operator and controls inclusion of the destination Cb is the color of the destination (not multiplied by alpha)
</ul>
<h4 id="porterduffcompositingoperators_clear">Clear</h4>
With the <dfn>clear</dfn> compositing operator, no regions are enabled.
<div class="figure">
<img src="examples/PD_clr.svg" width="400" height="140" alt="example of porter duff clear">
</div>
<pre>
Fa = 0; Fb = 0
co = 0
αo = 0
</pre>
<h4 id="porterduffcompositingoperators_src">Copy</h4>
With the <dfn>copy</dfn> compositing operator, only the source will be present.
<div class="figure">
<img src="examples/PD_src.svg" width="400" height="140" alt="example of porter duff copy">
</div>
<pre>
Fa = 1; Fb = 0
co = αs x Cs
αo = αs
</pre>
<h4 id="porterduffcompositingoperators_dst">Destination</h4>
With the <dfn>destination</dfn> compositing operator, only the destination will be present.
<div class="figure">
<img src="examples/PD_dst.svg" width="400" height="140" alt="example of porter duff destination">
</div>
<pre>
Fa = 0; Fb = 1
co = αb x Cb
αo = αb
</pre>
<h4 id="porterduffcompositingoperators_srcover">Source Over</h4>
With the <dfn>source-over</dfn> compositing operator, the source is placed over the destination.
<div class="figure">
<img src="examples/PD_src-over.svg" width="400" height="140" alt="example of porter duff source over">
</div>
<pre>
Fa = 1; Fb = 1 – αs
co = αs x Cs + αb x Cb x (1 – αs)
αo = αs + αb x (1 – αs)
</pre>
<h4 id="porterduffcompositingoperators_dstover">Destination Over</h4>
With the <dfn>destination-over</dfn> compositing operator, Destination is placed over the source.
<div class="figure">
<img src="examples/PD_dst-over.svg" width="400" height="140" alt="example of porter duff destination over">
</div>
<pre>
Fa = 1 – αb; Fb = 1
co = αs x Cs x (1 – αb) + αb x Cb
αo = αs x (1 – αb) + αb
</pre>
<h4 id="porterduffcompositingoperators_srcin">Source In</h4>
With the <dfn>source-in</dfn> compositing operator, the parts of the source that overlap with the desitnation are placed.
<div class="figure">
<img src="examples/PD_src-in.svg" width="400" height="140" alt="example of porter duff source in">
</div>
<pre>
Fa = αb; Fb = 0
co = αs x Cs x αb
αo = αs x αb
</pre>
<h4 id="porterduffcompositingoperators_dstin">Destination In</h4>
With the <dfn>destination-in</dfn> compositing operator, the parts of the destination that overlap with the source are placed.
<div class="figure">
<img src="examples/PD_dst-in.svg" width="400" height="140" alt="example of porter duff destination in ">
</div>
<pre>
Fa = 0; Fb = αs
co = αb x Cb x αs
αo = αb x αs
</pre>
<h4 id="porterduffcompositingoperators_srcout">Source Out</h4>
With the <dfn>source-out</dfn> compositing operator, the parts of the source that fall outside of the destination are placed.
<div class="figure">
<img src="examples/PD_src-out.svg" width="400" height="140" alt="example of porter duff source out">
</div>
<pre>
Fa = 1 – αb; Fb = 0
co = αs x Cs x (1 – αb)
αo = αs x (1 – αb)
</pre>
<h4 id="porterduffcompositingoperators_dstout">Destination Out</h4>
With the <dfn>destination-out</dfn> compositing operator, the parts of the destination that fall outside of the source are placed.
<div class="figure">
<img src="examples/PD_dst-out.svg" width="400" height="140" alt="example of porter duff destination out">
</div>
<pre>
Fa = 0; Fb = 1 – αs
co = αb x Cb x (1 – αs)
αo = αb x (1 – αs)
</pre>
<h4 id="porterduffcompositingoperators_srcatop">Source Atop</h4>
With the <dfn>source-atop</dfn> compositing operator, the parts of the source which overlap the destination replace the destination. The destination is placed everywhere else.
<div class="figure">
<img src="examples/PD_src-atop.svg" width="400" height="140" alt="example of porter duff source atop">
</div>
<pre>
Fa = αb; Fb = 1 – αs
co = αs x Cs x αb + αb x Cb x (1 – αs)
αo = αs x αb + αb x (1 – αs)
</pre>
<h4 id="porterduffcompositingoperators_dstatop">Destination Atop</h4>
With the <dfn>destination-atop</dfn> compositing operator, the parts of the destination which overlaps the source replace the source. The source is placed everywhere else.
<div class="figure">
<img src="examples/PD_dst-atop.svg" width="400" height="140" alt="example of porter duff destination atop">
</div>
<pre>
Fa = 1 - αb; Fb = αs
co = αs x Cs x (1 - αb) + αb x Cb x αs
αo = αs x (1 - αb) + αb x αs
</pre>
<h4 id="porterduffcompositingoperators_xor">XOR</h4>
With the <dfn>xor</dfn> compositing operator, the non-overlapping regions of source and destination are combined.
<div class="figure">
<img src="examples/PD_xor.svg" width="400" height="140" alt="example of porter duff xor">
View remainder of file in raw view