没有在 WebGL 中混合的 alpha 的奇怪行为答案

【问题标题】：Strange behavior of alpha without blending in WebGL没有在 WebGL 中混合的 alpha 的奇怪行为
【发布时间】：2016-02-17 22:31:30
【问题描述】：

我发现 WebGL 在关闭混合的情况下呈现奇怪的行为。我在this simplest tutorial 上复制了它。只需更改字符串：

gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 至 gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);

和 gl.clearColor(0.0, 0.0, 0.0, 1.0); 至 gl.clearColor(1.0, 1.0, 1.0, 1.0);

因此，由于关闭了混合，我应该在白色背景上看到黑色形状（像素的 alpha 0.5 不应产生影响）。但我在白色背景上看到灰色的形状。我相信我错过了一些东西，但我不明白是什么。有什么想法吗？

附： gl.disable(gl.BLEND) 不会改变结果。

【问题讨论】：

可能发生的情况是 OpenGL 在白色背景上渲染黑色形状，因此 RGB 正是您所期望的，但它渲染出来的 A 通道对于黑色形状是 0.5。问题是，窗口系统如何将 OpenGL 的输出与浏览器窗口合成？如果合成过程使用 Alpha 通道进行混合，并且背景是白色的，那么这可以解释您看到的灰色形状。

【解决方案1】：

这里基本上已经回答过了

您看到的是默认情况下，WebGL 画布与背景混合在一起。画布的背景颜色或它的子元素。 HTML 的默认背景颜色为白色，因此如果您使用 [0.0, 0.0, 0.0, 0.5] 绘制，则 50% 的 alpha 黑色与白色网页混合。

查看上面的链接了解如何修复它。

【讨论】：