Transparency & Alpha

Secret Maryo Chronicles by Florian Richter & the SMC Team, GPL licensed

Alpha

Originated in early paintbox programs
Formalized in Porter & Duff's "Compositing Digital Images", SIGGRAPH '84

Fourth component of colors (RGBA)
Used for semi-transparent objects
Represents opacity

alpha
1.0	fully opaque
0.5	half transparent
0.0	fully transparent

Blending

Combines color of object being drawn with color in frame buffer
Makes drawn object appear transparent

Most common method:

R = A1 * R1 + (1-A1) * R2
G = A1 * G1 + (1-A1) * G2
B = A1 * B1 + (1-A1) * B2

e.g. if alpha is 0.25:

R = 0.25 * R1 + 0.75 * R2
G = 0.25 * G1 + 0.75 * G2
B = 0.25 * B1 + 0.75 * B2

Blending

Many different formulas for blending colors can be used

Formula is defined by glBlendFunc() function

R = A1 * R1 + (1-A1) * R2
G = A1 * G1 + (1-A1) * G2
B = A1 * B1 + (1-A1) * B2

is defined by:

  glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)

Blending

Enable blending		`glEnable(GL_BLEND)`

Set the blending function		`glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)`

Assign alpha < 1		`glColor4f(1, 0, 0, 0.5)`

BlendFunc is applied to pixels as they are drawn - blending incoming color with color in the frame buffer

Example: alpha.py

Smooth-shaded Alpha

Alpha is treated like any other color component

If alpha differs at each vertex, it will be smoothly interpolated.
Can give objects soft edges.

Examples: smoothalpha.py alphawheel.py

Time-varying Alpha

Changing alpha over time can make an object a fade in or out

Example: fade.py

Texture Alpha

Use 4 channel texture image

Can be used to "cut out" a texture image - creates complex shapes with simple geometry

RGB	Alpha

Example: texalpha.py

Chroma Keying

Used in film & video to composite live actors with other imagery (video or digital)

e.g. TV weatherman, Star Wars virtual sets

Can be done digitally by finding a background color, and setting alpha to 0 for those pixels

Example code: chromakey.py

Other Blend Functions

General blending formula is:

R = SourceFactor * R_s + DestinationFactor * R_d
G = SourceFactor * G_s + DestinationFactor * G_d
B = SourceFactor * B_s + DestinationFactor * B_d

(R_s, G_s, B_s) is the source color (object being drawn)
(R_d, G_d, B_d) is the destination color (color already in the framebuffer)

SourceFactor and DestinationFactor are defined by glBlendFunc()

Other Blend Functions

Factor name	Computed factor
GL_ZERO	0
GL_ONE	1

GL_SRC_ALPHA	A_s
GL_ONE_MINUS_SRC_ALPHA	1 - A_s

GL_DST_ALPHA	A_d
GL_ONE_MINUS_DST_ALPHA	1 - A_d

GL_CONSTANT_ALPHA	A_c
GL_ONE_MINUS_CONSTANT_ALPHA	1 - A_c

GL_SRC_COLOR	(R_s, G_s, B_s)
GL_ONE_MINUS_SRC_COLOR	(1 - R_s, 1 - G_s, 1 - B_s)

GL_DST_COLOR	(R_d, G_d, B_d)
GL_ONE_MINUS_DST_COLOR	(1 - R_d, 1 - G_d, 1 - B_d)

GL_CONSTANT_COLOR	(R_c, G_c, B_c)
GL_ONE_MINUS_CONSTANT_COLOR	(1 - R_c, 1 - G_c, 1 - B_c)

GL_SRC_ALPHA_SATURATE	min(A_s, 1 - A_d)

Filters

Blending can be used to apply a color filter to the whole scene

Draw a square that covers the entire window, with the appropriate blending function

 # Dim the scene 

glBlendFunc(GL_ZERO, GL_SRC_ALPHA)          
glColor4f(1.0, 1.0, 1.0, 0.5)

Example: filter.py

Filters

# Apply a purple filter glBlendFunc(GL_ZERO, GL_SRC_COLOR) glColor4f(1.0, 0.0, 0.5, 1.0)
# Invert all the colors glBlendFunc(GL_ONE_MINUS_DST_COLOR, GL_ZERO) glColor4f(1.0, 1.0, 1.0, 1.0)

This document is by Dave Pape, and is released under a Creative Commons License.