Composition and blending

Composition makes it possible to draw layered graphics where you can control the look of each layer, which depends on the look of its underlying layer.

Blending combines a translucent upper layer with a lower layer, producing a new blended color. The alpha channel of the upper layer sets the opacity of the layer. To determine how Kanzi blends two layers, in a material set the Blend Mode property. See Blend modes.

During compositing and blending Kanzi expects the input texture data to have premultiplied alpha, and Kanzi outputs premultiplied alpha. Kanzi supports complex compositing of multiple layers and you can use the output from Kanzi with an external compositing window manager.

Alpha premultiplication

RGBA pixels have values for the red, green, and blue color channels, and the alpha channel, which determines the pixel opacity. To achieve alpha blending, Kanzi premultiplies the RGB channels from texture data with an alpha value.

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

The use of texture data makes texture filtering and interpolation work correctly with alpha.

The shaders that come with Kanzi are designed to output RGBA values with premultiplied alpha. When you write shaders, you must multiply the output RGB values of the fragment with its alpha value. This way the color values of the pixels in partially transparent nodes do not bleed outside the edges of the partially transparent area and you avoid issues, such as white edges around partially transparent nodes.

Kanzi Studio by default multiplies the RGB values with the alpha value when you export a kzb file.

To change this setting, in the Project > Properties use the Premultiply Alpha property. You can override this value in the properties of the image file where you want to use a different setting.

For example, set Premultiply Alpha to False for the images of those textures that your Kanzi application loads dynamically without preprocessing, and that use a fragment shader which does not perform alpha premultiplication of the RGB color.

Blend modes

To determine how Kanzi blends two layers, in a material set the Blend Mode property.

Blend Mode	Description	glBlendFunc
Opaque	This mode copies the RGBA value of the source fragment to the destination framebuffer and overwrites the existing value. The result is the same as when blending with glBlendFunc(GL_ONE, GL_ZERO). This is the only blend mode where GL_BLEND is disabled.	glDisable(GL_BLEND)
Alpha: Automatic	This sets the blend mode to either: Alpha: Premultiplied when the Premultiply Alpha property for the project or an image is enabled. This is the default value. Alpha: Mixed when the Premultiply Alpha property for the project or an image is disabled. See Alpha premultiplication.	Not available
Alpha: Non-premultiplied	Legacy mode. For non-premultiplied input use the Alpha: Mixed mode instead. The Alpha: Non-premultiplied mode expects non-premultiplied alpha RGBA in the source fragment, and blends the source fragment with the destination framebuffer. Note that this results in an incorrect alpha channel in the destination framebuffer. You cannot use this mode when rendering to a texture which is later blended as a foreground.	glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)
Alpha: Premultiplied	This is the default and recommended mode for alpha blending. The Alpha: Premultiplied mode expects premultiplied alpha RGBA in the source fragment, and blends the source fragment with the destination framebuffer.	glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA)
Alpha: Mixed	This mode expects non-premultiplied alpha RGBA in the source fragment, and blends the source fragment with the destination framebuffer. For example, use the Alpha: Mixed mode when you dynamically load without preprocessing a texture that uses a fragment shader which does not perform alpha-premultiplication of the RGB color.	glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE GL_ONE_MINUS_SRC_ALPHA)
Additive	This mode adds the source fragment to the destination framebuffer. Use the Additive mode for effects where you want a layer to add RGB color, but not reduce the RGB color of the underlying layer.	glBlendFunc(GL_ONE, GL_ONE)

See also

Using hardware composition

Creating transparent materials

Material types and materials

Shaders