合成和混合

合成功能让您能够绘制分层图形，您可以控制每个图层的外观（由其下面的图层外观决定）。

混合功能能将半透明的上图层和下图层组合到一起，构成新的混合色。上图层的 alpha 通道设置图层的不透明度。

要设置 Kanzi 如何混合两层，请使用 Blend Mode 属性。请参阅 混合模式。

在合成和混合过程中，Kanzi 期望输入纹理数据具有预乘 alpha，并且 Kanzi 输出预乘 alpha。Kanzi 支持多层的复杂合成，您可以将 Kanzi 的输出与外部合成窗口管理器一起使用。

阿尔法预乘

RGBA 像素拥有红、绿、蓝三种颜色通道以及阿尔法通道的值，该值决定了像素的透明度。要实现阿尔法混合，Kanzi 将纹理数据中的 RGB 通道与阿尔法值预乘。

{Red * Alpha, Green * Alpha, Blue * Alpha, Alpha}

使用纹理数据让纹理过滤和插值能够同阿尔法一起正常工作。

Kanzi 附带的着色器旨在输出具有预乘 alpha 的 RGBA 值。当您编写着色器时，必须将片段的输出 RGB 值与其 alpha 值相乘。这样，部分透明节点中像素的颜色值不会在部分透明区域的边缘之外渗出，并且可以避免诸如部分透明节点周围出现白色边缘等问题。

默认情况下，Kanzi Studio 在导出 kzb 文件时将 RGB 值与 alpha 值相乘。

要更改此设置，在 Project > Properties 中使用 Premultiply Alpha 属性。您可以在要使用不同设置的图像文件的属性中覆盖此值。

例如，将 Premultiply Alpha 设置为 False，以用于您的 Kanzi 应用程序动态加载且未预处理的那些纹理图像，并且使用不执行 RGB 颜色的 alpha 预乘的片段着色器。

混合模式

要设置如何将一个图层（源）的像素颜色和 alpha 值与另一个图层（目标）的像素颜色和 alpha 值组合，请使用 Blend Mode 属性。

您在节点或渲染通道中设置的 Blend Mode 属性的值会覆盖节点或渲染通道使用的材质中设置的该属性的值。

颜色混合模式

本节介绍 Kanzi 中的颜色混合模式。

每个描述包括：

• Kanzi 用于计算源 (\(src\)) 和目标 (\(dst\)) 组合的结果颜色 (\(C_{out}\)) 和 alpha (\(α_{out}\)) 的方程。

• 可视化展示了混合模式如何在具有不透明（左）或部分透明（右）内容的重叠源图像和目标图像上操作：

		不透明 (Opaque)	部分透明
	目的地 (\(dst\))
	来源 (\(src\))

Alpha：Premultiplied

期望源像素中的预乘 alpha RGBA，并使用源像素的 alpha 将源像素混合在目标像素之上。 此模式是默认和推荐的 alpha 混合模式，相当于 Porter-Duff 的 Source Over 模式。 \[\begin{split}&C_{out} = C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

附加 (Additive)

将源像素添加到目标像素。 使用此模式用于您希望图层添加颜色但不减少底层图层颜色的效果。 \[\begin{split}&C_{out} = C_{src} + C_{dst} \\ &α_{out} = α_{src} + α_{dst}\end{split}\]

乘以

将源像素和目标像素相乘。 此模式与 Screen 模式相反。 例如，您可以使用此模式创建比其背景更暗的部分透明叠加层。请参阅 使用颜色混合创建一个叠加层。 \[\begin{split}&C_{out} = C_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]

屏幕 (Screen)

将源像素和目标像素相加，并从结果中减去源和目标的乘积。 此模式与 Multiply 模式相反。 例如，您可以使用此模式创建比其背景更浅的部分透明叠加层。请参阅 使用颜色混合创建一个叠加层。 \[\begin{split}&C_{out} = C_{src} + (1 - C_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

Alpha：Automatic

将混合模式设置为以下之一：

• 当项目或图像的 Premultiply Alpha 属性启用时，Alpha: Premultiplied。这是默认值。

• 当项目或图像的 Premultiply Alpha 属性被禁用时，Alpha: Mixed。

请参阅 阿尔法预乘。

Alpha：Non-premultiplied

旧版模式。对于非预乘输入，请改用 Alpha: Mixed 模式。

Alpha: Non-premultiplied 模式期望源像素中的非预乘 alpha RGBA，并将源像素与目标像素混合。请注意，这会导致目标帧缓冲区中的 alpha 通道不正确。渲染到纹理并在稍后作为前景混合时，不能使用此模式。

Alpha：Mixed

期望源像素中具有非预乘 alpha 的 RGBA，并将源像素与目标像素进行混合。 例如，使用此模式当您动态加载不进行预处理的纹理时，该纹理使用的片段着色器不执行 RGB 颜色的 alpha 预乘。 \[\begin{split}&C_{out} = α_{src} * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

Alpha compositing modes（Alpha 合成模式）

This section describes the Porter-Duff blend modes in Kanzi. The Porter-Duff blend modes were defined by Thomas Porter and Tom Duff in their 1984 paper Compositing Digital Images.

使用 Porter-Duff 混合模式进行 alpha 合成。Porter-Duff 混合模式基于这些图层的 alpha 通道组合两个图层。如果目标帧缓冲区没有 alpha 通道，或者 alpha 值恒定为 1，许多 alpha 合成模式可能会产生不直观但正确的结果。例如，Source Out 模式产生的结果与 Clear 混合模式相同。

使用 alpha 合成时，确保将渲染目标的 alpha 通道设置为适合 alpha 合成。例如：

• 使用通过启用 Node 2D > Force Composition 属性组合的父节点。这样，您可以将节点渲染到已清除的渲染目标。

• 如果窗口表面是半透明的，使用 Clear 混合模式清除目标帧缓冲区。

默认情况下，Kanzi 使用 Alpha: Premultiplied 模式合成节点，该模式对应于 Porter-Duff Source Over 模式。

在 Kanzi 中，要实现 Porter-Duff Destination 或 Source 模式的行为，请在目标或源节点中禁用 Node > Visibility 属性。

每个描述包括：

• Kanzi 用于计算源 (\(src\)) 和目标 (\(dst\)) 组合的结果颜色 (\(C_{out}\)) 和 alpha (\(α_{out}\)) 的方程。

• 可视化展示了混合模式如何在具有不透明（左）或部分透明（右）内容的重叠源图像和目标图像上操作：

		不透明 (Opaque)	部分透明
	目的地 (\(dst\))
	来源 (\(src\))

不透明 (Opaque)

用源像素替换目标像素。 此模式等同于Porter-Duff Source 模式。 \[\begin{split}&C_{out} = C_{src} \\ &α_{out} = α_{src}\end{split}\]

清除

将目标像素设置为透明黑色。 \[\begin{split}&C_{out} = 0 \\ &α_{out} = 0\end{split}\]

异或

绘制不重叠的源像素和目标像素。在重叠的源像素和目标像素中，通过目标 alpha 的反值减少源 alpha，通过源 alpha 的反值减少目标 alpha，然后合并像素。 \[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = (1 - α_{dst}) * α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]

Source Atop

丢弃那些不覆盖目标像素的源像素，并将其余的源像素绘制在目标像素上。 \[\begin{split}&C_{out} = α_{dst} * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{dst}\end{split}\]

源于 In

绘制覆盖目标像素的那些源像素，并丢弃所有目标像素。 \[\begin{split}&C_{out} = α_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]

源输出

绘制源像素，其 alpha 值由目标 alpha 的反值减少，并丢弃所有目标像素。 \[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} \\ &α_{out} = (1 - α_{dst}) * α_{src}\end{split}\]

Destination Atop

丢弃未被源像素覆盖的目标像素，并将其余目标像素绘制在源像素上。 \[\begin{split}&C_{out} = α_{src} * C_{dst} + (1 - α_{dst}) * C_{src} \\ &α_{out} = α_{src}\end{split}\]

目的地 在

仅绘制与源像素相交的目标像素，并丢弃所有源像素。 您可以使用此混合模式来实现遮罩效果。请参阅 使用 alpha compositing 创建遮罩效果。 \[\begin{split}&C_{out} = α_{src} * C_{dst} \\ &α_{out} = α_{src} * α_{dst}\end{split}\]

Destination Out

绘制目标像素时，alpha 值按源 alpha 的反值减少，并丢弃所有源像素。 您可以使用此混合模式来实现反向蒙版效果。 \[\begin{split}&C_{out} = (1 - α_{src}) * C_{dst} \\ &α_{out} = (1 - α_{src}) * α_{dst}\end{split}\]

目标结束

将目标像素绘制在源像素上。 \[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + C_{dst} \\ &α_{out} = (1 - α_{dst}) * α_{src} + α_{dst}\end{split}\]

高级颜色混合模式

本节介绍 Kanzi 中的高级颜色混合模式。使用 OpenGL 或 OpenGL ES 时，这些模式需要 GL_KHR_blend_equation_advanced 和 GL_KHR_blend_equation_advanced_coherent 扩展。使用 Vulkan 时，这些模式需要 VK_EXT_blend_operation_advanced 扩展。

每个描述包括：

• Kanzi 用于计算源 (\(src\)) 和目标 (\(dst\)) 组合的结果颜色 (\(C_{out}\)) 的方程。

  所有高级颜色混合模式都使用此方程来计算结果 alpha：

  \[α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\]

• 这些重叠的源图像和目标图像上混合模式操作的可视化：

	目的地 (\(dst\))
	来源 (\(src\))

乘 (advanced khr)

将源和目标相乘，产生更深的颜色。除此之外，此模式与 乘以 模式类似，但它处理 alpha 的方式与 屏幕 (Screen) 模式相同。 \[C_{out} = C_{dst} * C_{src}\]

Overlay

结合 乘以 和 屏幕 (Screen) 模式。当目标较亮时，源变得更亮；当目标较暗时，源变得更暗。此模式保留目标中的高光和阴影。

\[\begin{split}&C_{out} = \begin{cases} 2 * C_{src} * C_{dst} & \text{如果 } C_{dst} <= 0.5\\ 1 - 2 * (1 - C_{src}) * (1 - C_{dst}) & \text{否则} \end{cases}\end{split}\]

变暗

比较目标和源的颜色并选择较暗的一个。 \[C_{out} = min(C_{dst}, C_{src})\]

Lighten

比较目标和源的颜色并选择较亮的一个。 \[C_{out} = max(C_{dst}, C_{src})\]

Color Burn

使目标变暗以反映源颜色，从而产生对比度更高、中间色调更饱和且高光减少的结果。白色源颜色不会产生变化。 此模式与 Color Dodge 模式相反。

\[\begin{split}&C_{out} = \begin{cases} 1 & \text{如果 } C_{dst} >= 1\\ 1 - min(1, \frac{1 - C_{dst}}{C_{src}}) & \text{如果 } C_{dst} < 1 \text{ 且 } C_{src} > 0\\ 0 & \text{如果 } C_{dst} < 1 \text{ 且 } C_{src} <= 0 \end{cases}\end{split}\]

颜色减淡

使目标变亮以反映源颜色，产生对比度较低、饱和中间色调和高光溢出的结果。黑色源颜色不会产生变化。 此模式与 Color Burn 模式相反。

\[\begin{split}&C_{out} = \begin{cases} 0 & \text{如果 } C_{dst} <= 0\\ min(1, \frac{C_{dst}}{1 - C_{src}}) & \text{如果 } C_{dst} > 0 \text{ 且 } C_{src} < 1\\ 1 & \text{如果 } C_{dst} < 0 \text{ 且 } C_{src} >= 1 \end{cases}\end{split}\]

强光

相乘或屏幕显示颜色： 源颜色比 50% 灰色更浅时，会像屏幕一样使目标变亮。 源颜色比 50% 灰色更暗时，会使目标变暗，就像将其相乘一样。 黑色源颜色生成黑色，白色源颜色生成白色。

\[\begin{split}&C_{out} = \begin{cases} 2 * C_{src} * C_{dst} & \text{如果 } C_{src} <= 0.5\\ 1 - 2 * (1 - C_{src}) * (1 - C_{dst}) & \text{否则} \end{cases}\end{split}\]

柔光

使颜色变暗或变亮： 源颜色比 50% 灰色更浅时，会使目标变亮，就像对其进行减淡一样。 源颜色比 50% 灰色更暗时，会使目标变暗，就像在燃烧它一样。 结果比使用 Overlay 模式时更柔和。黑色或白色源颜色会产生明显更暗或更亮的结果，但不是纯黑或纯白。

\[\begin{split}&C_{out} = \begin{cases} C_{dst} - ( 1 - 2 * C_{src}) * C_{dst} * (1 - C_{dst}) & \text{当 } C_{src} <= 0.5\\ C_{dst} + (2 * C_{src} - 1) * C_{dst} * ((16 * C_{dst} - 12) * C_{dst} + 3) & \text{当 } C_{src} > 0.5 \text{ 且 } C_{dst} <= 0.25\\ C_{dst} + (2 * C_{src} - 1) * (\sqrt{C_{dst}} - C_{dst}) & \text{当 } C_{src} > 0.5 \text{ 且 } C_{dst} > 0.25 \end{cases}\end{split}\]

差异

根据哪个颜色更亮，从目标颜色中减去源颜色或反过来。白色源颜色会反转目标颜色。黑色源颜色不会产生变化。 \[C_{out} = abs(C_{dst} - C_{src})\]

排除

创建类似于 Difference 但对比度较低的效果。白色源颜色会反转目标颜色。黑色源颜色则不会产生变化。 \[C_{out} = C_{src} + C_{dst} - 2 * C_{src} * C_{dst}\]

HSL 色相

用途： 源的色调 目标的亮度和饱和度

HSL 饱和度

用途： 源的饱和度 目标的色调和亮度

HSL 颜色

用途： 源的色调和饱和度 目标的亮度

HSL 亮度

用途： 源的亮度 目标的色调和饱和度

另请参阅

使用硬件合成

混合和合成2D节点

创建透明材料

材质类型和材质

着色器 (Shaders)