如何在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); 

然後看看您是否得到不同的結果。混合模式可能不是你想要的，但它至少應該告訴你它是否工作。

有關混合的更深入細分，請查看Learning WebGL Lesson 8。