合成和混合

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

混合功能能将半透明的上图层和下图层组合到一起,构成新的混合色。上图层的 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 预乘的片段着色器。

../../_images/premultiply-alpha-project.png ../../_images/premultiply-alpha-false.png

混合模式

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

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

颜色混合模式

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

每个描述包括:

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

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

不透明 (Opaque)

部分透明

目的地 (\(dst\))

../../_images/red-r255-g0-b64.png ../../_images/red-r255-g0-b64-0.7opacity.png

来源 (\(src\))

../../_images/blue-r32-g64-b255.png ../../_images/blue-r32-g64-b255-0.7opacity.png

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}\]
../../_images/blend-mode-alpha-premultiplied.png ../../_images/blend-mode-alpha-premultiplied-alpha.png

附加 (Additive)

将源像素添加到目标像素。

使用此模式用于您希望图层添加颜色但不减少底层图层颜色的效果。

\[\begin{split}&C_{out} = C_{src} + C_{dst} \\ &α_{out} = α_{src} + α_{dst}\end{split}\]
../../_images/blend-mode-additive.png ../../_images/blend-mode-additive-alpha.png

乘以

将源像素和目标像素相乘。

此模式与 Screen 模式相反。

例如,您可以使用此模式创建比其背景更暗的部分透明叠加层。请参阅 使用颜色混合创建一个叠加层。

\[\begin{split}&C_{out} = C_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]
../../_images/blend-mode-multiply.png ../../_images/blend-mode-multiply-alpha.png

屏幕 (Screen)

将源像素和目标像素相加,并从结果中减去源和目标的乘积。

此模式与 Multiply 模式相反。

例如,您可以使用此模式创建比其背景更浅的部分透明叠加层。请参阅 使用颜色混合创建一个叠加层。

\[\begin{split}&C_{out} = C_{src} + (1 - C_{src}) * C_{dst} \\ &α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\end{split}\]
../../_images/blend-mode-screen.png ../../_images/blend-mode-screen-alpha.png

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}\]
../../_images/blend-mode-alpha-mixed.png ../../_images/blend-mode-alpha-mixed-alpha.png

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\))

../../_images/red-r255-g0-b64.png ../../_images/red-r255-g0-b64-0.7opacity.png

来源 (\(src\))

../../_images/blue-r32-g64-b255.png ../../_images/blue-r32-g64-b255-0.7opacity.png

不透明 (Opaque)

用源像素替换目标像素。

此模式等同于Porter-Duff Source 模式。

\[\begin{split}&C_{out} = C_{src} \\ &α_{out} = α_{src}\end{split}\]
../../_images/blend-mode-opaque.png ../../_images/blend-mode-opaque-alpha.png

清除

将目标像素设置为透明黑色。

\[\begin{split}&C_{out} = 0 \\ &α_{out} = 0\end{split}\]
../../_images/blend-mode-clear.png ../../_images/blend-mode-clear.png

异或

绘制不重叠的源像素和目标像素。在重叠的源像素和目标像素中,通过目标 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}\]
../../_images/blend-mode-exclusive-or.png ../../_images/blend-mode-exclusive-or-alpha.png

Source Atop

丢弃那些不覆盖目标像素的源像素,并将其余的源像素绘制在目标像素上。

\[\begin{split}&C_{out} = α_{dst} * C_{src} + (1 - α_{src}) * C_{dst} \\ &α_{out} = α_{dst}\end{split}\]
../../_images/blend-mode-source-atop.png ../../_images/blend-mode-source-atop-alpha.png

源于 In

绘制覆盖目标像素的那些源像素,并丢弃所有目标像素。

\[\begin{split}&C_{out} = α_{dst} * C_{src} \\ &α_{out} = α_{dst} * α_{src}\end{split}\]
../../_images/blend-mode-source-in.png ../../_images/blend-mode-source-in-alpha.png

源输出

绘制源像素,其 alpha 值由目标 alpha 的反值减少,并丢弃所有目标像素。

\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} \\ &α_{out} = (1 - α_{dst}) * α_{src}\end{split}\]
../../_images/blend-mode-source-out.png ../../_images/blend-mode-source-out-alpha.png

Destination Atop

丢弃未被源像素覆盖的目标像素,并将其余目标像素绘制在源像素上。

\[\begin{split}&C_{out} = α_{src} * C_{dst} + (1 - α_{dst}) * C_{src} \\ &α_{out} = α_{src}\end{split}\]
../../_images/blend-mode-destination-atop.png ../../_images/blend-mode-destination-atop-alpha.png

目的地 在

仅绘制与源像素相交的目标像素,并丢弃所有源像素。

您可以使用此混合模式来实现遮罩效果。请参阅 使用 alpha compositing 创建遮罩效果。

\[\begin{split}&C_{out} = α_{src} * C_{dst} \\ &α_{out} = α_{src} * α_{dst}\end{split}\]
../../_images/blend-mode-destination-in.png ../../_images/blend-mode-destination-in-alpha.png

Destination Out

绘制目标像素时,alpha 值按源 alpha 的反值减少,并丢弃所有源像素。

您可以使用此混合模式来实现反向蒙版效果。

\[\begin{split}&C_{out} = (1 - α_{src}) * C_{dst} \\ &α_{out} = (1 - α_{src}) * α_{dst}\end{split}\]
../../_images/blend-mode-destination-out.png ../../_images/blend-mode-destination-out-alpha.png

目标结束

将目标像素绘制在源像素上。

\[\begin{split}&C_{out} = (1 - α_{dst}) * C_{src} + C_{dst} \\ &α_{out} = (1 - α_{dst}) * α_{src} + α_{dst}\end{split}\]
../../_images/blend-mode-destination-over.png ../../_images/blend-mode-destination-over-alpha.png

高级颜色混合模式

本节介绍了 Kanzi 中的高级颜色混合模式。这些模式需要 GL_KHR_blend_equation_advanced 和 GL_KHR_blend_equation_advanced_coherent OpenGL 扩展。

每个描述包括:

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

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

    \[α_{out} = α_{src} + (1 - α_{src}) * α_{dst}\]
  • 这些重叠的源图像和目标图像上混合模式操作的可视化:

目的地 (\(dst\))

../../_images/advanced-blend-modes-destination.png ../../_images/advanced-blend-modes-destination.png

来源 (\(src\))

../../_images/advanced-blend-modes-source-color.png ../../_images/advanced-blend-modes-source-bw.png

乘 (advanced khr)

将源和目标相乘,产生更深的颜色。除此之外,此模式与 乘以 模式类似,但它处理 alpha 的方式与 屏幕 (Screen) 模式相同。

\[C_{out} = C_{dst} * C_{src}\]
../../_images/blend-mode-multiply-advanced-color.png ../../_images/blend-mode-multiply-advanced-bw.png

Overlay

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

../../_images/blend-mode-overlay-color.png ../../_images/blend-mode-overlay-bw.png
\[\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})\]
../../_images/blend-mode-darken-color.png ../../_images/blend-mode-darken-bw.png

Lighten

比较目标和源的颜色并选择较亮的一个。

\[C_{out} = max(C_{dst}, C_{src})\]
../../_images/blend-mode-lighten-color.png ../../_images/blend-mode-lighten-bw.png

Color Burn

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

此模式与 Color Dodge 模式相反。

../../_images/blend-mode-color-burn-color.png ../../_images/blend-mode-color-burn-bw.png
\[\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 模式相反。

../../_images/blend-mode-color-dodge-color.png ../../_images/blend-mode-color-dodge-bw.png
\[\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% 灰色更暗时,会使目标变暗,就像将其相乘一样。

黑色源颜色生成黑色,白色源颜色生成白色。

../../_images/blend-mode-hard-light-color.png ../../_images/blend-mode-hard-light-bw.png
\[\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 模式时更柔和。黑色或白色源颜色会产生明显更暗或更亮的结果,但不是纯黑或纯白。

../../_images/blend-mode-soft-light-color.png ../../_images/blend-mode-soft-light-bw.png
\[\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})\]
../../_images/blend-mode-difference-color.png ../../_images/blend-mode-difference-bw.png

排除

创建类似于 Difference 但对比度较低的效果。白色源颜色会反转目标颜色。黑色源颜色则不会产生变化。

\[C_{out} = C_{src} + C_{dst} - 2 * C_{src} * C_{dst}\]
../../_images/blend-mode-exclusion-color.png ../../_images/blend-mode-exclusion-bw.png

HSL 色相

用途:

  • 源的色调

  • 目标的亮度和饱和度

../../_images/blend-mode-hsl-hue-color.png ../../_images/blend-mode-hsl-hue-bw.png

HSL 饱和度

用途:

  • 源的饱和度

  • 目标的色调和亮度

../../_images/blend-mode-hsl-saturation-color.png ../../_images/blend-mode-hsl-saturation-bw.png

HSL 颜色

用途:

  • 源的色调和饱和度

  • 目标的亮度

../../_images/blend-mode-hsl-color-color.png ../../_images/blend-mode-hsl-color-bw.png

HSL 亮度

用途:

  • 源的亮度

  • 目标的色调和饱和度

../../_images/blend-mode-hsl-luminosity-color.png ../../_images/blend-mode-hsl-luminosity-bw.png

另请参阅

使用硬件合成

混合和合成2D节点

创建透明材料

材质类型和材质

着色器 (Shaders)