GR32.Blend.Modes.PorterDuff

Description

The GR32.Blend.Modes.PorterDuff unit implements the 12 fundamental digital image compositing operators defined by Thomas Porter and Tom Duff in their seminal 1984 SIGGRAPH paper, "Compositing Digital Images".

Understanding Porter-Duff Compositing

When two semi-transparent image layers (a Source foreground layer $S$ and a Destination background layer $D$ ) overlap, each pixel can be divided geometrically into four distinct coverage regions based on the opacity of the source ( $α_{S}$ ) and destination ( $α_{D}$ ):

Neither shape: Completely transparent background where neither $S$ nor $D$ is present.
Source only: Region covered by $S$ but outside $D$ , with coverage $(1 - α_{D})$ .
Destination only: Region covered by $D$ but outside $S$ , with coverage $(1 - α_{S})$ .
Both shapes: Overlapping intersection region covered by both $S$ and $D$ , with coverage $α_{S} \cdot α_{D}$ .

By assigning binary inclusion factors ( $0$ or $1$ ) to regions 2, 3, and 4, Porter and Duff established an algebraic framework yielding exactly 12 primary compositing operators.

In general, the resulting alpha $α_{R}$ and color components $C_{R}$ are calculated using source weight factor $F_{S}$ and destination weight factor $F_{D}$ :

α_{R} = α_{S} \cdot F_{S} + α_{D} \cdot F_{D}

C_{R} = \frac{C_{S} \cdot α_{S} \cdot F_{S} + C_{D} \cdot α_{D} \cdot F_{D}}{α_{R}}

Common Applications

Porter-Duff blend modes are universally used across modern 2D computer graphics systems, including HTML5 Canvas 2D (globalCompositeOperation), SVG compositing, Android (PorterDuff.Mode), Apple Quartz 2D / Core Graphics, and Skia:

Standard Layer Alpha Blending: SrcOver is the default compositing mode for UI rendering, drawing elements over existing backgrounds.
Masking & Clipping: SrcIn clips a source texture into a destination mask shape, while DestIn uses a source brush to mask existing background content.
Punch-outs & Erasing: SrcOut and DestOut create cutouts, transparency holes, or rubber-erase effects where layers intersect.
Texture Overlays: SrcAtop composites source patterns exclusively onto visible parts of an existing destination graphic (e.g. adding specular highlights or textures to an icon without spilling past its boundary).
Background Insertion: DestOver inserts new background graphics behind existing rendered elements.
Clearing Regions: Clear zeroes out pixels to make rectangular or polygonal regions completely transparent.

Summary Table

ID	Name	Class
`Clear`	Clear	`TGraphics32BlenderClear`
`Src`	Source	`TGraphics32BlenderSrc`
`SrcOver`	Source Over	`TGraphics32BlenderSrcOver`
`SrcIn`	Source In	`TGraphics32BlenderSrcIn`
`SrcOut`	Source Out	`TGraphics32BlenderSrcOut`
`SrcAtop`	Source Atop	`TGraphics32BlenderSrcAtop`
`Dest`	Destination	`TGraphics32BlenderDest`
`DestOver`	Destination Over	`TGraphics32BlenderDestOver`
`DestIn`	Destination In	`TGraphics32BlenderDestIn`
`DestOut`	Destination Out	`TGraphics32BlenderDestOut`
`DestAtop`	Destination Atop	`TGraphics32BlenderDestAtop`
`Xor`	Xor	`TGraphics32BlenderXor`

The 12 Porter-Duff Blend Modes

Source

ID: Src
Name: Source
Class: TGraphics32BlenderSrc

The source pixel is copied directly to the destination pixel, completely replacing the destination color and alpha regardless of opacity. The destination pixel is not used as input.

Source Over

ID: SrcOver
Name: Source Over
Class: TGraphics32BlenderSrcOver

The source pixel is composited over the destination pixel. This is the standard, default alpha blending operation where semi-transparent source colors blend smoothly on top of existing background pixels.

Source In

ID: SrcIn
Name: Source In
Class: TGraphics32BlenderSrcIn

The source pixel replaces the destination pixel only where the destination pixel has alpha coverage. Regions of the source lying outside the destination boundary are discarded, effectively using the destination as a clip mask for the source.

Source Out

ID: SrcOut
Name: Source Out
Class: TGraphics32BlenderSrcOut

The source pixel replaces the destination pixel only where the destination pixel is transparent (outside the destination boundary). Regions of the source that overlap the destination are rendered transparent.

Source Atop

ID: SrcAtop
Name: Source Atop
Class: TGraphics32BlenderSrcAtop

The source pixel is composited onto the destination pixel only within the bounds of the destination alpha coverage. The destination backdrop remains visible outside the source, but where they overlap, the source is blended over the destination.

Destination

ID: Dest
Name: Destination
Class: TGraphics32BlenderDest

The destination pixel is left completely untouched. The source pixel is ignored and has no visual effect.

Destination Over

ID: DestOver
Name: Destination Over
Class: TGraphics32BlenderDestOver

The destination pixel is composited over the source pixel. The source pixel appears underneath the existing background, filling in transparent areas of the destination.

Destination In

ID: DestIn
Name: Destination In
Class: TGraphics32BlenderDestIn

The destination pixel is retained only where the source pixel has alpha coverage. Areas of the destination outside the source shape are rendered completely transparent, effectively using the source as a cutting mask.

Destination Out

ID: DestOut
Name: Destination Out
Class: TGraphics32BlenderDestOut

The destination pixel is retained only where the source pixel is transparent. Areas of the destination overlapping the source shape are erased, creating a transparent cutout or hole.

Destination Atop

ID: DestAtop
Name: Destination Atop
Class: TGraphics32BlenderDestAtop

The destination pixel is composited over the source pixel within the bounds of the source alpha coverage. Areas of the source outside the destination remain visible, while overlapping regions blend the destination over the source.

Clear

ID: Clear
Name: Clear
Class: TGraphics32BlenderClear

The target region is cleared to complete transparency ( $00000000$ ). Neither the source nor the destination pixel colors contribute to the result.

Xor

ID: Xor
Name: Xor
Class: TGraphics32BlenderXor

Combines the non-overlapping parts of the source and destination. Regions where both source and destination overlap are cleared to transparent, while non-overlapping portions of both shapes remain visible.

Description ​

Understanding Porter-Duff Compositing ​

Common Applications ​

Summary Table ​

The 12 Porter-Duff Blend Modes ​

Source ​

Source Over ​

Source In ​

Source Out ​

Source Atop ​

Destination ​

Destination Over ​

Destination In ​

Destination Out ​

Destination Atop ​

Clear ​

Xor ​

See also ​