Post #150

研究了一下 compositing and blending 的原理，之前一直不太明白 alpha 如何影响各种 blend mode，以及结果的 alpha 是如何确定的。以下信息整理自 https://www.w3.org/TR/2024/CRD-compositing-1-20240321/ ，符号与之保持一致，Cs、Cb、Co 分别表示前景、背景、输出颜色，αs、αb、αo 分别表示其 alpha。 1. Cm = B(Cb, Cs) 混合前景色和背景色，这一步完全不考虑 alpha，其中 B 取决于 blend mode，并且大多数 blend mode 独立处理 rgb 三个通道。 2. Cr = αb * Cm + (1 - αb) * Cs 用背景 alpha 控制混合结果与前景色的比例。 3. αo = Fa * αs + Fb * αb 计算输出 alpha，其中 Fa 和 Fb 取决于 compositing operator。 4. Co = (Fa * αs * Cr + Fb * αb * Cb) / αo 计算输出颜色。 默认的 blend mode 是 normal，其定义 B(Cb, Cs) = Cs。默认的 compositing operator 是 source over，其定义 Fa = 1，Fb = 1 - αs。代入可知默认情况下： Cm = Cr = Cs αo = αs + (1 - αs) * αb Co = (αs * Cs + (1 - αs) * Cb) / (αs + (1 - αs) * αb) 这种默认情况被称为 simple alpha compositing，它具有结合律，多个层次用不同方式组合得到的结果相同。但使用不同的 blend mode 或 compositing operator 可能会破坏结合律，规定从下向上组合，也就是位于最底部的两层先组合，再与上层组合。 P.S. 原文第 6 节公式错了，Co 应改为 co，我发现有别人也注意到这个错误了： https://github.com/w3c/fxtf-drafts/issues/478