How to blend 2 transparency layers?
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
math alpha alphablending rgba alpha-transparency
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
add a comment |
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
math alpha alphablending rgba alpha-transparency
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
add a comment |
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
math alpha alphablending rgba alpha-transparency
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
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
math alpha alphablending rgba alpha-transparency
math alpha alphablending rgba alpha-transparency
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
edited Nov 15 '18 at 15:47
MaximPro
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
asked Nov 15 '18 at 14:41
MaximProMaximPro
9914
9914
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
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 8:24
@MaximPro In the first equation block I showed that the coefficient ofCis(1-s) * (1-t); this corresponds to"1 - A"in the Wikipedia equation, sinceCcorresponds to"B"as the background colour. Therefore the effective alphar(corresponding to"A") is 1 minus this coefficient.
– meowgoesthedog
Nov 16 '18 at 8: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
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321906%2fhow-to-blend-2-transparency-layers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
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 8:24
@MaximPro In the first equation block I showed that the coefficient ofCis(1-s) * (1-t); this corresponds to"1 - A"in the Wikipedia equation, sinceCcorresponds to"B"as the background colour. Therefore the effective alphar(corresponding to"A") is 1 minus this coefficient.
– meowgoesthedog
Nov 16 '18 at 8: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
|
show 3 more comments
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.
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
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 8:24
@MaximPro In the first equation block I showed that the coefficient ofCis(1-s) * (1-t); this corresponds to"1 - A"in the Wikipedia equation, sinceCcorresponds to"B"as the background colour. Therefore the effective alphar(corresponding to"A") is 1 minus this coefficient.
– meowgoesthedog
Nov 16 '18 at 8: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
|
show 3 more comments
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.
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
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.
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
edited Nov 15 '18 at 15:53
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
answered Nov 15 '18 at 15:48
meowgoesthedogmeowgoesthedog
10.4k41528
10.4k41528
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 8:24
@MaximPro In the first equation block I showed that the coefficient ofCis(1-s) * (1-t); this corresponds to"1 - A"in the Wikipedia equation, sinceCcorresponds to"B"as the background colour. Therefore the effective alphar(corresponding to"A") is 1 minus this coefficient.
– meowgoesthedog
Nov 16 '18 at 8: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
|
show 3 more comments
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 8:24
@MaximPro In the first equation block I showed that the coefficient ofCis(1-s) * (1-t); this corresponds to"1 - A"in the Wikipedia equation, sinceCcorresponds to"B"as the background colour. Therefore the effective alphar(corresponding to"A") is 1 minus this coefficient.
– meowgoesthedog
Nov 16 '18 at 8: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
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 8:24
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 8: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 8:48
@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 8:48
Once again, I thoughtfully read your post and figured out, thank you.
– MaximPro
Nov 16 '18 at 12:53
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
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
@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
|
show 3 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321906%2fhow-to-blend-2-transparency-layers%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
