webgl 和 2d 画布之间的透明度差异答案

【问题标题】：Transparency discrepancy between webgl and 2d canvaseswebgl 和 2d 画布之间的透明度差异
【发布时间】：2012-10-17 17:27:24
【问题描述】：

我有一个 png，我使用 2d canvas 加载它，并作为 webgl 纹理。 png 有一些透明部分，在 webgl 中呈现为黑色，在 2d canvas 中呈现为白色。（请参阅this fiddle 进行现场演示。在 Chrome 中，您需要使用标志 --disable-web-security 运行以绕过跨域限制。）

有没有办法为 webgl 纹理设置透明度颜色？ 2d 画布呢？

【问题讨论】：

jsfiddle.net/PErKw/1 使用数据 uri，因此您不必使用一些安全标志运行。

标签： javascript html5-canvas webgl

【解决方案1】：

为了让画布了解您的 png 透明度，您需要将其保存为 24 位。

因为 24 位 PNG 图像包含一个完整的 8 位 alpha 通道。

Full reference

【讨论】：

哼。为什么 2d-canvas 和 3d-canvas 相同的图像会不同？
因为它们以不同的方式呈现。它们不一样。

【解决方案2】：

您在createTexture 中将纹理加载为 RGB，因此丢弃了 Alpha 通道。将其更改为 RGBA，如下所示

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

它们看起来会一样。

【讨论】：