webgl - html和webgl混合

Question

我试图了解如何从画布上的 webgl 绘图和 html 页面上的结果计算颜色。

这是一个绘制两个正方形的代码。第二个的结束从第一个开始。

我使用 Color Cop 应用程序检查浏览器中生成的颜色。（一开始我制作了我用 Gimp 检查过的截图）

'use strict';

let canvas=document.querySelector('#canvas');

let gl=canvas.getContext("webgl",{
    premultipliedAlpha:false // straight Alpha
});

let vs=`
  uniform vec2 pos_u;

  void main() {
    gl_Position=vec4(pos_u,0.,1.);
    gl_PointSize = 63.;
  }
`;

let fs=`
  precision highp float;
  
  uniform vec4 col_u;

  void main() {
    gl_FragColor = col_u ;
  }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vs);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fs);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.viewport(0,0,canvas.width,canvas.height);

gl.useProgram(program);

let colLoc = gl.getUniformLocation(program,'col_u');
let posLoc = gl.getUniformLocation(program,'pos_u');

gl.clearColor(0.4,0,0.3,0.8);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.blendFunc(gl.SRC_COLOR,gl.ONE);
gl.enable(gl.BLEND);

// FIRST SQUARE
let r=0.5;
let g=0.2;
let b=0;
let a=0.4;
gl.uniform4f(colLoc,  r,g,b,a);

gl.uniform2f(posLoc,-1+251/300,-1+149/150); 
gl.drawArrays(gl.POINTS,0,1);

// SECOND SQUARE
r=0.4;
g=0/255;
b=76/255; 
a=0.3;
gl.uniform4f(colLoc,  r,g,b,a);

gl.uniform2f(posLoc,-1+299/300,-1+149/150); 
gl.drawArrays(gl.POINTS,0,1);

#canvas{
    background-color:rgb(255,255,255);

  }

<canvas id="canvas"></canvas>

这是第一个正方形的webgl混合

颜色(RGBA)	sourceFactor (=fragColor)	sfactor(=fragColor)	目的地颜色（=清除颜色）	dfactor =（一）
0,65	0,5	0,5	0,4	1
0,04	0,2	0,2	0,0	1
0,30	0,0	0,0	0,3	1
0,96	0,4	0,4	0,8	1

...和 ​​html 混合

简单的 Alpha 合成

co = Cs * as + Cb * ab * ( 1 – as )
ao = as + ab * ( 1 – as )

合作	彩色警察	CS	Cb（=画布颜色）
0,664	0,663	0,650	1
0,078	0,078	0,040	1
0,328	0,325	0,300	1

敖	彩色警察	作为	抗体
1		0,96	1

Color Cop 返回的值接近我的计算

这是第一个正方形的第二个正方形的 webgl 混合

颜色(RGBA)	sourceFactor (=fragColor)	sfactor(=fragColor)	目的地颜色（=清除颜色）	dfactor =（一）
0,824	0,4	0,4	0,664	1
0,078	0,0	0,0	0,078	1
0,417	0,298	0,298	0,328	1
1,0	0,3	0,3	0,1	1

...和 ​​html 混合

简单的 Alpha 合成

co = Cs * as + Cb * ab * ( 1 – as )
ao = as + ab * ( 1 – as )

合作	彩色警察	CS	Cb（=画布颜色）
0,824	0,812	0,824	1
0,078	0,039	0,078	1
0,417	0,388	0,417	1

敖	彩色警察	作为	抗体
1		1,00	1

在那里，co 和 Color Cop 之间的值更加不同

为什么画布上的像素颜色值与理论值如此接近，而其他像素上的像素颜色差异更大？...毫无疑问，我没有很好地理解这个理论

标签： webglblending