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 混合：

var gl = canvas.getContext("webgl", {alpha: false}); // css background shows when alpha is on
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);