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を参照してください。