How is transparency actually implemented ?

Question

Given two images A,B I want a third image C which is as if B had transparency of t=0.5 and placed on top of A.

How is C calculated in reality and how n affects it ? I am not interested in any program or pseudo code I just want to know the basic rationale.

One way I think is C is nothing but alternating pixels of A and B. What are the other ways ?

Answer 1

I am not sure if by "reality" you mean source code that hacks such effect, or how it works in nature.

In code

You can overlay images transparently by a simple linear interpolation of both input images:

Color lerp (Color lhs, Color rhs, real f) {
    return (1-f)*lhs + f*rhs;
}

Image overlay_transparent (Image a, Image b, real f) {
    assert (a.width == b.width);
    assert (a.height == b.height);

    Image output;
    for_each (y : 0 .. a.height)
        for_each (x : 0 .. a.width)
            output(x,y) = lerp(a(x,y), b(x,y), f);
    return output;
}

You could then do a 50% overlay by calling overlay_transparent (a,b, 0.5).

In reality

Transparent materials reflect a fraction of the incoming light, some fraction is absorbed, and another fraction is transmitted through the material.

A perfect mirror reflects all of the incoming light specularly, each particles outgoing vector solely depends on its incoming vector.

A perfectly diffuse material reflects all of the incoming light, but for each incoming vector there are infinitely many possible outoing vectors within the hemisphere over the hit-point.

A perfectly absorbing material is black like The Void itself.

A perfectly transmitting material that does not perturb particles on their way through the material would be invisible.

All of these perfect materials are not found in nature so far, and most real world materials are a mix of them.

Note that this is a science in itself; for deeper knowledge, you could begin studying Realistic Image Synthesis and Path Tracing, as well as the concept of BRDF/BSDF/... .

Answer 2

For each pixel, the value of each component in C (Red, Green Blue) is the average of the values for the components of A and B.

If the transparency is not 50% a weighted average is used.

If you use alternating pixels the result will not be smooth. If A is all black and B is all wight alternating pixels would give a striped pattern while average RGB values on each pixel gives an even 50% gray surface.

Answer 3

The color and optionally transparency of each pixel of A and B is combined according to the weight.

If the transparency is 0.75, then typically 25% of the color values from B and 75% of the color values from A (the underlying image) would be used.

Basically, the red, green, blue, and optionally the alpha channels are each calculated like this, and then recombined to form one resulting pixel.

Example:

A = [1 0 0]  <-- red
B = [0 1 0]  <-- blue
a = 0.75 (which means B is more transparent than it is opaque)

C = [
    0.75 = 1 * 0.75 + 0 * 0.25 (red component)
    0.25 = 0 * 0.75 + 1 * 0.25 (green component)
    0.00 = 0 * 0.75 + 0 * 0.25 (blue component)
] //       A          B

If the images have alpha channels on their own, the calculation becomes more complex.