Issue
in order to implement some CSS functions in WebGL, I am trying to understand precisely their implementations.
Currently my problem concerns the mix-blend-mode.
<div
style="
width: 100px;
height: 100px;
background-blend-mode: difference;
background-image:
linear-gradient(
rgba(0,255,153,0.7), rgba(0,255,153,0.7)),
linear-gradient(
rgba(255,0,51,0.4), rgba(255,0,51,0.4));
background-color: rgba(0,0,0,1);
"
></div>
color picker on screenshot is:
102/255 = 0.4
179/255 = 0.7
99/255 = 0.388...
I apply the theory explained here
https://drafts.fxtf.org/compositing/#blending
...as I thought I understood it :
Cb = (1,0,0.2) and ab = 0.4
Cs = (0,1,0.6) and as = 0.7
Cm = | Cb - Cs | = (1,1,0.4) { I'm not sure at all...}
we replace Cs by Cm :
Cs = (1,1,0.4)
co = Cs * as + (0,0,0)*ab*(1-as)
co = (1,1,0.4) * 0.7
co = (0.7 , 0.7 , 0.28)
ao = as + ab * (1-as)
ao = 0.7 + 0.4 * (1-0.7)
ao = 0.82
....I can't find the theoretical calculation corresponding to the result of the screenshot
Solution
https://www.w3.org/TR/compositing-1/#blending
ao x Co = as x (1-ab) x Cs + as x ab x B(Cb,Cs) + (1-as) x ab x Cb
In my example :
as=0.7
ab = 0.4
Cs=(0,1,153/255)
Cb=(1,0,51/255)
B(Cb,Cs) = Abs( 1-0 , 0-1 , (153-51)/255 ) = (1,1,0.4)
so,
ao x Co=0.7 x 0.6 x (0,1,153/255) + 0.7 x 0.4 x (1,1,0.4) + 0.3 x 0.4 x (1,0,51/255)
ao*Co= ( 0.4 , 0.7 , 0.388)
Answered By - Oceangermanique
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.