0

For example we have 2 transparency layers: first is black (0, 0, 0, 0.75) and second is white (255, 255, 255, 0.64). I don't know how to blend them.

But I know how to blend one opaque and one transparent layers. It's look like this: https://wikimedia.org/api/rest_v1/media/math/render/svg/1e35c32f13d5eedc7ac21e9e566796dd048a31e6

MaximPro
  • 563
  • 8
  • 21

1 Answers1

1

Assume that the background colour is (C, 1) (RGB, A), the first layer is (A, s) and the second layer (B, t). Applying the blending equation twice:

C' = t * B + (1-t) * [s * A + (1-s) * C]

     = [t * B + (1-t) * s * A] + (1-t) * (1-s) * C

We can see that the new effective blending coefficient is 1 - (1-s) * (1-t). To get the combined transparency colour, divide the first term by this:

r := 1 - (1-s) * (1-t)

D := [t * B + (1-t) * s * A] / r

--> C' = r * D + (1-r) * C

i.e. the new effective transparency layer is given by (D, r).

In your example the values would be D = (179, 179, 179) and r = 0.91.

meowgoesthedog
  • 14,670
  • 4
  • 27
  • 40
  • thx, but can you explain this formula: `r := 1 - (1-s) * (1-t)` I understand what is it general alpha. But I don't understand operations in this formula. – MaximPro Nov 16 '18 at 08:24
  • @MaximPro In the first equation block I showed that the coefficient of `C` is `(1-s) * (1-t)`; this corresponds to `"1 - A"` in the Wikipedia equation, since `C` corresponds to `"B"` as the background colour. Therefore the effective alpha `r` (corresponding to `"A"`) is 1 minus this coefficient. – meowgoesthedog Nov 16 '18 at 08:48
  • Once again, I thoughtfully read your post and figured out, thank you. – MaximPro Nov 16 '18 at 12:53
  • I still have one more question. Why do we divide on effective alpha (`/r`)? Why not multiply? – MaximPro Nov 16 '18 at 18:55
  • @MaximPro sorry for the late reply. It is because the multiplication you are talking about happens during *mixing*, whereas we need to compute the effective foreground colour, which requires the reverse process. Anyway the algebra itself should make it clear. – meowgoesthedog Nov 16 '18 at 21:54
  • But you did not explain why division is used. – MaximPro Nov 16 '18 at 22:27
  • @MaximPro **I did**. We must find the foreground colour from the mixed colour, which is the exact **reverse** process to the mixing equation you linked; hence we must divide by the alpha `"A"` (`= r`) instead of multiply. In terms of the algebra above, we equate `[t * B + (1-t) * s * A]` to the foreground mixing term `"F * A"` (`= r * D`), so to obtain `D` we must divide by `r`. – meowgoesthedog Nov 16 '18 at 22:36