Compositing Colored Light with Alpha Blending

Stained glass works by stacking colored transparency. When you hold ruby glass over cobalt blue and shine light through, you don’t get purple—you get the product of their transmission curves, the light that survives both filters. Thomas Porter and Tom Duff formalized this in 1984 with compositing algebra: each pixel carries color and alpha (opacity), and you combine layers with weighted sums.

The “over” operator is the workhorse: foreground color at alpha A covers background color at alpha B, and the math is result = A + B×(1-A). If red glass at 70% opacity sits over blue at 50%, you see mostly red with a hint of blue showing through the gaps.

data class RGBA(val r: Int, val g: Int, val b: Int, val a: Float)

fun over(fg: RGBA, bg: RGBA): RGBA {
    val a = fg.a + bg.a * (1 - fg.a)
    val r = ((fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / a).toInt()
    val g = ((fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / a).toInt()
    val b = ((fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / a).toInt()
    return RGBA(r, g, b, a)
}

val ruby = RGBA(180, 30, 30, 0.7f)
val cobalt = RGBA(30, 60, 180, 0.5f)
println(over(ruby, cobalt))  // RGBA(r=140, g=38, b=68, a=0.85)

Forth does the same arithmetic on the stack, pixel components as 16-bit fixed-point for speed:

: OVER-BLEND ( fr fg fb fa br bg bb ba -- r g b a )
  >R >R >R >R               \ save bg to return stack
  DUP 256 SWAP - R> * 256 / +   \ b = fb*fa + bb*(256-fa)/256
  SWAP DUP 256 SWAP - R> * 256 / +  \ g
  SWAP DUP 256 SWAP - R> * 256 / +  \ r
  SWAP 256 SWAP - R> * 256 / +      \ a
;

180 30 30 179  30 60 180 128  OVER-BLEND  \ 140 38 68 217

The Amiga’s hardware blitter did this in silicon. You’d set up source and destination, write an alpha mask, and the copper would composite scanlines during vertical blank. Stained glass became real-time.