Математические правила для background-blend-mode
чтобы реализовать некоторые функции CSS в WebGL, я пытаюсь понять именно их реализацию.
В настоящее время моя проблема касается режима микширования.
<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>палитра цветов на скриншоте:
102/255 = 0,4
179/255 = 0,7
99/255 = 0,388...
Я применяю теорию, описанную здесь
https://drafts.fxtf.org/compositing/#blending
... как я думал, я понял это:
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
....не могу найти теоретический расчет, соответствующий результату на скриншоте
Ответы 1
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
В моем примере :
как = 0,7
аб = 0,4
Кс=(0,1,153/255)
Кб=(1,0,51/255)
B(Cb,Cs) = Abs(1-0, 0-1, (153-51)/255) = (1,1,0,4)
так что
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)
ао*Со= (0,4, 0,7, 0,388)