This page provides an interactive SVG model of the geometric-based Porter & Duff alpha compositing model. It is referenced from this article.
The geometric principles of rendering with partial transparency were first described in the seminal 1984 paper Compositing Digital Images, by Thomas Porter and Tom Duff, who both worked for Lucasfilm at the time. Although the mathematics of transparency rendering (you can find the specifications in clause 11 of ISO 32000) can appear scary, the basics are relatively straightforward.
Each object or pixel has an associated alpha channel, a numerical value that represents the degree of transparency. This ranges from 0.0 (fully transparent, a.k.a. invisible) to 1.0 (fully opaque, obscuring everything below). Since graphic objects are painted in the order in which they appear in a content stream (known as Z-order), and since objects can overlap, a partially transparent object on top of other objects will show through some proportion of those underlying objects. If multiple overlapping objects all have partial transparency then multiple objects in the "stack" below will be partially visible. Note also that the level of alpha (transparency) is independent of the color of the object - any color may be partially transparent.
Although Porter & Duff defined multiple compositing operators, PDF uses the OVER operator to calculate the colour that results from blending a foreground and background object (and where the background object itself may have been the result of compositing other objects together lower in the Z-order). The OVER operator is effectively what intuition tells us will happen if, for example, we consider the result of stacking layers of partially transparent cellophane over an object.
Porter & Duff explain their alpha compositing model in terms of geometric sub-pixel contributions, where each pixel includes varying contributions of foreground color, foreground alpha, background color, and background alpha. The interactive SVG model below aids in understanding how the conceptual sub-pixel contributions from both the foreground and background objects contribute to generate a final appearance.
Instructions
Drag the red slider handles to alter the proportion of alpha in the foreground (vertical) or background (horizontal) objects, and watch the final rendered appearance change in the lower right corner. The central rectangles show the geometric contributions from each of the elements that combine in the final appearance:
Last modified: 24 November 2021