vraie canvas

3 éléments superposés avec des couleurs

2 éléments superposés avec des couleurs

canvasConcret1

clearcolor et fragcolor, mais le blending n'est pas activé

capture écran = 0.86 0.56 0.81
source : fragcolor = 0.80 0.20 0.698 0.50
destination : canvas 0.608 0.608 0.608 0.20
co = Cs*as+Cb*ab*(1-as)
co = [0.80, 0.20, 0.698][i]*0.50  +  [0.608,0.608,0.608][i]*0.2*0.5;
co=[0.461, 0.161, 0.41];
ao = 0.50 + 0.20*(1-0.50);
ao =0.6
compositing avec le fond blanc
co = [0.461, 0.161, 0.41][i] + [1,1,1][i]*1*(1-0.6); 
co= 0.861 0.561 0.81
Dans le calcul, on voit que le clearcolor - gl.clearColor(0.2,0.4,0.5,0.8) - n'est pas pris en compte. C'est 
parce que le blending n'est pas activé.
  	

canvasConcret2

on enlève le clearColor. ça ne change pas la couleur du point.
Sans blending, cette couleur est composée avec celle du canvas.
La couleur du point est la même que précédemment

canvasConcret3

gl.clearColor(0.2,0.4,0.5,0.8)
gl.drawArrays(gl.POINTS, 0, 2);
couleur 1er point : 0.8 0.2 0.698 0.5
couleur 2e point : 0.6 0.4 0.2 0.6
source : couleur 2e point : 0.6 0.4 0.2 0.6
destination : couleur canvas 0.608 0.608 0.608 0.20
co = [ 0.6 , 0.4 , 0.2, ][i]*0.6 + [0.61,0.61,0.61][i]*0.20*(1-0.6);
co = [0.41, 0.29, 0.17]
ao = 0.6 + 0.2 * ( 1- 0.6);
ao = 0.68;
composition avec le fond blanc
co_fond = [0.41, 0.29, 0.17][i] + [1,1,1][i]*1*(1-0.68);
co_fond = 0.73 0.61 0.49
quand il n'y a pas de blending, le dernier point est composé avec le fond

canvasConcret4

gl.blendFuncSeparate(gl.ONE,gl.ZERO,gl.ZERO,gl.ONE);
gl.clearColor(0.0,1.0,0.0,0.7);
gl.fragColor 0.8, 0.2, 0.698 , 0.5 gl.drawArrays(gl.POINTS, 0, 1); copie ecran
0.86 0.44 0.79
Cs = [0.8 , 0.2 , 0.7][i];
as = 0.5;
Cb= [ 0,1,0];
ab=0.7;
blending :
RGB = Cs * ONE + Cb * ZERO
= Cs
A = as * ZERO + ab * ONE
= ab
Cs <= (1-ab)*Cs + ab*B
<= (1-ab)*Cs + ab*Cs
(Cs,ab) sur ( 1 1 1 1)
co=[0.8, 0.2, 0.698 ][i]*0.7+[1,1,1][i]*1.0*(1-0.7)
co = 0.86 0.44 0.786
pareil que copieecran

canvasConcret5

gl.blendFuncSeparate(gl.ONE,gl.ONE,gl.ZERO,gl.ONE); gl.clearColor(0.0, 0.4, 0.0, 0.7); gl.fragColor 0.8, 0.2, 0.698 , 0.5 gl.drawArrays(gl.POINTS, 0, 1); copiie ecran 0.86 0.72 0.79 Cs = [0.8, 0.2, 0.7][i] as = 0.5; Cb = [0, 0.4, 0][i] ab = 0.7 blending RGB = Cs + Cb = [0.8, 0.6, 0.7][i] A = ab = 0.7 ([0.8, 0.6, 0.7][i], 0.7) sur (1,1,1,1) co = [0.8, 0.6, 0.7][i]*0.7 + [1,1,1][i]*1.0*(1-0.7) co = 0.86 0.72 0.79

canvasConcret6

gl.blendFuncSeparate(gl.DST_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ZERO,gl.ONE);
gl.clearColor(0.0, 0.4, 0.0, 0.7);
gl.fragColor 0.8, 0.2, 0.698 , 0.5
gl.drawArrays(gl.POINTS, 0, 1);
copiie ecran
0.694 0.541 0.643
Cs = [0.8, 0.2, 0.7][i]
as = 0.5;
Cb = [0, 0.4, 0][i]
ab = 0.7
blending
RGB = (sourceColor * srcRGB) + (destinationColor * dstRGB)
RGB = Cs * ab + Cb*(1-as)
= [0.8, 0.2, 0.7][i] *0.7 + [0, 0.4, 0][i]*(1-0.5)
= [0.56, 0.34, 0.49][i]
A = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)
A = ab
= 0.7
( [0.56, 0.34, 0.49][i], 0.7) sur (1,1,1,1)
co = [0.56, 0.34, 0.49][i]*0.7 + [1,1,1][i]*1*(1-0.7)
= 0.69 0.538 0.643

exemple 7

gl.blendFuncSeparate(gl.DST_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ZERO,gl.SRC_ALPHA);
gl.clearColor(0.0, 0.4, 0.0, 0.7);
gl.fragColor 0.8, 0.2, 0.698 , 0.5
gl.drawArrays(gl.POINTS, 0, 1);
copiie ecran
0.847 0.773 0.824
on vérifie avec la théorie
Cs = [0.8, 0.2, 0.7];//
as = 0.5;//
Cb = [0, 0.4, 0];//
ab = 0.7;//
//RGB = (sourceColor * srcRGB) + (destinationColor * dstRGB)
//RGB = sourceColor * DST_ALPHA + destinationColor * ONE_MINUS_SRC_ALPHA
RGB = Cs[i] * ab + Cb[i] * (1-as);//
RGB = [0.56, 0.34 , 0.49];
// A = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)
// A = destinationAlpha * SRC_ALPHA
A = ab * as
A = 0.7 * 0.5
A = 0.35
enfin, on compose (RGB,A) sur le fond blanc co = RGB * A + 1-A co = [0.56, 0.34 , 0.49][i]*0.35 + 1-0.35 co = [0.846, 0.769, 0.8215] // PAREIL QUE COPIE ECRAN YEEEEES
en dehors du point à gauche en bas, la couleur est "simple alpha composited"
la source étant le clearColor, la destination, la couleur CSS du canvas

exemple 8

gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.clearColor(0.0, 0.4, 0.0, 0.7);
gl.fragColor 0.8, 0.2, 0.698 , 0.5
gl.drawArrays(gl.POINTS, 0, 1);
copiie ecran
....
on vérifie avec la théorie
Cs = [0.8, 0.2, 0.7];//
as = 0.5;//
Cb = [0, 0.4, 0];//
ab = 0.7;//
//RGB = (sourceColor * srcRGB) + (destinationColor * dstRGB)
//RGB = sourceColor * SRC_ALPHA + destinationColor * ONE_MINUS_SRC_ALPHA
RGB = Cs[i] * as + Cb[i] * (1-as);//
RGB = [0.4, 0.3 , 0.35];
// A = sourceAlpha * ONE + destinationAlpha * (1-AS)
A = as + ab * (1-as)
A = 0.5 + 0.7 * 0.5
A = 0.85
enfin, on compose (RGB,A) sur le fond blanc co = RGB * A + 1-A co = [0.4, 0.3, 0.35][i]*0.85 + 1-0.85 co = [0.49, 0.405, 0.4475] // PAREIL QUE COPIE ECRAN YEEEEES
en dehors du point à gauche en bas, la couleur est "simple alpha composited"
la source étant le clearColor, la destination, la couleur CSS du canvas