问题标签 [color-blending]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
125 浏览

swift - 快速将 2 个视图与自定义颜色混合?

就我而言,我需要这样的东西(绿色形状是动画的): 在此处输入图像描述

图片是用 PaintCode 创建的。为了实现这一点,我使用了 3 个对象:1)带有灰色文本颜色的标签,混合是“差异”2)带有绿色圆角的自定义形状 3)标签 - 与 1 相同,但具有不同的混合和颜色参数 - 白色,混合是“叠加”

PaintCode 生成的代码:

问题是我不知道如何混合以用我需要的确切颜色填充交叉点。结果标签的颜色与我需要实现的颜色相差太大(灰色太暗,“白色”颜色是〜(240、255、255)而不是(255、255、255))。

如何解决这个问题?解决方案可能不依赖于我指定的代码。

0 投票
2 回答
52 浏览

three.js - Three.js Mesh 从前面的对象继承颜色

设想

我试图让网格从物理上位于前面的其他网格继承颜色

例子:

我不希望网格 B 完全可见,但我希望网格 A 为红色,网格 B 会阻挡网格 A 的视图。我能想到的是这是一种颜色叠加。

原型

我制作了一个 three.js 原型,其中两个平面部分遮挡了一个白色球体的视野。我希望能够将计划变成颜色叠加,以便球体显示红色、白色和蓝色(意外的美国国旗颜色)

问题

有没有办法用三个来做到这一点?我不习惯这种做事方式,但似乎有可能,我只是还没有遇到正确的文档。

0 投票
1 回答
85 浏览

python - 如何获得差异混合模式?

我正在尝试在 Pygame 中为我的游戏制作夜间效果。所以我要在屏幕上绘制一个黑色图像,然后将其混合模式更改为Difference就像在 Photoshop 中一样,以使屏幕看起来更暗。但是,我仍然不知道该怎么做,因为我还没有使用 Pygame 中的混合模式。有什么帮助吗?

0 投票
0 回答
64 浏览

python - GIMP:POC 结果与减去混合模式的 GIMP 不匹配

我一直在尝试实现 GEGL 混合模式、颜色减淡减法,作为 Python 中 POC 的一部分。我遵循的流程是减法成功的道奇。我一直在为我的实现参考以下来源:

  1. SVG 合成规范:https ://www.w3.org/TR/SVGCompositing/#comp-op-property
  2. Color DodgeSubtract的 GEGL 实现。

颜色减淡混合工作正常,并且“几乎”与 GIMP 结果相同(对于某些像素,我得到的强度差异最大为 1,但这足以满足我的需要)。但是,我从 Subtract 获得的结果与在 GIMP 中观察到的结果完全不同。我理解 Subtract 是每个通道单独的简单的每个元素差异。

我使用线性 RGB。以下是我的 Python 实现:

因此,对于减法模式,我将 Dodge 操作的输出作为顶层,将原始源图像作为底层。不透明度设置为 100%,因为这符合我的目的并简化了实现。

代码的结构不干净。所以,请原谅我。首先,我想修复算法。

以下是我用于验证的双色测试图像: Source Image。左半部分的 RGB 三元组:(71, 66, 50),右半部分:(22, 255, 182)。

GIMP 和POC的颜色减淡输出。两幅图像的 RGB 三元组相同 - 左:(98、89、62);右:(24、255、255)。

以下是应用减法后的输出:GIMPPOC。我在最终的合成图像中看到了明显的不同: GIMP 图像的 RGB 三元组:(69, 60, 35) 和 (4, 255, 255) POC 图像的 RGB 三元组:(27, 23, 12) 和 (2, 0 , 73)

我试图在 SO 上找到类似的问题并发现了这个这个这个。但是,这些无法帮助我理解我一直在观察的行为。如果有人可以在这方面帮助我,我将不胜感激。

编辑(2021 年 13 月 10 日): 减去(根据文档):最大(背景 - 前景,0)。似乎 Subtract 不使用 alpha 信息进行混合。因为,我看到了结果的差异,所以尝试用 BG 图像独立测试减法。因此,尝试使用两个普通的 RGB 图像(alpha 设置为 1) - BG:(205,36,50),FG:(125,38,85)。结果颜色 Blended: (170, 234, 0) 不符合上面的数学。

0 投票
1 回答
84 浏览

photoshop - 减法混合模式

我一直在尝试将 GIMP (GEGL) 的一些图层混合模式实现到 Python。目前,我陷入了减法混合模式。根据文档Subtract = max(Background - Foreground, 0). 然而,在 GIMP 中用Background image = (205,36,50)和做一个简单的测试Foreground image = (125,38,85),得到的合成图像/颜色(170, 234, 0)与上面的数学不太相符。

据了解,Subtract 不使用 Alpha Blending。那么,这可能是一个合成问题吗?或者减法遵循不同的数学?更多细节和背景可以在单独的SO问题中找到。

编辑 [14/10/2021]:我尝试将此图像作为我的来源。对范围内归一化的图像执行以下步骤[0, 1]

  1. 应用了颜色减淡(之前没有进行转换sRGB -> linear RGB)并从我的实现中获得了与 GIMP 结果匹配的结果
  2. sRGB -> linear RGB颜色减淡和源图像的转换。[参考]
  3. 应用减法混合Background = Colour DodgeForeground = Source Image
  4. 重新转换linear RGB-> sRGB

我从 POC获得这个。左 RGB 三元组:(69,60,34);右 RGB 三元组:(3,0,192)。和 GIMP结果。左 RGB 三元组:(69,60,35);右 RGB 三元组:(4,255,255)

0 投票
1 回答
44 浏览

opengl - 考虑目标 alpha 的混合方程,当目标 alpha 为 0 时,源颜色保持不变

“正常”的源混合方程是
outColor = srcAlpha * srcColor + (1 - srcAlpha) * dstColor

该等式不考虑目标 alpha,因此当目标 alpha 不是 1.0 时会产生较差的结果。

例如,考虑一个 50% 不透明的黄色源颜色覆盖一个完全透明但具有红色的目标颜色的情况。[编辑:例如 RGBA 缓冲区[255, 0, 0, 255]在每个通道中的值是

什么是适用于目标 alpha 的混合方程,使得具有半透明像素混合在完全透明目标上的源图像保持不变?

0 投票
1 回答
24 浏览

p5.js - P5.js:如何以编程方式计算 2 种颜色之间的 BURN blendMode?

我正在做一些 blendMode(BURN) 来绘制一些形状。和其他形状我需要直接用以前形状的结果颜色绘制,所以我需要自己生成混合的结果颜色。

我正在寻找类似的东西: