1. 序論
~INFORMATIVEこの文書の前半部分では、~CSSにおける組成-法を制御するための各種~propについて述べる。 後半部分では、~Porter-Duff組成-法, および混色-法の,~algoについて述べる。 ◎ 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.
2. この文書を読むにあたって
他から指定されない限り、この文書の各~節は規範的とする。 ◎ Each section of this document is normative unless otherwise specified.
2.1. ~module間の相互作用
この仕様は、一連の~CSS~propを定義する。 それらは,それらが適用される要素の視覚的な描画に影響する。 これらの効果は、要素が `CSS21$r による`視覚整形~model$に則って~sizeされ, 位置された後に,適用される。 これらの~propの一部の値による結果,`包含塊$や`積層文脈$が作成される場合がある。 ◎ 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 Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.
`background-blend-mode$p ~propは、 `CSS3BG$r にて定義される~propを基に,築かれている。 ◎ The background-blend-mode property also builds upon the properties defined in the CSS Backgrounds and Borders module [CSS3BG].
この仕様は、 `SVG11$r にて指定される 単純~alpha組成-法 と `CSS3COLOR$r による 単純~alpha組成-法 の規則も強化する。 ◎ This specification also enhances the rules as specified in Section 14.2 Simple alpha compositing of [SVG11] and simple alpha compositing of [CSS3COLOR].
この~moduleは、 `globalCompositeOperation$m 属性も拡張する。 ◎ This module also extends the globalCompositeOperation attribute.
2.2. 値
【 この節の内容は CSS 日本語訳 共通~page に委譲 】
3. ~CSSにおける混色-法の指定-法
3.1. ~graphic演算の順序
組成~modelは `~SVG組成~model$ `SVG11$r に従わ~MUST: ~filterがあれば,まずそれを適用してから、~clip法, ~mask法, 混色-法, 組成-法を順に適用する。 ◎ The compositing model must follow the SVG compositing model [SVG11]: first any filter effect is applied, then any clipping, masking, blending and compositing.
3.2. ~HTMLに特有の挙動
~CSSにおける,`積層文脈$を作成するもの 【参考】 すべては、`隔離d~group$と見なされ~MUST。 ~HTML要素~自身は、~groupを作成するべきでない。 ◎ Everything in CSS that creates a stacking context must be considered an ‘isolated’ group. HTML elements themselves should not create groups.
混色-法が適用されている要素は、その要素が属する`積層文脈$ `CSS21$r の,下層の内容すべてと伴に混色され~MUST。 ◎ An element that has blending applied, must blend with all the underlying content of the stacking context [CSS21] that that element belongs to.
3.3. ~SVGに特有の挙動
既定では、どの要素も,非 `隔離d~group$を作成し~MUST。 ◎ By default, every element must create a non-isolated group.
しかしながら,~SVGの一定の演算では、`隔離d~group$が作成されることになる。 次のいずれかの特色機能が利用されている場合、その~groupは,隔離され~MUST: ◎ However, certain operations in SVG will create isolated groups. If one of the following features is used, the group must become isolated:
- 不透明度 ◎ opacity
- ~filter ◎ filters
- 3D 変形-( `transforms^en, 座標系変換) ( 2D 変形-は、隔離を生じさせては~MUST_NOT)。 【元々の SVG 1.1 仕様は, 3D 変形-を~supportしていないが、CSS Transform Level 2 仕様により拡張されている。】 ◎ 3D transforms (2D transforms must NOT cause isolation)
- 混色-法 ◎ blending
- ~mask法 ◎ masking
3.4. 各種~CSS~prop
3.4.1. `mix-blend-mode^p ~prop
混色-~modeは、色を後景に混合する際に利用され~MUST公式を定義する。 この挙動は、`混色-法$secの節にて詳細に述べる。 ◎ 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 Blending.
◎名 `mix-blend-mode@p ◎値 `blend-mode$t ◎初 `normal$v ◎適 すべての要素。 ~SVGにおいては、 `~container要素$, `~graphics要素$, `~graphicsを参照する要素$。 `SVG11$r ◎ All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11] ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終`blend-mode$t 値型の構文は次で与えられる: ◎ The syntax of the property of <blend-mode> is given with:
`blend-mode@t = `normal$v | `multiply$v | `screen$v | `overlay$v | `darken$v | `lighten$v | `color-dodge$v | `color-burn$v | `hard-light$v | `soft-light$v | `difference$v | `exclusion$v | `hue$v | `saturation$v | `color$v | `luminosity$v
注記: `normal$v 以外の混色-~modeが要素に適用されるときは、新たな`積層文脈$ `CSS21$r が確立され~MUST。 この~groupは、その要素を包含する`積層文脈$ と伴に混色され, 組成され~MUST。 ◎ Note: Applying a blendmode other than normal to the element must establish a new stacking context [CSS21]. This group must then be blended and composited with the stacking context that contains the element.
次の~markupと~style規則が与えられたなら: ◎ Given the following sample markup:
<body> <img src="ducky.png"/> </body>
◎ And the following style rule:
body { background-color: lime; }
次の結果が生産されることになる: ◎ ... will produce the following result:
~style規則を,混色-法も含めて変更したとするとき: ◎ If we change the style rule to include blending:
body { background-color: lime; } img { `mix-blend-mode$p: `multiply$v; }
`body$e 要素の黄緑色 背景と混色された画像が出力されることになる。 ◎ ... the output will be the image blending with the lime background of the <body> element.
次の~SVG~codeと~style規則が与えられたなら: ◎ Given the following svg code:
<svg> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lime"/> <circle cx="60" cy="80" r="40" fill="blue"/> </svg>
◎ And the following style rule:
circle { `mix-blend-mode$p: `screen$v; }
3個の円が混色されて出力される。 各 円は,奥から前面にかけて描画され、要素が重合する所では,混色-~modeにより色が変化する。 ◎ ... 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.
次の~stylesheetと文書片において: ◎ In the following style sheet and document fragment:
body { background-color: lime; } div { background-color: red; width: 200px; opacity: .95} img { `mix-blend-mode$p: `difference$v; }
<body> <div> <img src="ducky.png"/> </div> </body>
`div^e 要素~上の `opacity$p は、新たな`積層文脈$を作成する。 これにより,新たな~groupが作成され、画像は `body$e の色とは混色されなくなる。 ◎ ... the opacity on the <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 <body>.
画像が黄緑色とは混色されなくなる様子に注意。 ◎ Note how the image is not blending with the lime color.
次の~markupと~style規則が与えられたなら: ◎ Given the following sample markup:
<body> <div> <p>`overlay$v blending on text</p> </div> </body>
◎ And the following style rule:
div { background-image: url('texture.png'); } @font-face { font-family: "Mythos Std"; src: url("http://myfontvendor.com/mythos.otf"); } p { `mix-blend-mode$p: `overlay$v; font-family: "Mythos Std" }
3.4.2. `isolation^p ~prop
~SVGにおいては、これは,要素が隔離されるかどうかを定める。 ~CSSにおいては、 `isolation$p の値を `isolate^v にすることは,要素を`積層文脈$にすることを意味する。 ◎ In SVG, this defines whether an element is isolated or not. For CSS, setting isolation to isolate will turn the element into a stacking context.
要素に対する `isolation$p の既定の値は,隔離されないことを含意する `auto^v をとる。 しかしながら,積層文脈 `CSS21$r を作成させるような演算については、~groupは隔離され~MUST。 これらの演算については、 ~HTMLに特有の挙動 と ~SVGに特有の挙動 にて述べる。 ◎ By default, elements use the auto keyword which implies that they are not isolated. However operations that cause the creation of stacking context [CSS21] must cause a group to be isolated. These operations are described in 'behavior specific to HTML' and 'behavior specific to SVG'.
◎名 `isolation@p ◎値 `isolation-mode$t ◎初 `auto^v ◎適 すべての要素。 ~SVGにおいては、 `~container要素$, `~graphics要素$, `~graphicsを参照する要素$。 `SVG11$r ◎ All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11] ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終`isolation-mode$t 値型の構文は次で与えられる: ◎ The syntax of the property of <isolation-mode> is given with:
`isolation-mode@t = `auto^v | `isolate^v
~CSSにおいては、背景 画像や `img$e の内容は、常に,`隔離d~group$の中に描画され~MUST。 例えば, `img$e ~tagを通して~SVG~fileへ~linkを張っている場合、~SVGの絵図は,内容の後景とは混色されないことになる。 ◎ In CSS, a background image or the content of an img must always be rendered into an isolated group. For instance, if you link to an SVG file through the img tag, the artwork of that SVG will not blend with the backdrop of the content.
~SVGにおける `mask$p は、常に,`隔離d~group$を作成する。 ◎ In SVG, mask always creates an isolated group.
3.4.3. `background-blend-mode^p ~prop
各 背景~層†の混色-~modeを定義する。 ◎ Defines the blending mode of each background layer.
【† `background$p ~propにより指定される(画像などによる)背景 】
各 背景~層は、[ その層より下の層にある[ 要素の他の背景~層 ]と要素の背景~色 ]と混色され~MUST。 背景~層は、要素の背後にある内容と混色されては~MUST_NOT。 代わりに,`隔離d~group$の中に描画されているかのように動作し~MUST。 ◎ 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.
`background-blend-mode$p ~propの記述は次に従う: ◎ The description of the background-blend-mode property is as follows:
◎名 `background-blend-mode@p ◎値 `blend-mode$t# ◎初 `normal$v ◎適 すべての~HTML要素 ◎ All HTML elements ◎継 されない ◎百 受容しない ◎算 指定値 ◎順 文法に従う ◎ア 不可 ◎表終`background-blend-mode$p ~listは、 `background-image$p `CSS3BG$r と同じ順序で適用され~MUST。 すなわち、~listの最初の要素が、現在の前面~層に適用されることになる。 ~propに与えられた~comma区切りの値の個数が,層~数に満たない場合、 UA は,~listの値を必要なだけ繰り返して, その使用値を計算し~MUST。 ◎ 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.
`background$p 略式~prop `CSS3BG$r が利用されたときには、当の要素に対する `background-blend-mode$p ~propは,その初期値に再設定され~MUST。 ◎ If the background [CSS3BG] shorthand is used, the background-blend-mode property for that element must be reset to its initial value.
次の~markupと~style規則が与えられたなら: ◎ Given the following sample markup:
<body> <div></div> </body>
◎ And the following style rule:
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$p: difference, normal; }
~gradient( `linear-gradient^v )は、 `body$e の色とは混色されないことに注意。 それは元の色を維持する。 ◎ Note that the gradient is not blending with the color of body. Instead it retains its original color.
【 この~code例の ducky.png と~gradientの順序は逆であろう(~gradientの方が前面になっている)。 この混色-~modeでは、結果は同じになるが。 】
4. Canvas 2D における組成-法と混色-法の指定-法
`~canvas2d$ 文脈は、 `globalCompositeOperation$m 属性を定義する — それは、現在の[ 組成-法, 混色-法 ]の演算子を設定する。 ◎ The canvas 2d context defines the globalCompositeOperation attribute that is used to set the current compositing and blending operator.
この~propは次の値をとる: ◎ This property takes the following value:
◎名 `globalCompositeOperation$m ◎値 `blend-mode$t | `composite-mode$t ◎初 `source-over$v ◎表終`composite-mode$t 値型の構文は次で与えられる: ◎ The syntax of the property of <composite-mode> is given with:
`composite-mode@t = `clear$v | `copy$v | `source-over$v | `destination-over$v | `source-in$v | `destination-in$v | `source-out$v | `destination-out$v | `source-atop$v | `destination-atop$v | `xor$v | `lighter$v
5. 組成-法 — 序論
組成-法( `compositing^en )が、~graphic要素を,その後景に組合わす方法を成す。 ◎ Compositing is the combining of a graphic element with its backdrop.
この仕様に述べる~modelにおける組成~演算は、 2 つの手続き `混色-法$secと`~Porter-Duff組成-法$sec からなる。 混色~段は、~graphic要素の色と後景の色とが,どう相互作用するかを決定する。 ◎ In the model described in this specification there are two steps to the overall compositing operation - Porter-Duff compositing and blending. The blending step determines how the colors from the graphic element and the backdrop interact.
概して、混色~段が先に遂行され,~Porter-Duff組成~段が後続する。 混色~段においては、要素と`後景$を混合した結果の色が計算される。 ~graphic要素の色は、この結果の色に置換される。 それから、~graphic要素は,指定された組成~演算子を用いて`後景$に組成される。 ◎ 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 backdrop is calculated. The graphic element’s color is replaced with this resultant color. The graphic element is then composited with the backdrop using the specified compositing operator.
注記: 図形は、数学的な記述により定義される。 個々の地点は、図形の内側に入るか入らないかのいずれかになる。 中間段階は無い。 ◎ 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.
注記: ~alpha値で表される不透明度は、それぞれの地点ごとに色~値と伴に格納される。 ~alpha値の範囲は 0 〜 1 の閉区間である。 値 0 は、図形のその地点に対する画素の被覆率が~zeroであり,透明であることを意味する。 すなわち、幾何的にその地点の画素に重合しないので,その地点の色への寄与分が無いことを意味する。 値 1 は、画素が全-不透明であり,形状が画素~全体に重合することを意味する。 ◎ 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.
5.1. 単純~alpha組成-法
単純~alpha組成-法の公式は,次で与えられる: ◎ The formula for simple alpha compositing is
%co = %Cs × %αs + %Cb × %αb × ( 1 − %αs )
各種~変数は: ◎ Where
%co | 組成-後の,乗算済み画素 値 ◎ co: the premultiplied pixel value after compositing |
---|---|
%Cs | 組成される~source~graphic要素(以下,単に “~source” と記す)の色~値 ◎ Cs: the color value of the source graphic element being composited |
%αs | ~sourceの~alpha値 ◎ αs: the alpha value of the source graphic element being composited |
%Cb | `後景$の色~値 ◎ Cb: the color value of the backdrop |
%αb | `後景$の~alpha値 ◎ αb: the alpha value of the backdrop |
注記: すべての値は 0 〜 1 の閉区間に入る。 ◎ Note: All values are between 0 and 1 inclusive.
【 明示的に言及されていないので,解り難くなっているが、単純~alpha組成-法は, 組成-法の序論 の冒頭に述べた一般の場合において、混色~段が自明なものにされ(結果は,~sourceの色そのまま),~Porter-Duff組成-法が `source-over$v にされた、特殊な場合になる。 すなわち、この節に示されている単純~alpha組成~公式の中の %Cs は,`混色-法$secの結果をそのまま表している。 】
組成-後の画素 値( %co )は、~sourceからの寄与分 [ %Cs × %αs ] と, 後景からの寄与分 [ %Cb × %αb × ( 1 − %αs ) ] を加算して与えられる。 色の寄与分を決定するため、~sourceも後景も、その色~値が,それぞれの~alphaで乗算される。 ~alpha ~zeroは,色の寄与分がないことを意味し、部分的な~alphaは,その割合の色が寄与することを意味する。 後景の寄与分は、~sourceの不透明度に基づいて更に減量される: 概念的には、後景のうち [ 1 − %αs ] の割合が~sourceを透過することを意味する — すなわち、~sourceが全-不透明( %αs = 1 )ならば,後景は透過しなくなる。 ◎ 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.
上に挙げられた単純~alpha組成~公式は、[ 後景と~source ]の色を,それぞれの~alphaによる重みで加重平均をとって得られる色を与える。 結果の組成~alpha値は、単純に,組成される一連の要素が寄与する~alphaの合計になる。 結果の組成~alphaの公式は: ◎ 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
%αo = %αs + %αb × ( 1 − %αs )
◎ Where
%αo | 組成~alpha値 ◎ αo: the alpha value of the composite |
---|---|
%αs | ~sourceの~alpha値 ◎ αs: the alpha value of the graphic element being composited |
%αb | `後景$の~alpha値 ◎ αb: the alpha value of the backdrop |
色と不透明度は、乗算済みの値を格納した方がより効率的になることが多い。 乗算済みの値は,次で与えられる: ◎ Often, it can be more efficient to store a pre-multiplied value for the color and opacity. The pre-multiplied value is given by
%cs = %Cs × %αs
◎ with
%cs | 乗算済みの値 ◎ cs: the pre-multiplied value |
---|---|
%Cs | 色~値 ◎ Cs: the color value |
%αs | ~alpha値 ◎ αs: the alpha value |
したがって,乗算済みの値を用いる単純~alpha組成~公式は次の様になる: ◎ Thus the formula for simple alpha compositing using pre-multiplied values becomes
%co = %cs + %cb × ( 1 − %αs )
非 乗算済みでない色~成分は、乗算済みの値から,公式を逆算して得られる: ◎ To extract the color component of a pre-multiplied value, the formula is reversed:
%Co = %co ÷ %αo
5.1.1. 単純~alpha組成-法の例
ここでは,最も基本的な事例を述べる。 単色( α = 1 )で埋められた 1 個の図形からなる。 図形は、空の背景に組成される。 空の背景は、組成した結果に効果を持たない。 ◎ 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.
%Cs = RGB(1, 0, 0) %αs = 1 %Cb = RGB(0, 0, 0) %αb = 0 %co = %Cs × %αs + %Cb × %αb × ( 1 − %αs ) = RGB(1, 0, 0) × 1 + RGB(0, 0, 0) × 0 × ( 1 − 1 ) = RGB(1, 0, 0)
次は,より複雑な例。 透明度は無いが、2 個の図形が交差している。 ◎ 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:
%Cs = RGB(0, 0, 1) %αs = 1 %Cb = RGB(1, 0, 0) %αb = 1 %co = %Cs × %αs + %Cb × %αb × ( 1 − %αs ) = RGB(0, 0, 1) × 1 + RGB(1, 0, 0) × 1 × ( 1 − 1 ) = RGB(0, 0, 1)
組成した結果の~alphaを計算する: ◎ Calculating the alpha of the resultant composite
%αo = %αs + %αb × ( 1 − %αs ) = 1 + 1 × ( 1 − 1 ) = 1
組成した結果の色~成分を計算する: ◎ Calculating the color component of the resultant composite
%Co = %co ÷ %αo = RGB(0, 0, 1) ÷ 1 = RGB(0, 0, 1)
図形には透明度があるが,`後景$は全-不透明。 ◎ This is an example where the shape has some transparency, but the backdrop is fully opaque.
交差域に組成~公式を適用すると: ◎ Applying the compositing formula in the area of intersection, gives:
%Cs = RGB(0, 0, 1) %αs = 0.5 %Cb = RGB(1, 0, 0) %αb = 1 %co = %Cs × %αs + %Cb × %αb × ( 1 − %αs ) = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 1 × ( 1 − 0.5 ) = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 0.5 = RGB(0.5, 0, 0.5)
組成した結果の~alphaを計算する: ◎ Calculating the alpha of the resultant composite
%αo = %αs + %αb × ( 1 − %αs ) = 0.5 + 1 × ( 1 − 0.5 ) = 1
組成した結果の色~成分を計算する: ◎ Calculating the color component of the resultant composite
%Co = %co ÷ %αo = RGB(0.5, 0, 0.5) ÷ 1 = RGB(0.5, 0, 0.5)
図形と`後景$の両者とも透明な例:
◎ Figure 4 shows an example where both the shape and the backdrop are transparent.
交差域に組成~公式を適用すると: ◎ Applying the compositing formula in the area of intersection, gives:
%Cs = RGB(0, 0, 1) %αs = 0.5 %Cb = RGB(1, 0, 0) %αb = 0.5 %co = %Cs × %αs + %Cb × %αb × ( 1 − %αs ) = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 0.5 × ( 1 − 0.5 ) = RGB(0, 0, 1) × 0.5 + RGB(1, 0, 0) × 0.25 = RGB(0.25, 0, 0.5)
組成した結果の~alphaを計算する: ◎ Calculating the alpha of the resultant composite
%αo = %αs + %αb × ( 1 − %αs ) = 0.5 + 0.5 × ( 1 − 0.5 ) = 0.75
組成した結果の色~成分を計算する: ◎ Calculating the color component of the resultant composite
%Co = %co ÷ %αo = RGB(0.25, 0, 0.5) ÷ 0.75 = RGB(0.33, 0, 0.66)
6. 組成と混色の一般~公式
組成と混色~用の一般~公式は、この 2 つの手続きにおいて,組成~演算子と混色~関数を選択できるようにする。 これらの関数の中で利用される項についての詳細は、次~節にて述べる。 ◎ 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
%Cs = ( 1 − %αb ) × %Cs + %αb × B( %Cb, %Cs )
組成-時に適用される公式: ◎ Composite
%Co = %αs × %Fs × %Cs + %αb × %Fb × %Cb
◎ Where:
%Cs | ~source色 ◎ Cs: is the source color |
---|---|
%Cb | 後景~色 ◎ Cb: is the backdrop color |
%αs | ~source~alpha ◎ αs: is the source alpha |
%αb | 後景~alpha ◎ αb: is the backdrop alpha |
B( %Cb, %Cs ) | 混合~関数 ◎ B(Cb, Cs): is the mixing function |
%Fs, %Fb | 利用する~Porter-Duff演算子にて定義される ◎ Fa: is defined by the Porter Duff operator in use ◎ Fb: is defined by the Porter Duff operator in use |
【 %Fs は,原文では %Fa と表記されているが、添字の対応関係が不規則で明快さに欠くので,この訳では %Fs と表記する。 】
7. 後景の計算
`後景@ ( `backdrop^en )とは、要素の背後にある内容であり,要素の組成-先( `destination^en )になる。 これは、後景が,以前のすべての要素の組成による結果であることを意味する。 ◎ The backdrop 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.
【 後景 — 背景( `background^en )と語感が似るが,処理~modelにおける取り扱いが異なる — 背景は “要素の一部” を成し,組成-元( ~source )になる。 】
7.1. 後景の計算~例
この例には 2 個の単純な図形がある。 青色の図形に対する後景は、赤色 図形の右下隅の部分を含んでいる。 点線は、青色 図形を組成する際に調べられる区域を示す。 ◎ 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.
後景の中の図形は~alpha値を持つ。 この後景の図形の~alpha値は,後景が計算される間 保全される。 ◎ The shape in the backdrop has an alpha value. The alpha value of the backdrop shape is preserved when the backdrop is calculated.
8. 組成~group
組成~group( `compositing group^en )により、後景と組成するときの相互作用をもっと制御できるようになる。 ~groupを利用すれば、~groupの中で組成した効果と, すでに~sceneにある内容(後景)とがどう相互作用するかを指定できる。 ◎ 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).
組成~groupは、任意~個数の要素からなり得る。 また、他の組成~groupを包含し得る。 ◎ Compositing groups may be made up of any number of elements, and may contain other compositing groups.
既定の~propを伴う組成~groupは、~group化されないときと視覚的な相違が生じては~MUST_NOT。 `~group不変則$secを見よ。 ◎ The default properties of a compositing group shall cause no visual difference compared to having no group. See Group Invariance.
組成~groupの描画-時には、まず,要素たちが成す~groupが`初期~後景$上に組成される。 その結果は、[ 色, ~alpha ]情報を包含する単独の要素になる。 次に,この要素が`~group後景$上に組成される。 この手続きは、[ 結果の`~group後景$が,最終的な組成-結果【後続の組成-演算】に寄与する単独の部分を成す ]ことを確保するように行われ~MUST。 ◎ 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.
各~groupには、次が定義される: ◎ ↓
- `初期~後景@
- ~groupの最初の要素を組成するときに利用される後景。 これは、~groupが[ `隔離d~group$でないならば `~group後景$ / `隔離d~group$ならば 全-透明な後景 ]と同じになる。 ◎ 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.
- `~group後景@
- [ ~groupの最初の要素の直前までの,すべての要素 ]を組成した結果。 ◎ The group backdrop is the result of compositing all elements up to but not including the first element in the group.
8.1. ~group不変則
`単純~alpha組成-法$secの重要な性質として、その演算が,~group不変則【結合法則】†を満たすことが挙げられる。 この挙動は、この仕様の中で述べるより複雑な~modelにおいても保全される。 既定の属性により ~group分けが追加されたり, 除去されても、視覚的な相違が示されては~MUST_NOT(次の式の "+" は組成~演算を表す): ◎ 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.
`source-over^v: A + B + C = A + (B + C) = (A + B) + C
【† “~group不変則( `group invariance^en )” — どのように “~group分け” しても結果は “不変” 。 すなわち、組成~演算が `結合法則^_ を満たすことを意味する( 参考 )。
この不変則は、~groupに次に挙げるいずれかの属性が追加された場合,満たされなくなり得る ⇒# 隔離【 `isolation$p: `isolate^v 】, `normal$v 以外の混色-~mode【 `mix-blend-mode$p 】, `source-over$v 以外の~Porter-Duff組成~演算子 ◎ When adding attributes to the group such as isolate, blending modes other than normal or Porter Duff compositing operators other than source-over, groups may no longer be invariant.
【 この仕様に現れる語 “(組成)~group” とは、組成~演算の結合順序を表現するための概念と捉えられる。 例えば、層 A 上に層 B, C, D を順に組成することを考える。 このとき、組成~演算を記号 + で表すならば、組成した結果を得る過程には:
- ((A + B) + C) + D
- A + (B + (C + D))
- A + ((B + C) + D)
その他,種々の方法があり、演算が結合法則を満たさなければ,結果は異なり得る。 そのため、式の括弧をどのように与えるかを定義する必要があり、それが “~group” と呼ばれているものにあたる。 】
8.2. 隔離d~group
隔離d~group( `isolated group^en )における`初期~後景$は、全-透明な黒色にされ~MUST。 ◎ In an isolated group, the initial backdrop shall be black and fully transparent.
この場合の`初期~後景$は、`~group後景$と異なる。 `~group後景$との相互作用が生じるのは、~groupに算出された[ 色, 図形, ~alpha ]が 後景と組成されるときに限られ~MUST。 ◎ 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.
組成-法における`隔離d~group$の効果については、 隔離d~groupと各種~Porter-Duff~mode を見よ。 混色-法における`隔離d~group$の効果については、 `~group隔離による混色-法に対する効果$sec を見よ。 ◎ See ‘Isolated groups and Porter Duff modes’ for a description of the effect of isolated groups on compositing. See ‘Effect of group isolation on blending’ for a description of the effect of isolated groups on blending.
8.3. ~page~group
~page~groupが,~top-levelの~groupである。 他のすべての要素と~groupは、この~groupの中に組成される。 ~page~groupは`隔離d~group$である。 ◎ The top level group is the page group. All other elements and groups are composited into this group. The page group is an isolated group.
~page~groupは、不透明度 100% の白色による後景~色と組成される ◎ The page group is composited with a backdrop color of white with 100% opacity.
9. 高度な組成-法を与える特色機能
`単純~alpha組成-法$secは、 `source-over$v ~Porter-Duff組成~演算子を利用する。 ◎ Simple alpha compositing uses the source-over Porter Duff compositing operator.
~Porter-Duff組成-法は、画素 【概念的な微小域】 の最終的な色に寄与し得る,その画素の中の 2 つの図形( `source^en と `destination^en 【組成-元と組成-先 — 後者は長いので以下 “~dest” と略記する】 )による~modelに基づく。 画素は、4 つの部分画素の区分に分割される。 各 区分は,~sourceと~destの可能な組合せを表現する。 `PORTERDUFF$r ◎ 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]
4つの区分とは: ◎ The four regions are:
- ~sourceのみ
- ~sourceのみが画素~色に寄与する区分 ◎ Where only the source contributes to the pixel color
- ~destのみ
- ~destのみが画素~色に寄与する区分 ◎ where only the destination contributes to the pixel color
- 両者の組合せ
- 画素~色が~sourceと~destの両者による組合せから定義され得る区分。 ◎ Source and Destination – where both the source and destination may combine to define the pixel color
- なし
- ~sourceも~destも最終的な画素~色に寄与しない区分。 ◎ No source or Destination – where neither make a contribution to the final pixel color
注記:
~destは、後景の同義語である。
この節で利用される語~dest( `destination^en )は、~Porter-Duff組成-法について述べるときの標準の語と見なされる。
加えて、組成~演算子の名前には destination
が利用される。
◎
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.
各 区分からの最終的な画素~色への寄与分は、その画素における図形の被覆率と, 利用する演算子により定義される。 被覆率は、~alpha( α )を通して指定される — α = 1 は全て覆うことに対応し, α = 0 は全く覆わないことに対応する。 すなわち、画素の各 区分の面積は,画素に寄与している各 図形の被覆率に依存する。 各 区分の面積は、 【画素の面積を 1 として】 次の等式により計算できる: ◎ 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:
区分 | 被覆率 | 計算例( %αs = 0.6, %αb = 0.4 ) |
---|---|---|
両者の組合せ | %αs × %αb | 0.6 × 0.4 = 0.24 |
~sourceのみ | %αs × ( 1 − %αb ) | 0.6 × ( 1 − 0.4 ) = 0.36 |
~destのみ | %αb × ( 1 − %αs ) | 0.4 × ( 1 − 0.6 ) = 0.16 |
なし | ( 1 − %αs ) × ( 1 − %αb ) | ( 1 − 0.6 ) × ( 1 − 0.4 ) = 0.24 |
The figure above represents coverage of 0.5 for both source and destination.
Both = 0.5 × 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
Therefore, the coverage of each region is 0.25 in this example.
【 上の図式, および以下の節で述べる各種 演算子にて示される図式は、 1 画素の被覆率としても,あるいは図に示された通りの(不透明な) 2 枚の~graphic(全高または全幅が全体に渡る長方形)の重合として捉えることもできる(上の図の “両者の組合せ” の色は仮の色であり,演算子に依存する)。 前者の捉え方をより忠実に反映させるため、この訳では,原文の図式を改変している。 】
9.1. ~Porter-Duff組成~演算子
組成-法の代数は、 Lucasfilm で仕事をしていた `Thomas Porter^en と `Tom Duff^en による画期的な論文にて定義され、 12 個の “~Porter-Duff” 演算子が開発された。 これらの演算子は、[[ ~alpha, あるいは画素 被覆率 ][ ~channel/値 ]を持つ~graphic的~obj ]の重合から形成される,4つの部分画素 区分における混合の結果を制御する。 演算子には、4つの区分による実用的な組合せすべてが利用されている。 ◎ 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.
12 個の基本的な~Porter-Duff演算子は、~sourceと~destの可能な組合せすべてを網羅する。 ◎ There are 12 basic Porter Duff operators, satisfying all possible combinations of source and destination.
各 演算子を幾何的に表現するなら、各 図形からの寄与分は,出力に対する図形の合計の被覆率として捉えられる。 例えば, `source-over$v においては、~sourceが寄与し得る割合分は 全体( 1.0 )であり, ~destの寄与し得る割合分は 残る ( 1 − %αs ) になる。 これには、画素の最終的な被覆率~用の等式を与えるため,~sourceと~destの被覆率により改変される。 ◎ 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:
%αo = %αs × 1 + %αb × ( 1 − %αs )
それぞれの演算子は、割合分 %Fs (この例では 1 )と %Fb (この例では 1 − %αs )を定義し,最終的な画素 値に寄与し得る 図形の被覆率を指定する。 被覆率~用の等式の一般~形は: ◎ 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:
%αs × %Fs + %αb × %Fb
色も組入れられた一般の~Porter-Duff等式は: ◎ and incorporating color gives the general Porter Duff equation
%co = %αs × %Fs × %Cs + %αb × %Fb × %Cb
◎ Where:
%co | 出力~alphaにより乗算済みにされた,出力 色( 0 ≤ %co ≤ 1 )。 ◎ co is the output color pre-multiplied with the output alpha [0 <= co <= 1] |
---|---|
%Fs | 演算子により定義され、(~alphaにより乗算されていない)~source色 %Cs の含有率を制御する。 %αs は~source %Fs の被覆率を与える。 ◎ α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) |
%Fb | 演算子により定義され、(~alphaにより乗算されていない)~dest色 %Cb の含有率を制御する。 %αb は~dest %Fb の被覆率を与える。 ◎ α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) |
9.1.1. `clear^v
どの区分も,結果に現れない。 ◎ No regions are enabled.
~source | ~dest | 結果 |
%Fs = 0 ; %Fb = 0 %co = 0 %αo = 0
9.1.2. `copy^v
~sourceのみが,結果に現れる。 ◎ Only the source will be present.
~source | ~dest | 結果 |
---|---|---|
%Fs = 1 ; %Fb = 0 %co = %αs × %Cs %αo = %αs
9.1.3. `destination^v
~destのみが,結果に現れる。 ◎ Only the destination will be present.
~source | ~dest | 結果 |
---|---|---|
%Fs = 0 ; %Fb = 1 %co = %αb × %Cb %αo = %αb
9.1.4. `source-over^v
~destの上に~sourceを置いたものが,結果に現れる。 ◎ Source is placed over the destination.
~source | ~dest | 結果 |
---|---|---|
%Fs = 1 ; %Fb = 1 − %αs %co = %αs × %Cs + %αb × %Cb × ( 1 − %αs ) %αo = %αs + %αb × ( 1 − %αs )
9.1.5. `destination-over^v
~sourceの上に~destが置いたものが,結果に現れる。 ◎ Destination is placed over the source.
~source | ~dest | 結果 |
---|---|---|
%Fs = 1 − %αb ; %Fb = 1 %co = %αs × %Cs × ( 1 − %αb ) + %αb × %Cb %αo = %αs × ( 1 − %αb ) + %αb
9.1.6. `source-in^v
~sourceの中の~destに重合する部分のみが,結果に現れる。 ◎ The source that overlaps the destination, replaces the destination.
~source | ~dest | 結果 |
---|---|---|
%Fs = %αb ; %Fb = 0 %co = %αs × %Cs × %αb %αo = %αs × %αb
9.1.7. `destination-in^v
~destの中の~sourceに重合する部分のみが,結果に現れる。 ◎ Destination which overlaps the source, replaces the source.
~source | ~dest | 結果 |
---|---|---|
%Fs = 0 ; %Fb = %αs %co = %αb × %Cb × %αs %αo = %αb × %αs
9.1.8. `source-out^v
~sourceの中の~destに重合しない部分のみが,結果に現れる。 ◎ Source is placed, where it falls outside of the destination.
~source | ~dest | 結果 |
---|---|---|
%Fs = 1 − %αb ; %Fb = 0 %co = %αs × %Cs × ( 1 − %αb ) %αo = %αs × ( 1 − %αb )
9.1.9. `destination-out^v
~destの中の~sourceに重合しない部分のみが,結果に現れる。 ◎ Destination is placed, where it falls outside of the source.
~source | ~dest | 結果 |
---|---|---|
%Fs = 0 ; %Fb = 1 − %αs %co = %αb × %Cb × ( 1 − %αs ) %αo = %αb × ( 1 − %αs )
9.1.10. `source-atop^v
~sourceの中の~destに重合する部分と, ~destの他の部分が,結果に現れる。 ◎ Source which overlaps the destination, replaces the destination. Destination is placed elsewhere.
~source | ~dest | 結果 |
---|---|---|
%Fs = %αb ; %Fb = 1 − %αs %co = %αs × %Cs × %αb + %αb × %Cb × ( 1 − %αs ) %αo = %αs × %αb + %αb × ( 1 − %αs )
9.1.11. `destination-atop^v
~destの中の~sourceに重合する部分と, ~sourceの他の部分が,結果に現れる。 ◎ Destination which overlaps the source replaces the source. Source is placed elsewhere.
~source | ~dest | 結果 |
---|---|---|
%Fs = 1 − %αb ; %Fb = %αs %co = %αs × %Cs × ( 1 − %αb ) + %αb × %Cb × %αs %αo = %αs × ( 1 − %αb ) + %αb × %αs
9.1.12. `xor^v
~sourceと~destの重合しない部分が 組合わされて,結果に現れる。 ◎ The non-overlapping regions of source and destination are combined.
~source | ~dest | 結果 |
---|---|---|
%Fs = 1 − %αb ; %Fb = 1 − %αs %co = %αs × %Cs × ( 1 − %αb ) + %αb × %Cb × ( 1 − %αs ) %αo = %αs × ( 1 − %αb ) + %αb × ( 1 − %αs )
9.1.13. `lighter^v
~sourceと~destの和が,結果に現れる。 ~Porter-Duff論文 `PORTERDUFF$r では, “plus” 演算子として定義されている。 ◎ Display the sum of the source image and destination image. It is defined in the Porter Duff paper as the plus operator [PORTERDUFF].
%Fs = 1 ; %Fb = 1 %co = %αs × %Cs + %αb × %Cb ; %αo = %αs + %αb
9.2. 各種~Porter-Duff~modeによる~group組成-法の挙動
`隔離d~group$の中の要素を組成するとき、要素が組成される`初期~後景$は,透明な黒色にされる。 ~groupの中の最も奥側の要素が,後景に依存する~Porter-Duff組成~演算子 — `destination$v, `source-in$v, `destination-in$v, `destination-out$v, `source-atop$v など — を利用している場合、組成した結果は空になる。 ~group内の後続の要素は、最初に組成した結果に組成される。 ◎ When compositing the elements within an isolated group, the elements are composited over a transparent black initial backdrop. If the bottom element in the group uses a Porter Duff compositing operator which is dependent on the backdrop, such as destination, source-in, destination-in, destination-out or source-atop, then the result of the composite will be empty. Subsequent elements within the group are composited with the result of the first composite.
10. 混色-法
混色-法( `blending^en )は、組成-法の[ ~source要素と`後景$とが重合する所における色の混合 ]を計算する側面を成す。 概念的には、~source要素の色が 後景と混色された上で、結果の,色が改変された ~source要素が 後景に組成される。 実施においては,これは一~段にまとめて遂行されるのが通例である。 混色~計算では、乗算済み色~値が利用されては~MUST_NOT。 ◎ Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap. Conceptually, the colors in the source element are blended in place with the backdrop. After blending, the modified source element is composited with the backdrop. In practice, this is usually all performed in one step. The blending calculations must not use pre-multiplied color values.
【 すなわち,以下に見られるように、混色の本質的な部分を成す混色~関数 B() には,~alpha(不透明度)は関わらない。 】
“混合” の公式は、次で定義される: ◎ The "mixing" formula is defined as:
%Cm = B( %Cb, %Cs )
◎ with:
%Cm | 混色した結果の色 ◎ Cm: the result color after blending |
---|---|
B | 混色を行う公式 ◎ B: the formula that does the blending |
%Cb | `後景$色 ◎ Cb: the backdrop color |
%Cs | ~source色 ◎ Cs: the source color |
混色~公式の結果は、色の範囲の最小/最大~値で切詰められ~MUST。 ◎ The result of the mixing formula must be clamped to the minimum and maximum values of the color range.
混合~関数の結果は、後景~alphaにより調整される。 後景が全-不透明ならば、混合~関数の結果がそのまま表示に現れる。 後景に透明度がある場合、最終的な結果は,後景~alphaで制御される重みによる, ~source色と, 混合された色との加重平均になる。 すなわち、結果の色~値は次の様になる: ◎ The result of the mixing function is modulated by the backdrop alpha. A fully opaque backdrop allows the mixing function to be fully realized. A transparent backdrop will cause the final result to be a weighted average between the source color and mixed color with the weight controlled by the backdrop alpha. The value of the new color becomes:
%Cr = ( 1 − %αb ) × %Cs + %αb × B( %Cb, %Cs )
◎ with:
%Cr | 結果の色 ◎ Cr: the result color |
---|---|
B | 混色を行う公式 ◎ B: the formula that does the blending |
%Cs | ~source色 ◎ Cs: the source color |
%Cb | `後景$色 ◎ Cb: the backdrop color |
%αb | `後景$~alpha ◎ αb: the backdrop alpha |
注記: ~sourceと後景が交差する区域における色~値は,次の公式で与えられ、指定された~Porter-Duff組成~公式により組成される。 単純~alpha混色~用の公式は次の様になる: ◎ Note: The following formula gives the color value in the area where the source and backdrop intersects and then composites with the specified Porter Duff compositing formula. For simple alpha blending, the formula thus becomes:
`単純~alpha組成-法$secの公式: ◎ simple alpha compositing:
%co = %cs + %cb × ( 1 − %αs )
乗算済みでない値による公式は: ◎ written as non-premultiplied:
%αo × %Co = %αs × %Cs + ( 1 − %αs ) × %αb × %Cb
%Cs を[ 混色した結果【 上述の %Cr 】 ]に置き換えた【一般の混色-~modeの場合の】結果は: ◎ now substitute the result of blending for Cs:
%αo × %Co = %αs × (( 1 − %αb ) × %Cs + %αb × B( %Cb, %Cs )) + ( 1 − %αs ) × %αb × %Cb = %αs × ( 1 − %αb ) × %Cs + %αs × %αb × B( %Cb, %Cs ) + ( 1 − %αs ) × %αb × %Cb
10.1. 成分別の混色-~mode
結果の各 色~成分が,`後景$と~sourceの対応する色~成分のみから決定される場合 — すなわち,混色~公式が,対応する成分ごとに別々に適用される場合 — その混色-~modeを,成分別と呼ぶ。 ◎ 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 mixing formula is applied separately to each set of corresponding components.
以下に挙げる各種 混色-~modeは、混色~公式 B( %Cb, %Cs ) を,各 色~成分ごとに適用することになる。 簡単にするため、この節のすべての例では, `source-over$v 組成-法を利用する。 ◎ Each of the following blend modes will apply the blending function B(Cb, Cs) on each of the color components. For simplicity, all the examples in this chapter use source-over compositing.
`mix-demo^dgm10.1.1. `normal^v 混色-~mode
これが、混色しないことを指定する,既定の値である。 混色~公式は、単純に~source色を選択する。 ◎ This is the default attribute which specifies no blending. The blending formula simply selects the source color.
B( %Cb, %Cs ) = %Cs
10.1.2. `multiply^v 混色-~mode
~source色と~dest色を乗算する。 ◎ The source color is multiplied by the destination color and replaces the destination.
結果の色は、どの場所でも,~sourceか~destの暗い方 以下の暗さになる。 どの色も,黒色と `multiply$v した結果は、黒色になる。 どの色も,白色と `multiply$v した結果は、元の色のままになる。 ◎ 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 × %Cs
10.1.3. `screen^v 混色-~mode
`後景$色の補色と~source色の補色を乗算した結果の補色をとる。 【補色 — 明度も反転された補色】 ◎ Multiplies the complements of the backdrop and source color values, then complements the result.
結果の色は、どの場所でも,~sourceか~destの明るい方 以上の明るさになる。 どの色も,白色と `screen$v した結果は白色になる。 どの色も,黒色と `screen$v した結果は元の色のままになる。 その効果は、複数のスライド写真を同じ screen 上に同時に投影したときと同様になる。 ◎ 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 ) × ( 1 − %Cs ) = %Cb + %Cs − ( %Cb × %Cs )
10.1.4. `overlay^v 混色-~mode
`後景$の色~値に依存して, `multiply$v するか または `screen$v する ◎ Multiplies or screens the colors, depending on the backdrop color value.
~source色を,その光輝と陰影を保全しつつ, `後景$に overlay する。 `後景$色は置換されないが、`後景$の明度または暗度が反映されるように,~source色と混合される。 ◎ 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$v は、 `hard-light$v 混色-~modeの反転である。 その公式については, `hard-light$v の定義を見よ。 ◎ Overlay is the inverse of the hard-light blend mode. See the definition of hard-light for the formula.
10.1.5. `darken^v 混色-~mode
`後景$と~source色のより暗い方を選択する。 ◎ Selects the darker of the backdrop and source colors.
`後景$は、~sourceがより暗い所では~sourceに置換され,他所では不変なままにされる。 ◎ The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged.
B( %Cb, %Cs ) = min( %Cb, %Cs )
10.1.6. `lighten^v 混色-~mode
`後景$と~source色の,より明るい方を選択する。 ◎ Selects the lighter of the backdrop and source colors.
`後景$は、~sourceがより明るい所では~sourceに置換され,他所では不変なままにされる。 ◎ The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.
B( %Cb, %Cs ) = max( %Cb, %Cs )
注記: 結果が 【色の】 範囲を超過する所では,切り下げられ~MUST。 ◎ Note: The result must be rounded down if it exceeds the range.
10.1.7. `color-dodge^v 混色-~mode
~source色を反映するように,`後景$色を輝かせる。 黒色による塗りでは,何も変わらない。 ◎ Brightens the backdrop color to reflect the source color. Painting with black produces no changes.
if( %Cb == 0) B( %Cb, %Cs ) = 0 else if( %Cs == 1) B( %Cb, %Cs ) = 1 else B( %Cb, %Cs ) = min( 1, %Cb ÷ ( 1 − %Cs ))
10.1.8. `color-burn^v 混色-~mode
~source色を反映するように`後景$色を暗くさせる。 白色による塗りでは,何も変わらない。 ◎ Darkens the backdrop color to reflect the source color. Painting with white produces no change.
if( %Cb == 1) B( %Cb, %Cs ) = 1 else if( %Cs == 0) B( %Cb, %Cs ) = 0 else B( %Cb, %Cs ) = 1 − min( 1, ( 1 − %Cb ) ÷ %Cs )
10.1.9. `hard-light^v 混色-~mode
~source色~値に依存して,色を乗算するか または `screen$v する。 その効果は、`後景$上に~spotlightをきつく照らしたときと同様になる。 ◎ Multiplies 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 × %Cs ) else B( %Cb, %Cs ) = Screen( %Cb, 2 × %Cs − 1)
公式については `multiply$v と `screen$v の定義を見よ。 ◎ See the definition of multiply and screen for their formulas.
10.1.10. `soft-light^v 混色-~mode
~source色~値に依存して,色を暗くさせるか明るくさせる。 その効果は、`後景$上に拡散~spotlightを照らしたときと同様になる。 ◎ Darkens 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 × %Cs ) × %Cb × ( 1 − %Cb ) else B( %Cb, %Cs ) = %Cb + ( 2 × %Cs − 1 ) × ( D( %Cb ) − %Cb ) ここで if( %Cb ≤ 0.25) D( %Cb ) = (( 16 × %Cb − 12 ) × %Cb + 4 ) × %Cb else D( %Cb ) = sqrt( %Cb )
10.1.11. `difference^v 混色-~mode
2 つの色の,より明るい方の色からより暗い方の色を減算する。 ◎ Subtracts 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 ) = abs( %Cb − %Cs )
10.1.12. `exclusion^v 混色-~mode
`difference$v ~modeと同様の効果を生産するが、~contrastは弱くなる。 白色による塗りでは,`後景$色を反転させる。 黒色による塗りでは,何も変わらない。 ◎ Produces 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 × %Cb × %Cs
10.2. 成分別でない混色-~mode
成分別でない混色-~modeでは、成分ごとに個別に扱わずに,すべての色~成分の組合せを考慮する。 これらすべての混色-~modeは、概念的には,次の手続きを要する: ◎ Nonseparable blend modes consider all color components in combination as opposed to the separable ones that look at each component individually. All of these blend modes conceptually entail the following steps:
- `後景$と~source色を,混色~用の色~空間から中間処理~用の[ 色相, 彩度, 光度 ]( `hue-saturation-luminosity^en )による表現に変換する。 ◎ Convert the backdrop and source colors from the blending color space to an intermediate hue-saturation-luminosity representation.
- `後景$と~sourceの色から選択される[ 色相, 彩度, 光度 ]成分の何らかの組合せを基に,新たな色を作る。 ◎ Create a new color from some combination of hue, saturation, and luminosity components selected from the backdrop and source colors.
- その結果を逆~変換して元の色~空間に戻す。 ◎ Convert the result back to the original color space.
成分別でない混色-~modeの公式では、いくつかの補助~関数を用いる: ◎ The nonseparable blend mode formulas make use of several auxiliary functions:
Lum( %C ) { return 0.3 × %C.red + 0.59 × %C.green + 0.11 × %C.blue } Max( %C ) { return max( %C.red, %C.green, %C.blue ) } Min( %C ) { return min( %C.red, %C.green, %C.blue ) } ClipColor( %C ) { %L = Lum( %C ) %max = Max( %C ) %min = Min( %C ) if( %min < 0 ) { %C.red = %L + ( %C.red − %L ) × %L ÷ ( %L − %min ) %C.green = %L + ( %C.green − %L ) × %L ÷ ( %L − %min ) %C.blue = %L + ( %C.blue − %L ) × %L ÷ ( %L − %min ) } if( %max > 1 ) { %C.red = %L + ( %C.red − %L ) × ( 1 − %L ) ÷ ( %max − %L ) %C.green = %L + ( %C.green − %L ) × ( 1 − %L ) ÷ ( %max − %L ) %C.blue = %L + ( %C.blue − %L ) × ( 1 − %L ) ÷ ( %max − %L ) } return %C } SetLum( %C, %l ) { %d = %l − Lum( %C ) %C.red += %d %C.green += %d %C.blue += %d return ClipColor( %C ) } Sat( %C ) { return Max( %C ) − Min( %C ) }
次の関数の[ .min, .mid, .max ]は、それぞれ,関数に入った時点で値が[ 最小, 中央, 最大 ]の異なる色~成分を指すとする。 ◎ 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( %C.max > %C.min ) { %C.mid = (( %C.mid − %C.min ) ÷ ( %C.max − %C.min )) × %s %C.max = %s } else { %C.mid = %C.max = 0 } %C.min = 0 return %C }
10.2.1. `hue^v 混色-~mode
~source色の色相, `後景$色の彩度と光度を伴う色を作る。 ◎ Creates 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 ))
10.2.2. `saturation^v 混色-~mode
~source色の彩度, `後景$色の色相と光度を伴う色を作る。 この~modeによる,`後景$の中の純粋な灰色(彩度なし)区域に対する塗りでは、何も変わらない。 ◎ Creates 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 ))
10.2.3. `color^v 混色-~mode
~source色の色相と彩度, `後景$色の光度を伴う色を作る。 これは、`後景$の灰色~levelを保全し,~monochrome画像の色~付けや, ~color画像の色彩強調( `tinting^en )に有用になる。 ◎ Creates 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 coloring monochrome images or tinting color images.
B( %Cb, %Cs ) = SetLum( %Cs, Lum( %Cb ))
10.2.4. `luminosity^v 混色-~mode
~source色の光度,および`後景$色の色相と彩度を伴う色を作る。 これは、 `color$v ~modeの反転~効果を生産する。 ◎ Creates 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 ))
10.3. ~group隔離による混色-法に対する効果
次の例では,図左の紙飛行機を構築するために利用されている要素は 通常の~group, 図右の紙飛行機は`隔離d~group$に属し、いずれも,混色-~modeは `multiply$v に設定されているとする。 ◎ Note: In the following example, the elements used to construct the paper airplane are within a group. Each of these elements has their blend mode set to multiply. ◎ The airplane on the left is a normal group, the airplane on the right is an isolated group.
図右の`隔離d~group$においては、~group内の要素は,空(から)の`初期~後景$上に組成されるので、図の地面と~~空(そら)が描かれた後景(以下 %B と記す)とは乗算されない。 図左の通常の~groupにおいては、~group内の要素は, %B 上に組成されるので、 %B で乗算される。 両者とも,~group組成した結果は、 `mix-blend-mode$p に `normal$v (~groupに適用される既定の `mix-blend-mode$p )を用いて,%B 上に組成される。 ◎ In the isolated group, the elements within the group are composited onto an empty initial backdrop, this stops the elements within the group multiplying with the backdrop. In the normal group, the elements within the group are composited onto the initial backdrop containing the land and sky. Therefore the elements of the airplane multiply with the land and sky. In both instances, the result of the group composite is composited onto the land and sky using the normal mix-blend-mode (the default mix-blend-mode applied to the group).
11. 組成と混色に伴う~security上の課題
混色~演算/組成~演算 にかかる時間は、~sourceと~destの画素に依存しないことが重要である。 画素の値に関わらず、演算にかかる時間は一定になるように実装され~MUST。 ◎ It is important that the timing to the blending and compositing operations is independent of the source and destination pixel. Operations must be implemented in such a way that they always take the same amount of time regardless of the pixel values.
この規則に沿わない場合、攻撃者が情報を推定したり, 計時攻撃を仕掛けることが可能になる。 ◎ If this rule is not followed, an attacker could infer information and mount a timing attack.
計時攻撃は、演算にかかる時間を調査して,保護されている内容についての情報を取得する手法である。 例えば、赤色の画素を描く時間が緑色の画素より長くかかるとき、要素の内容への~accessを要することなく,描画された要素の大まかな画像を再構築し得る。 ◎ A timing attack is a method of obtaining information about content that is otherwise protected, based on studying the amount of time it takes for an operation to occur. If, for example, red pixels took longer to draw than green pixels, one might be able to reconstruct a rough image of the element being rendered, without ever having access to the content of the element.
12. 変更点
2014 年 2 月 20 日付 勧告候補 からの変更点は: ◎ The following changes were made relative to the Candidate Recommendation of 20 February 2014:
-
img
要素で埋込まれた~SVG画像に対する, `isolation$p の強制は、~risk下でなくなった。 ◎ force isolation of SVG images embedded as <img> no longer at risk - `composite-mode$t から `destination$v の選択肢を除去した。 ◎ removed destination as an option for <composite-mode>
2014 年 1 月 7 日付 最終草案 からの変更点は: ◎ The following changes were made relative to the Last Call Working draft of 7 January 2014:
- 不要な参照文献を除去した。 ◎ unneeded normative and informative references were removed
2013 年 10 月 10 日付 最終草案 からの変更点は: ◎ The following changes were made relative to the Last Call Working draft of 10 October 2013:
- knockout を、規範的でない節から除去した。 ◎ knockout was removed from the non-normative section
- ~SVGについての段落を,単純~alpha組成-法から除去した ◎ removed paragraph on SVG from simple alpha compositing
- ~CSSを含むように要約を更新し,意図を明確化した。 ◎ updated abstract to include CSS and clarify intent
- clip-to-self とその参照文献を除去した。 ◎ removed clip-to-self and its references
- 5 〜 10 節を規範的に変更した。 それらの節の注記/例を明確化した。 ◎ Changed section 5-10 to be normative + clarified notes/examples in those sections
2013-06-25 草案 からの変更点は: ◎ The following changes were made relative to the Working Draft of 2013-06-25:
- ~SVGにおいて`隔離d~group$を作成する演算子の一つ, `clipping^v を、除去した。 ◎ clipping was removed as one of the operators that creates an isolated group in SVG
- `background-blend-mode$p を,他の `background-*^p 構文における繰り返しの挙動と合致するように変更した。 ◎ background-blend-mode was changed so it matches repeating behavior of other background syntaxes.
- `mix-composite^p ~propを除去した。 ◎ The mix-composite property was removed
- すべての open 課題は,解決された。 ◎ all open issues were resolved