问题标签 [color-blending]

在 Photoshop 中，您可以将图层的混合模式设置为“色调”。例如，如果该层用蓝色填充，那么它似乎会采用下面的层并将其全部变为蓝色，只要存在非白色的颜色。

我想知道它实际上在做什么。如果我有一个带有像素 aarrggbb 的背景图层，并且其顶部的图层设置为混合模式“Hue”，并且该图层上有一个像素 aarrggbb，那么这两个值如何组合以给出我们看到的结果？

它不只是从下面的图层中删除 rrggbb。如果这样做，它也会变成白色和黑色。它也不允许颜色变化通过。

如果背景像素是 0xff00ff00 并且相应的色调层像素是 0xff0000ff，那么我假设最终结果将只是 0xff0000ff，因为 ff 蓝色取代了 ff 绿色。但是，如果背景像素是 0x55112233，色相层像素是 0xff0000ff，那么它是如何得出它得出的蓝色阴影的呢？

我问的原因是我想在我的应用程序中拍摄各种图像并以编程方式更改图像的色调。与其存储具有不同颜色的同一图像的 8 个不同版本，不如存储一张图像并根据需要对其进行着色。

我有 2 个字节以 8 位格式表示颜色

位 0 和 1 是垃圾。

要混合两种颜色，我应该只平均每种颜色的位数吗？

其中C1是第一种颜色，C2是第二种颜色，是C3混合颜色，^是按位与，>>是按位右移，<<是按位左移，xxxxxxxxB是二进制数，avg( a , b )是算术平均值。

我正在设计一个在 HTML5 Canvas 元素上运行的 Photoshop 风格的 Web 应用程序。该程序运行良好并且速度非常快，直到我将混合模式添加到方程式中。我通过将每个画布元素合并为一个并使用从底部画布开始的正确混合模式组合每个画布中的每个像素来实现混合模式。

用它来调用不同混合模式的混合。我的“正常”混合模式如下：

我在 Chrome 中的测试结果（在测试的浏览器中产生了一些最好的）大约 400 毫秒，在 620x385（238,700 像素）的画布上将三层混合在一起。

这是一个非常小的实现，因为大多数项目的规模会更大，并且包含更多的层，这将使执行时间在这种方法下飙升。

我想知道是否有更快的方法将两个画布上下文与混合模式结合起来，而不必遍历每个像素。

问题得到了回答。有关更多信息，请查看本文末尾的 EDIT #4。

我们目前正在开发一个运行良好的游戏引擎。我正在开发动画创建器，想知道是否可以使用加法混合绘制图像。

让我解释。

我们使用 C# 的 System.Drawing 库并使用 Windows 窗体。目前，用户可以通过导入带框动画图像（包含动画每一帧的图像）来创建动画，并且用户可以将这些帧拖放到任何他想要的地方。

实际的问题是我们无法弄清楚如何使用加法混合来绘制框架。

如果您不太明白，这里有一个添加剂混合的例子。我不会怪你，我很难用英语写作。

我们使用以下方法在 Panel 上或直接在窗体上绘制。例如，这里是为地图编辑器绘制平铺地图的代码。由于 AnimationManager 代码是一团糟，用这个例子会更清楚。

有没有一种可能的方法来绘制一个附加绘图的图像，如果是这样，如果有人能指出我如何，我将永远感激不尽。谢谢你。

编辑＃1：

对于绘制图像，我们使用颜色矩阵来设置色调和 alph（不透明度），如下所示：

也许颜色矩阵可以用于加法混合？

编辑#2：

刚刚发现了 Mahesh Chand 的这篇文章。

进一步浏览后，即使颜色矩阵可以完成很多关于颜色转换的工作，它也可能无法使用。如果找到解决方案，我将回答我自己的问题。

谢谢你的帮助。

编辑#3：

XNA这里有很多关于混合的文档。我找到了用于在图像的每个像素上完成加法混合的公式。

PixelColor = (source * [1, 1, 1, 1]) + (destination * [1, 1, 1, 1])

也许有一种在当前上下文中使用这个公式的方法？我将在下一次编辑时开始 50 赏金，我们真的需要这个来工作。

再次感谢您的宝贵时间。

编辑#4

感谢axon，现在问题解决了。使用 XNA 及其 Spritebatch，您可以完成 Additive 混合：

首先你创建一个 GraphicsDevice 和一个 SpriteBatch

然后，当需要在控件或窗体上绘图时（例如使用 OnPaint 事件），您可以使用以下代码块

我一直在寻找一种混合模式来（嗯......）混合两个 RGB 像素，以便以画家构建它们的 samw 方式构建颜色（即：减法）。

以下是我期望的结果类型的快速示例：

青色 + 品红色 = 蓝色
青色 + 黄色 = 绿色
品红色 + 黄色 = 红色
红色 + 黄色 = 橙色
红色 + 蓝色 = 紫色
黄色 + 蓝色 = 绿色

我正在寻找一个公式，例如：dest_red = first_red + second_red; dest_green = first_green + second_green；dest_blue = first_blue + second_blue；

我已经尝试过常用的“乘法”公式，但它不起作用；我已经尝试过使用定制的公式，但我仍然无法“破解”它应该如何工作。而且我已经知道很多颜色理论，所以请不要回答如下：

检查此链接：http://the_difference_betweeen_additive_and_subtractive_lighting.html

注意：检查您的混合方法是否适用于 YELLOW + BLUE = GREEN 和 YELLOW + RED = ORANGE

我需要在 OpenGL 的背景上渲染图像，我试图获得与 Photoshop 中的“颜色减淡”相同的结果，但我无法做到。

现在我正在做：

背景是没有 Alpha 通道的 tga。图像是带有 alpha 通道的 tga。

这会在背景上渲染带有 alpha 的图像，但太亮了。

我读到它应该很简单：

但是尽管有 alpha 通道，图像仍被渲染为白色方块。

显然我做错了什么。

我有一个给定颜色的 three.js 对象。我想将它平滑地设置为另一种颜色。在动画期间，它应该只显示开始和结束之间的直接渐变。也就是说，它不应该在 RGB 颜色空间中线性执行补间。我什至不确定 HSV 空间内的线性补间是否会很好看。

如何在 three.js 对象上获得这种颜色补间？

我正在开发一个应用程序，该应用程序创建的图像的色调、饱和度和值会根据不同的参数而变化。出于性能原因，单独渲染色调、饱和度和值分量，然后使用 Photoshop 风格的混合模式（正片叠底、叠加、屏幕、色调等）将它们合成在一起是有意义的。

我已经知道如何对 RGB 图像执行此操作：将每个通道拆分为自己的红色、绿色或蓝色图像，其值范围从透明到该通道的颜色。将它们叠加在黑色之上并将它们的混合模式设置为屏幕，嘿，你有你的彩色图像：

我将如何使用由 HSV 值定义的图像来执行此操作？我的应用程序经常更改其中一个通道而不更改其他两个通道，如果我可以在 GPU 上合成现有图像而不是每次发生变化时都渲染一个全新的图像，它将加快我的渲染速度。

这是一个例子：

在此示例中，色调在圆周上从 0º 到 360º 变化，饱和度从中心到边缘从 0% 到 100% 变化，亮度 (V) 在圆周上从 0% 到 100% 变化。这是我的应用程序创建的典型图像类型。有没有可以用来分别创建这些通道并以数学上完美的方式合成它们的常见混合模式的组合？

看起来 PSD 文件中的合并图像数据包含与白色混合的 RGB 数据（基于透明度）。这对所有版本的 Photoshop/PSD 都正确吗？我可以禁用它或控制该颜色吗？

上下文：我正在使用 C++ 代码阅读 PSD 文件（尽管回答我相信的问题不需要编码知识）。PSD 文件包含“图像数据部分”中所有图层的合并数据（RGB、透明度（如果有），然后是 alpha 蒙版）。根据我的经验，RGB 数据似乎是基于透明度与白色预乘的。当您想将该 RGB 与基于透明度的东西混合时，这会导致问题（想想：我将该数据用作游戏引擎中的纹理）。我附上了说明问题的图片。顶部图像是 PhotoShop 中的来源。左下角显示合并数据中的 RGB - 请参阅透明图像部分与白色混合。我的目标是从没有白色混合的所有图层中获取 RGB 数据，即右下角的图像（只有完全透明的部分填充有白色）。

只需在任何忽略图层的工具（例如 IrfanView）中打开透明 PSD 文件，您就会看到图像预乘以白色。

像 PNG 这样的格式支持透明图像部分的颜色 - 不会与白色（或其他颜色）混合。

所以我的问题是：我可以控制那种混合白色吗？所有的 Photoshop 版本都这样做吗？

假设我有两张图像并将它们拼接在一起。现在，我们如何使用 2-Band Blending 呢？或者其他简单的混合方法，我的时间有限。任何帮助，将不胜感激。

我现在使用的是直截了当的，不考虑混合方法：