Colors 如何在WebGL中使用GLSL ES片段着色器进行混合？

我正在尝试使用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上。在Google Chrome或Firefox中试用。

我对这个主题一无所知（glsl、webgl等），但你说的是

alpha

，这让我觉得这是一个RGBA值。因此

0.0,0.0,0.0,0.0

是黑色的，具有0.0 alpha覆盖率。换句话说，完全透明

0.0,0.0,0.0,1.0

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

让我澄清一下，以防上面的内容不清楚（对我来说这似乎让人困惑）

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

我不确定它们的最大/最小值，但在web浏览器（我的知识领域）中，颜色从0到255。其中0不是该颜色，255是该颜色的全部

因此，在您的例子中，您需要一个0红色、0绿色和0蓝色（即黑色）的正方形。但是，当您将透明度（alpha通道）设置为零时，它将渲染为白色（或者更可能是透明的，其后面的任何内容都是白色）。当您将alpha透明度设置为.5时，它会呈现黑色（如0,0,0应该），但只有一半可见。将alpha透明度设置为1.0时，它将渲染完全不透明的黑色正方形

---

有意义吗？

如果您发布了代码，这会很有帮助，但看起来很像是将片段颜色与白色背景混合在一起

一个可能的罪魁祸首可能是某些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）语句

更新：
既然你已经发布了你的代码，听起来你的问题与我所推测的正好相反。假设您希望根据设置的alpha显示黑色背景，则应将
gl.disable（gl.BLEND）
替换为

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

白色不是来自任何WebGL混合操作。之所以会发生这种情况，是因为画布DOM元素与它们所在的网页合成。将canvas DOM元素的背景色设置为黑色可以修复此问题。这一现象已被报道。然而，最明确的答案来自于。可以通过设置
WebGLContextAttributes
对象的各种属性来定义合成行为。引用规范：

可选的WebGLContextAttributes
对象可用于更改
缓冲区是否已定义。它可以
也可用于定义
颜色缓冲区将包含一个alpha
频道如果已定义，则为alpha通道
由HTML合成器用于
将颜色缓冲区与其他缓冲区合并
这是本页的最后一页

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

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

感谢您的清晰解释，但不幸的是，我已经了解RGBA的基本知识。这是一个关于图形管道如何在使用GLSL的WebGL程序中工作的非常具体的问题。我意识到我正在将我的颜色的alpha通道设置为0.0，这意味着如果它与其他颜色混合，则不会产生任何影响。我只是想知道它在我的WebGL程序中混合了什么。我只是不知道@肖恩，这可能和你的白色背景混在一起了。我假设WebGL管道的工作原理与桌面GL管道完全相同（可能有一些限制，但这些不适用于您的情况）。@Christian Rau。你说得对，它和白色背景混在一起。当我第一次读到你的评论时，我没有意识到你指的是画布背景。对成功列举问题的答案投反对票（“透明，任何隐藏在背后的都是白色”），一年多之后。我经常对别人感到惊讶。谢谢你的额外标签。我已经把这个答案投了更高的票，因为它是目前为止最好的。但这似乎不是问题所在。我已经把我的代码放到GitHub上了。大部分代码甚至不是我的，但是你可以看到我已经禁用了混合，我仍然遇到了问题。只需在Google Chrome中打开test.html即可查看问题。@Sean不，rockerest的答案是迄今为止最好的，因为它准确地解释了发生的事情@脑筋阻塞。我试着把这两条线加起来，我得到了一个更暗的灰色正方形，这让我觉得有两种混合。我的主要问题是“白色从哪里来”。在代码中，我没有指定任何东西应该