我找到了一个漂亮的 JavaScript 库，它允许“硬件加速”画布 2d 绘图：https ://github.com/corbanbrook/webgl-2d
我尝试了这个例子，第一帧渲染得像它应该的那样，但是在第一帧之后，画布是白色的。
我在这里设置了一个小提琴：http: //jsfiddle.net/RaW5x/5/
我必须假设它是库，因为这是存储库中的示例。
问问题
658 次
1 回答
4
简短的回答：我不认为这是图书馆的错，但这绝对是图书馆应该解决的问题。
具体来说，webgl-2d在初始化期间使用gl.colorMask(1, 1, 1, 0)-- 设置 GL 颜色掩码，从而阻止对 alpha 通道的任何写入。
现在，我必须承认，我不完全确定发生了什么使屏幕变白。混合函数是(src alpha, 1减src alpha)，这意味着对于每一种写出的颜色，都会根据源alpha分量与背景颜色混合。为简化解释，这里仅列出红色通道的公式：
Red = Rs * As + Rd * (1 - As)
...其中 Rs 是源（新）红色通道，As 是源 Alpha 通道，Rd 是目标（当前背景）红色通道。
因此，如果我们假设红色为 50（或在 WebGL 中约为 0.196），我的理解是应该发生的事情是：
Red = 0.196 * 1 + 0.196 * (1 - 1) = 0.196
换句话说，它应该用新颜色替换以前的颜色。
只要源通道等于目标通道，即使涉及 1.0 以外的 alpha，数字也会发生一些变化，但结果不会：
Red = 0.196 * 0.5 + 0.196 * (1 - 0.5) = 0.196
如果目标红色通道实际上与源通道不同，结果显然会改变，但即便如此，我也看不出它是如何变成白色的。如果问题完全是由于混合造成的，我预计会根据 Alpha 通道中的值逐步迈向白色，而不是在单个帧中“跳转”到白色。
所以从数学上讲，它对我来说看起来不错。但是，我可以通过设置颜色掩码以防止 alpha 写入，在我自己的 WebGL 框架 ( Jax ) 中重现此问题，因此这不完全是库的错。我的猜测是，这可能是您和我（以及无数其他）机器上的 OpenGL 驱动程序中的错误。
我将继续研究这个问题，如果我能学到任何东西，我会更新这个答案。
无论如何，这个问题可以在webgl-2d库中解决。我已经向开发人员提交了一个拉取请求。（仅供参考，您在问题中链接的存储库是原始存储库的一个分支；我不知道当前的维护者是谁，所以我将拉取请求发送到原始存储库。）
在拉取请求被（希望）接受，或者问题得到解决之前，我相信你可以这样做：
ctxGL.colorMask(1, 1, 1, 1);
...在进行任何渲染之前，它应该可以正常工作。
于 2012-07-12T23:45:58.960 回答