Question

我正在尝试使用WebGL显示一个简单的效果。当然，这意味着我正在使用GLSL ES 1.0规范中定义的片段着色器语言。

我正在处理的代码主要是从其他来源复制的。它设置一个正方形并使用片段和顶点着色器来确定像素颜色。以下代码将只显示一个白色方块。

gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);

但是，如果我将alpha分量更改为1.0，则会显示黑色方块。

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // displays a black square

我假设片段着色器输出的颜色必须与之前的颜色组合。如何确保只有最后一种颜色（不论其alpha值）是否实际被选为要显示的颜色？

或许或许我的订单错了。也许有一个以后的阶段与片段着色器中的颜色组合以产生白色。在任何情况下，我都知道正在进行某种混合，因为当我将alpha值更改为0.5时，我得到一个灰色方块。我只是想知道，白色来自哪里？我该如何摆脱它？

据我所知，问题与混合功能无关。代码在GitHub here上。在谷歌浏览器或Firefox中试用。

Answer 1

白色不是来自任何WebGL 混合操作。之所以会发生这种情况，是因为canvas DOM元素与它们所在的网页合成。将canvas DOM元素的背景颜色设置为黑色可以解决问题。这种现象已经写成here。但是，最明确的答案来自WebGL specification。可以通过设置WebGLContextAttributes对象的各种属性来定义合成的行为。引用规范：

可选的WebGLContextAttributes 对象可用于改变是否是否定义了缓冲区。它可以也可以用来定义是否颜色缓冲区将包含alpha 渠道。如果已定义，则为alpha通道由HTML合成器使用将颜色缓冲区与其余颜色组合在一起页面。

因此，一个不涉及将画布背景设置为黑色的替代解决方案是使用以下Javascript代码请求WebGL上下文

gl = canvas.getContext("experimental-webgl", { alpha: false } );

Answer 2

如果您发布代码会有所帮助，但它看起来非常像您将片段颜色与白色背景混合。

可能的罪魁祸首是一些WebGL初始化代码，如下所示：

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

将颜色缓冲区清除颜色初始化为白色并启用Alpha混合。

因此，要解决您的问题，请不要启用混合。换句话说，丢失gl.enable(gl.BLEND);声明。

<强>更新现在您已经发布了代码，听起来您的问题与我的推测相反。假设您希望根据您设置的字母显示黑色背景，则应将gl.disable(gl.BLEND)替换为

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

Answer 3

我对此主题（glsl，webgl等）一无所知，但你说alpha让我觉得这是一个RGBA值。因此0.0, 0.0, 0.0, 0.0为黑色，覆盖范围为0.0 alpha。换句话说，完全透明。

0.0, 0.0, 0.0, 1.0为黑色，覆盖范围为1.0 alpha。换句话说，完全不透明。听起来输出是100％正确的。

让我澄清一下，以防上述情况不明确（这对我来说似乎有点困惑）。

最后一个数字只影响颜色的透明度，前三个数字分别影响红色，绿色和蓝色。

我不确定它们的最大/最小值，但在网络浏览器（我的知识领域）中，颜色从0到255.其中0不是那种颜色，255是所有颜色。

所以在你的情况下，你要求一个0红色，0绿色和0蓝色（只是黑色）的正方形。但是，当您将透明度（Alpha通道）设置为零时，它会呈现为白色（或者更可能是透明的，背后的任何内容都是白色）。当您将Alpha透明度设置为.5时，它会渲染黑色（如0,0,0应该）但只有一半可见。将Alpha透明度设置为1.0时，它会呈现一个完全不透明的黑色方块。

有意义吗？

混合如何与WebGL中的GLSL ES片段着色器一起使用？

3 个答案: