WebGL半透明显白

Question

我在使用 WebGL 时遇到问题。半透明纹理看起来是半透明的，但它们也变白了，渲染时不考虑纹理的颜色......

这就是我设置的：

gl.blendFunc(BlendingFactorSrc.SRC_ALPHA, BlendingFactorDest.ONE_MINUS_SRC_ALPHA);

可能的解决方案是什么？

Answer 1

通常，如果白色意外出现在 WebGL 场景中，它会从网页本身的 CSS 背景中混合（默认为白色，除非您更改它）。

换句话说，使用默认的 WebGL 设置，任何将小于 1.0 的 alpha 值写入颜色缓冲区的着色器都会使

<canvas>

本身变得半透明并显示网页的背景。我相信您可以更改 WebGLContextAttributes 设置以禁用此行为，或者只是确保您的着色器始终输出 1.0.

的 alpha 值

Answer 2

对我来说，设置这些 WebGL 上下文属性解决了这个问题：

const gl = canvas.getContext('webgl', {
  alpha: true,
  premultipliedAlpha: false,
});

没有

premultipliedAlpha: false

WebGL 将不完全透明的像素呈现为白色，而不是像

0.1

那样具有不透明度。

当 WebGL

premultipliedAlpha

禁用时，像素以适当的不透明度级别呈现。

Answer 3

在设置混合功能之前必须启用 alpha 混合：

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