colors - WebGL 中的混合如何与 GLSL ES 片段着色器一起工作？

Question

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

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

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

但是，如果我将 alpha 分量更改为 1.0 那么它将显示一个黑色方 block 。

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

我假设片段着色器输出的颜色必须与某些先前的颜色组合。如何确保只有最后一种颜色(无论其 alpha 值是多少)才被实际选择为要显示的颜色？

或者也许我的顺序是错误的。也许有一个稍后阶段与片段着色器中的颜色相结合以产生白色。无论如何，我知道正在发生某种混合，因为当我将 alpha 值更改为 0.5 时，我会得到一个灰色方 block 。我只想知道白色是从哪里来的？我该如何摆脱它？

据我所知，问题与混合功能无关。代码位于 GitHub here 。在 Google Chrome 或 Firefox 中尝试一下。

Answer 1

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

The optional WebGLContextAttributes object may be used to change whether or not the buffers are defined. It can also be used to define whether the color buffer will include an alpha channel. If defined, the alpha channel is used by the HTML compositor to combine the color buffer with the rest of the page.

因此，另一种解决方案不涉及将 Canvas 背景设置为黑色，而是使用以下 Javascript 代码请求 WebGL 上下文

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