一个像素的 RGB 值，由 2 个重叠像素组合而成答案

【问题标题】：RGB value of a pixel, combined from 2 overlaying pixels一个像素的 RGB 值，由 2 个重叠像素组合而成
【发布时间】：2017-05-04 15:16:42
【问题描述】：

我正在创建一个带有水和土地的动画 gif。陆地部分有海岸，因此在某些情况下水会覆盖这些海岸。但是，我希望海岸在水下仍然可以看到。基本上，想象一个代表水的透明 png，在另一个有沙子的上面。合并的 2 张图像可以作为第三张图像查看。

我的问题是 - 我将如何根据顶部的 RGBA（具有透明度）和底部的 RGB 值计算新像素的 RGB 值，以模仿自然的外观。

我会自己更改透明度级别，看看什么最适合我，但我缺少一个公式。

编辑： atm 我确实有一个想法 - 取水的透明度水平的百分比，并根据该百分比计算新的 RGB。对沙子像素执行相同操作，但使用“剩余”百分比（100-透明度%）

ie（为简单起见，部分以 % 为单位） (R1,G1,B1, 40) (R2,G2,B2) = 第一组的 40% + 第二组的 60%

【问题讨论】：

Lab 中两种颜色的平均值：stackoverflow.com/questions/398224/…
见stackoverflow.com/questions/1944095/how-to-mix-two-argb-pixels。作为动画 GIF，你会遇到一些麻烦，因为 GIF 在它们可以包含的颜色数量上受到限制，并且混合会生成很多新颜色。

【解决方案1】：

Alpha 混合要么非常简单（alpha 在 0-255 之间，因此颜色为目标 * (255 - a) + 叠加 * a，全部为 255），要么非常微妙，当您允许目标也具有 alpha 时.此外，还需要对许多应用程序有效地实现，这是通过预乘完成的，然后使用

硬编码除以 255

 ((x+1) * 257) >> 16;

【讨论】：

【解决方案2】：

Malcolm McLean 给出了目的地（又名背景）完全不透明的情况的正确答案，这恰好是我们正在讨论的情况。

为了完整起见，我希望您给出一般情况的公式及其背后的直觉。

首先，假设我们的颜色是 4 分量浮点向量，每个通道的值介于 0 和 1 之间。还假设我们的颜色是 alpha 预乘的，即 r、g 和 b 通道是预乘的乘以 Alpha 通道。那么 alpha 混合公式为：

blended = front + back * (1.0 - front.a)

直觉是：我们正在取正面颜色并在其上添加一点背面颜色，即我们可以通过正面颜色看到的尽可能多的颜色。

请注意，混合颜色也是 alpha 预乘的。

【讨论】：