Game Development Reference
In-Depth Information
Enter
alpha blending
. Well, in Bob's case it's technically called alpha masking, but that's just a
subset of alpha blending. Graphics software usually lets us not only specify the RGB values of
a pixel, but also indicate its translucency. Think of it as yet another component of a pixel's color.
We can encode it just like we encoded the red, green, and blue components.
We hinted earlier that we could store a 24-bit RGB triplet in a 32-bit integer. There are 8 unused
bits in that 32-bit integer that we can grab and in which we can store our alpha value. We can
then specify the translucency of a pixel from 0 to 255, where 0 is fully transparent and 255 is
opaque. This encoding is known as ARGB8888 or BGRA8888, depending on the order of the
components. There are also RGBA8888 and ABGR8888 formats, of course.
In the case of 16-bit encoding, we have a slight problem: all of the bits of our 16-bit short are
taken up by the color components. Let's instead imitate the ARGB8888 format and define an
ARGB4444 format analogously. That leaves 12 bits for our RGB values in total—4 bits per
color component.
We can easily imagine how a rendering method for pixels that's fully translucent or opaque
would work. In the first case, we'd just ignore pixels with an alpha component of zero. In the
second case, we'd simply overwrite the destination pixel. When a pixel has neither a fully
translucent nor fully opaque alpha component, however, things get a tiny bit more complicated.
When talking about blending in a formal way, we have to define a few things:
ï?®
Blending has two inputs and one output, each represented as an RGB triplet
(C) plus an alpha value (
a
).
ï?®
The two inputs are called
source
and
destination
. The source is the pixel
from the image we want to draw over the destination image (that is, the
framebuffer). The destination is the pixel we are going to overdraw (partially)
with our source pixel.
ï?®
The output is again a color expressed as an RGB triplet and an alpha value.
Usually, we just ignore the alpha value, though. For simplicity we'll do that in
this chapter.
ï?®
To simplify our math a little bit, we'll represent RGB and alpha values as
floats in the range of 0.0 to 1.0.
Equipped with those definitions, we can create so-called blending equations. The simplest
equation looks like this:
red = src.red * src.alpha + dst.red * (1 - src.alpha)
blue = src.green * src.alpha + dst.green * (1 - src.alpha)
green = src.blue * src.alpha + dst.blue * (1 - src.alpha)
src
and
dst
are the pixels of the source and destination we want to blend with each other. We
blend the two colors component-wise. Note the absence of the destination alpha value in these
blending equations. Let's try an example and see what it does:
src = (1, 0.5, 0.5), src.alpha = 0.5, dst = (0, 1, 0)
red = 1 * 0.5 + 0 * (1 - 0.5) = 0.5
blue = 0.5 * 0.5 + 1 * (1 - 0.5) = 0.75
red = 0.5 * 0.5 + 0 * (1 - 0.5) = 0.25
