下面的代码绘制了三个三角形alpha值 0.5 与{premultipliedAlpha: false}.
const gl = document.querySelector('canvas').getContext('webgl', {premultipliedAlpha: false});
const canvasWidthHeight = 300;
gl.clearColor(1, 0, 0, 0.4);
// gl.clear(gl.COLOR_BUFFER_BIT);
const vertexShaderSource = `
attribute vec2 position;
uniform vec2 resolution;
// All shaders have a main function
void main() {
vec2 glSpacePosition = (position / resolution) * 2.0 - 1.0;
gl_Position = vec4(glSpacePosition * vec2(1, -1), 0, 1);
}
`;
const fragmentShaderSource = `
precision mediump float;
uniform vec4 color;
void main() {
gl_FragColor = color;
}
`;
function createShader(gl, type, shaderSource) {
const shader = gl.createShader(type);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!success) {
console.warn(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!success) {
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
return program;
}
const program = createProgram(gl, vertexShader, fragmentShader);
// We created a program on GPU, so the next step is supplying data.
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
const resolutionUniformLocation = gl.getUniformLocation(program, 'resolution');
const colorUniformLocation = gl.getUniformLocation(program, 'color');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.useProgram(program);
gl.uniform2f(resolutionUniformLocation, canvasWidthHeight, canvasWidthHeight);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
function drawRandomizedTriangles() {
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0, 0,
0, canvasWidthHeight,
canvasWidthHeight, 0
]), gl.STATIC_DRAW);
gl.uniform4f(colorUniformLocation, 0, 0, 1, 0.5);
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0 + 50, 0,
0 + 50, canvasWidthHeight,
canvasWidthHeight + 50, 0
]), gl.STATIC_DRAW);
gl.uniform4f(colorUniformLocation, 1, 0, 0, 0.5);
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0 + 100, 0,
0 + 100, canvasWidthHeight,
canvasWidthHeight + 100, 0
]), gl.STATIC_DRAW);
gl.uniform4f(colorUniformLocation, 1, 1, 1, 0.5);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
drawRandomizedTriangles();body {
display: flex;
align-items: center;
justify-content: center;
}
canvas {
background: green;
}<canvas width="300" height="300"></canvas>Result in Chrome:
Result in Firefox:
Firefox 中的结果正是我所期望的。
我认为这与 WebGL 的混合无关，因为它是关于混合的gl_FragColor使用绘图缓冲区而不是浏览器 DOM，在本例中为绿色背景 Canvas。
（这个想法是基于我对WebGL如何工作的理解）
Also: In Chrome, if the gl_FragColor.rgb is vec3(1.0, 1.0, 1.0), no matter what the gl_FragColor.a is, as long as a is not 0, the output color is pure white(when the rgb is other values, it will behave much differently).
Here is the code pen https://codepen.io/davidguan/pen/mqWbZX for the image above(don't want to pollute this question with too much code).
更新 1：我相信这不是混合问题，如果我们通过以下方式启用混合：
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
The result will like this:
这个问题我自己来回答一下。
正如 @gman 在评论区所说，这是 chromium 中的一个 bug。
这里是bug link https://bugs.chromium.org/p/chromium/issues/detail?id=599285（再次感谢@gman）。