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 值。