webgl - WebGL BlendFuncのバグまたは誤解？

Question

黒の背景に半透明の黒の三角形を描画しようとしています。

ここに画像の説明を入力してください

これが私のサンプルです：http：//codewithoutborders.com/posted/blend.html

blendFuncが設定され、有効になっています（151行目）。

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

バッファは黒にクリアされます（129行目）：

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

シェーダーは半透明の黒で塗りつぶされます（10行目）。

gl_FragColor = vec4(0.0, 0.0, 0.0, .5);

ドキュメントには次のように記載されているので、三角形は黒になると思います

result = {foreground}*sourceAlpha + {background}*(1-sourceAlpha)
       = (0,0,0,.5)*.5 + (0,0,0,1)*.5
       = (0,0,0,.75)

どちらが黒ですか？

では、灰色はどこから来るのでしょうか？

score 4 · Accepted Answer

（恥ずかしい。投稿の3分後に自分の質問に答えますが、重大な脱毛の前ではありません）

灰色は、HTML ページの白い背景が、それ以外の場合は黒いキャンバスに 3/4 透明の穴を「パンチ」した後に透けて見えることに由来します。

追加

style="background:black;"

タグに追加すると問題が解決します。

[以下のgmanのコメントはより良い修正です]

1 に答える 1