I
JIM BLINN’S CORNER
Cornpositing, Part I: Theory
lames F. Blinn, California Institute of Technology
Associating a pixel’s color with its opacity is the basis for a
cornpositing function that is simple, elegant, and general. But there
are more reasons than mere prettiness to store pixels this way
My currently favorite journalistic quote comes from a mag-
azine called
Morph’s Outpost on the Digital Frontier.
They
refer to the operation of avoiding jaggies as “anti-aliening.”
Either this was a typo or they thought of the jaggies as aliens.
This got
me
thinking about ways to get rid of these creatures
-the offspring of 3D geometry and raster displays.
B,,, = Bo,d + a(F - Bad
One of the most important anti-aliening tools in computer
graphics comes from a generalization of the simple act of
storing a pixel into a frame buffer. Several people simultane-
ously discovered the usefulness of this operation, so it goes by
several names: matting, image compositing, alpha blending,
overlaying, or lerping. It was most completely codified in a
paper by Porter and Duff,’ where they call it the “over” oper-
ator. In this column I’m going to show a new way to derive
Porter and Duff’s “over” operator and describe some imple-
mentation details that I’ve found useful. In a later column 1’11
go into some of the subtleties of how this operator works with
integer pixel arithmetic.
You can actually use the value of a for a variety of things. In
addition to its anti-aliening function, it can represent transpar-
ent objects or establish a global fade amount. For this reason,
the a value also goes by various names: coverage amount,
opacity, or simply alpha. You can also think of it as 1 minus
the transparency of the pixel. I’m going to call it opacity for
now. If it’s 0, the new pixel is transparent and does not affect
the frame buffer. If it’s 1, the new pixel is opaque and com-
pletely replaces the current frame buffer color.
Next, suppose that we want to layer another object on top
of our image. We just blend in the new object’s color, which
1’11 call G, on top of our current background image using its
opacity p,
The basic idea
The simplest form of compositing goes as follows. Say we
want to overlay a foreground image on some background
image. The foreground image only covers a part of the back-
ground; pixels inside the foreground shape will completely
replace the corresponding background pixels, and pixels
outside the shape leave the background pixels intact.
We can keep on plastering stuff on top of our image until we
are happy. This is the essence of 2-1/2D rendering, also known
as the painter’s algorithm or temporal priority.
For most rendering purposes I’ve been able to provide this
as the only necessary accessing operation into the frame
buffer. But it’s not quite general enough.
Associativity
If we want anti-aliened edges, though, things are a bit more
There is another intriguing generalization here. Both F and
complicated. Pixels on the edge of the shape only partially cover G have an opacity, but B doesn’t. Does it even mean anything
the background pixels. If the shape is to be properly anti- to composite into a pixel that already has an opacity? Yes.
aliened, we must blend the foreground color, F, and background
Consider the following scenario. Suppose we have the images
color, B, according to the fraction CX. This value represents the
F and G, but haven’t yet decided what to use for a back-
percentage of the pixel covered by color F. The standard way to ground. Let’s see if we can merge F and G into one image, H,
calculate this is to find the geometric area covered by F. This that we can store away and later overlay on B to get the same
implements a simple box filter for anti-aliening. More accurate result. If we denote the compositing operation with the sym-
filters
can
be used, but 1’11 stick to the box for now. bol &, what we want is
Now let’s get down to algebra. F and B are each three-
element vectors representing the red, green, and blue compo-
nents of a pixel. Ordinary vector algebra applies. The new
color in the frame buffer is
(B&F)&G=B&(F&G)
In other words we want to make compositing
associative.
B,,, = (1 - a) Bold + aF
which can be more efficiently calculated as
How can we define H = F & G to make this work out? We
want to calculate a new pixel color H and opacity yin terms of
colors F and G and their own opacities a and 0. Plug in the
definitions:
September 1994
0272.17.16/94/$04.00 0 1994 IEEE
83