Transparency and Alpha Blending (Editing)

Slug*

A URL path component

Parent page

The parent page this belongs to.

Article title*

Article revisions must have a non-empty title

Article body*

Transparency is the visual effect of an object being partially see-through. In computer graphics it typically refers to *alpha blending*. This is where two colours are mixed by an *alpha* ratio. To make a surface see-through, it is mixed with the colour behind it. The colour behind it may be the result of mixing other surface colours. Blending is often order dependent, requiring sorting as discussed later.

There are a number of blending operations, but the most common is alpha blending by Porter and Duff. Physically, alpha models a statistical surface coverage. An example is dust and dirt on clear glass, or a fine spray of paint, where a microscopic portion is fully opaque and the rest fully transparent. The alpha value is the ratio between opaque and transparent parts. Alpha blending can be seen as an antialiasing technique, approximating tiny surface details and avoiding the expense of modelling and rendering them.

Coloured glass is a common transparency example, although this implies an absorption effect which isn't modelled by classic alpha blending.

# Alpha Blending

The following equation overlays or mixes a foreground colour $F$ with background $B$ given the ratio $\alpha$.

$$\alpha F + (1 - \alpha) B$$

This equation, also called the *over* operator is the most common.

# Transparency

Multiple transparent surfaces are handled by starting with the background colour and blending each surface onto it in order from farthest to nearest.

colour = background
    foreach surface
        colour = blend(colour, surface)

In some cases it's useful to blend starting with the front surface and going back. In this case, a *visibility* value must be maintained. This gives a portion of remaining colour that can be added. This is scaled down by the transmittance, $1 - \alpha$ at each surface.

vis = 1
    colour = 0
    foreach surface
        colour += surface * surfaceAlpha * vis
        vis *= 1 - surfaceAlpha
    colour += background * vis

This approach is sometimes referred to as the *under* operator as colour from a surface behind the blended group is added.

# Visibility

Rather than blending surfaces in turn, an alternative approach to solving transparency is to find surface visibility by another means. This allows an unordered sum of surface colours:

$$ C = \sum S \cdot S_\alpha \cdot \mathsf{vis}(S)$$

Where $C$ is the result, $S$ is the surface colour and $\mathsf{vis}$ is some function that gives the visibility of the surface, as in the under blending approach above. Although sorting is necessary for correct transparency, the colours themselves don't need sorting, only the alpha values to give the function $\mathsf{vis}$.

The concept of a statistical visibility is a great tool to better understand transparency and alpha blending. It is also particularly useful in approximate transparency techniques, where the $\mathsf{vis}$ function is hard coded, approximated or compressed to allow fast unordered blending.

# Saturation Blending

Alpha blending assumes an even statistical coverage at each surface but this is not always the case. If the opaque parts of partially transparent surfaces perfectly overlap, only the front surface will be visible. Alternatively, if all opaque portions of a surface are visible through the gaps of the transparent surfaces in front of it then the visibility scaling factor should be ignored. That is until there are no more gaps left. This is where saturation blending comes in.

vis = 1
    colour = 0
    foreach surface
        colour += colour * surfaceAlpha * vis
        vis = max(0, vis - surfaceAlpha)
    colour += background * vis

This must be done in order of nearest to farthest.

An example usage is rasterization antialiasing where a fragment's alpha is set to the portion of the triangle covering a pixel. Triangles are rendered from front to back and it is assumed that further contributions to that pixel will be from other triangles filling the remaining area.

Toggle Preview

Edit message*

A description of the changes made

Transparency and Alpha Blending

Flag the thing you clicked for moderator attention.

Error