What is the formula for alpha blending for multiple pixels?

Question

I have several RGBA pixels, each of which has an alpha component.

So, I have a list of pixels: (p0 p1 p2 p3 p4 ... pn), where p_0_ is the front pixel and p_n_ is the farthest (behind).

The last (or any) pixel is not opaque, so the resulting mixed pixel can be somehow transparent. I mix from the beginning of the list to the end, and not vice versa (yes, this is raytracing). Therefore, if the result at any time becomes opaque, I can stop with the correct result. I would apply the mixing algorithm as follows: ((((p0 @ p1) @ p2) @ p3) ...)

Can someone suggest me the correct mixing formula not only for R, G and B, but also for component A?

UPD : I wonder how it is possible that for a certain process of mixing colors, we can have many formulas? Is this some kind of approximation? This looks crazy, as for me: the formulas are not so different that we really get efficiency or optimization. Can this explain this?

Answer 1

Alpha blending is one of those themes that has more depth than you think. It depends on what the alpha value means on your system, and if you are mistaken, then you will get results that look normal but display strange artifacts.

Check out the Porter and Duff classic “Digital Image Composition” paper for a great, readable discussion and all formulas. You probably need the “over” operator.

It looks like you're doing something closer to volume rendering. For the formula and links, see the Graphics Frequently Asked Questions section, question 5.16 "How to render a volume?"

Answer 2

There are various possible ways to do this, depending on how the RGBA values ​​really represent the properties of the materials.

Here is a possible algorithm. Start with the final pixel colors lightr=lightg=lightb=0 , lightleft=1 ;

For each r, g, b, the occurring pixel estimates:

 lightr += lightleft*r*(1-a) lightg += lightleft*g*(1-a) lightb += lightleft*b*(1-a) lightleft *= 1-a; 

(RGBA values ​​are normalized between 0 and 1, and I assume that a = 1 means opacity, a = 0 means completely transparent)

If the first pixel encountered is blue with an opacity of 50%, then 50% of the available color will be blue, and the rest is unknown. If a red pixel with an opacity of 50% is next, then 25% of the remaining light will be red, so the pixel will be 50% blue, 25% red. If a green pixel with an opacity of 60% is next, then the pixel will be 50% blue, 25% red, 15% green, with 10% of the remaining light.

Physical materials corresponding to this function are light-emitting, but partially opaque materials: thus, a pixel in the middle of the stack can never darken the final color: it can only prevent the light behind it, increasing the final color (being black and completely opaque).