[Html5] 彻底搞懂画布合成模式（globalCompositeOperation）的计算公式 |
您所在的位置：网站首页 › compositing翻译 › [Html5] 彻底搞懂画布合成模式（globalCompositeOperation）的计算公式 |
|
作者： zyl910 一、缘由上一篇文章“用于分析26种画布合成模式（globalCompositeOperation）的演示页面”给出了便于测试的演示页面，现在探究一下合成模式的计算公式。 在网上搜索了一下，发现W3C《Compositing and Blending Level 1》对合成模式的公式说的最详细，于是仔细阅读了该文档。 该文档的篇幅比较长，且是英文版的，看起来比较吃力。且有些细节写的比较简略，若忽略了那些细节，可能会导致构造的公式不正确、计算结果不符。 于是整理了一下我的心得，编写了此文。 二、《Compositing and Blending Level 1》阅读心得对于合成模式来说，最重要的内容在该文档的这几个章节—— 5.1 Simple alpha compositing 9 Advanced compositing features 10 Blending“5.1 Simple alpha compositing”是介绍最基础的的简单Alpha合成。 随后第9、10章是基于这个基础算法，创造了更丰富的合成模式。 从第9、10章的标题来看，该文档将合成运算分为了2个大类—— Compositing（合成）：最常用的“Source Over”合成就是属于这一类的。画布的26种画布合成模式里，前10种是属于这一类的。 Blending（混合）：画布的26种画布合成模式里，后16种是属于这一类的。 2.1 简单Alpha合成（“5.1 Simple alpha compositing”） 2.1.1 计算颜色分量在“5.1 Simple alpha compositing”里，首先说明了如何计算颜色分量，摘录—— The formula for simple alpha compositing is co = Cs x αs + Cb x αb x (1 - αs) Where co: the premultiplied pixel value after compositing Cs: the color value of the source graphic element being composited αs: the alpha value of the source graphic element being composited Cb: the color value of the backdrop αb: the alpha value of the backdrop 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.中文翻译—— 5.1。简单的 alpha 合成 简单 alpha 合成的公式是 co = Cs x αs + Cb x αb x (1 - αs) 其中 co：合成后的预乘像素值 cs：正在合成的源图形元素的颜色值 αs：正在合成的源图形元素的 alpha 值 Cb：背景的颜色值 αb：背景的 alpha 值 注意：所有值都介于 0 和 1 之间。 合成后的像素值 (co) 由源图形元素 [Cs x αs] 和背景 [Cb x αb x (1 - αs)] 的贡献相加得出。对于图形元素和背景，颜色值乘以 alpha 以确定贡献的颜色量。零 alpha 意味着颜色没有贡献，部分 alpha 意味着一定百分比的颜色有贡献。背景的贡献基于图形元素的不透明度进一步减少。从概念上讲，背景的 (1 - αs) 通过图形元素显示，这意味着如果图形元素完全不透明 (αs=1)，则没有背景显示。“x”代表“*”，即乘法运算。 c代表颜色（Color）分量。如 R、G、B 分量的值。 很多关于Alpha合成的资料中，将 backdrop（背景）称为 Destination（目标）。了解了这一点之后，可以与其他资料进行对照。 2.1.2 计算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 x (1 - αs) Where αo: the alpha value of the composite αs: the alpha value of the graphic element being composited αb: the alpha value of the backdrop中文翻译—— 上面列出的简单 alpha 合成公式给出的结果颜色是背景颜色和图形元素颜色的加权平均结果，权重由背景和图形元素 alpha 决定。合成的合成 alpha 值只是合成元素贡献的 alpha 的总和。合成的结果 alpha 的公式是 αo = αs + αb x (1 - αs) 其中 αo：合成的 alpha 值 αs：正在合成的图形元素的 alpha 值 αb：背景的 alpha 值 2.1.3 处理预乘（pre-multiplied）该文档最后说明了如何处理预乘（pre-multiplied）。摘录—— 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 x αs with cs: the pre-multiplied value Cs: the color value αs: the alpha value Thus the formula for simple alpha compositing using pre-multiplied values becomes co = cs + cb x (1 - αs) To extract the color component of a pre-multiplied value, the formula is reversed: Co = co / αo中文翻译—— 通常，存储颜色和不透明度的预乘值会更有效。预乘法的值由以下公式给出 cs = Cs x αs 其中 cs：预乘值 Cs：颜色值 αs：alpha值 因此，使用预乘值进行简单 alpha 合成时，公式变为 co = cs + cb x (1 - αs) 为了从预乘值提取颜色分量，可对公式进行逆向变换： Co = co / αo 2.1.4 小结初看这一节时可能会有这样的疑问——该章节标题是“简单Alpha合成”，但给出的公式怎么比较复杂。貌似很多资料上的“Alpha合成”公式比较简单。 原因在于这一节讲解的是 “源与背景均具有Alpha通道”时的合成算法。而不少资料讲解的仅是“没有Alpha通道时的特例”。 没有Alpha通道时，Alpha合成可看作简单的线性插值，计算公式很简单。且不用理会预乘（pre-multiplied）。 但源与背景均具有Alpha通道时，就没有这么简单了。需要基于加色法光照模型来推导的，颜色预乘后的结果才是实际的光照贡献值。这就是为什么主公式的计算结果为预乘值的原因。这也是很多资料推荐“用预乘的位图格式”的原因。 而Html5画布为了便于直观使用，规定了位图数据为“非预乘”（not use pre-multiplied、not multiplied。另一种称呼是 Straight，即“直通”）格式的，于是在Alpha混合后需再做一次“预乘值转非预乘值”的转换。 因Html5画布的位图是非预乘的，于是可以总结得到以下经验—— 该文中的提到的 源（s：source）、背景（b：backdrop）颜色值，一般是非预乘（not use pre-multiplied）值。 该文中的提到的主要公式计算结果，一般是预乘（pre-multiplied）值。 最后为了转为Html5规范的位图颜色值，得再做一次“预乘值转非预乘值”的转换。总结一下，该文的“简单Alpha合成”计算过程，由这3个公式组成—— co = Cs x αs + Cb x αb x (1 - αs) // 主公式, 得到混合后的已预乘颜色分量值。 αo = αs + αb x (1 - αs) // 得到混合后的Alpha（不透明度）分量值。 Co = co / αo // 对已预乘颜色分量进行“预乘值转非预乘值”转换，得到了非预乘的颜色分量。即转为Html5规范的位图颜色值。 2.2 Compositing类合成模式的算法（9 Advanced compositing features）Compositing类合成模式，又被称为“The Porter Duff Compositing Operators”。“Porter Duff”是指 Thomas Porter 和 Tom Duff ，他们于 1984 年发表了一篇名为 “Compositing Digital Images”(合成数字图像)的开创性论文。在这篇文章中，两位作者描述了12种合成操作符，具体来说就是当我们把原图像绘制到目标图像处时应该如何计算二者结合后的颜色。 2.2.2 解读“9.1. The Porter Duff Compositing Operators”《Compositing and Blending Level 1》第9章中的第1节，对此进行了说明： 9.1. The Porter Duff Compositing Operators 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: αo = αs x 1 + αb x (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 x Fa + αb x Fb and incorporating color gives the general Porter Duff equation co = αs x Fa x Cs + αb x Fb x Cb Where: co is the output color pre-multiplied with the output alpha [0 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |