如何在webgl中设置半透明颜色

Question

关于对象颜色的教程:http://learningwebgl.com/blog/?p=134

下面的代码将创建一个红色方块:

squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = []
for (var i=0; i < 4; i++) {
  colors = colors.concat([1.0, 0.0, 0.0, 1.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

可以，但是如果我这样修改代码:

colors = colors.concat([1.0, 0.0, 0.0, 0.5]);

那么这个物体就不是半透明的，而是粉红色的。我不知道，为什么它是粉红色的。对象的颜色应该介于绿色和粉色之间，因为背景是绿色的:

gl.clearColor(0.0, 1.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

Answer 1

听起来你可能没有启用混合。尝试在初始化代码中添加以下行:

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

看看是否会得到不同的结果。混合模式可能不完全是你想要的，但它至少应该显示你是否工作。

有关更深入的混合细分，请查看学习WebGL第8课。