3

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

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

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

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

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

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

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

据我所知，问题与混合功能无关。代码在 GitHub上。在 Google Chrome 或 Firefox 中试用。

4

3 回答 3

5

白色不是来自任何 WebGL混合操作。这是因为画布 DOM 元素与它们所在的网页合成。将画布 DOM 元素的背景颜色设置为黑色可以解决问题。这个现象已经写到这里了。然而，最明确的答案来自WebGL 规范。可以通过设置WebGLContextAttributes对象的各种属性来定义合成的行为。引用规范：

可选的 WebGLContextAttributes 对象可用于更改是否定义了缓冲区。它还可用于定义颜色缓冲区是否包含 Alpha 通道。如果已定义，则 HTML 合成器使用 alpha 通道将颜色缓冲区与页面的其余部分结合起来。

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

gl = canvas.getContext("experimental-webgl", { alpha: false } );
于 2011-05-31T03:27:17.467 回答
4

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

一个可能的罪魁祸首是一些 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);
于 2011-05-30T02:35:44.823 回答
1

我对这个主题一无所知（glsl、webgl 等），但你说alpha这让我认为这是一个 RGBA 值。所以 a0.0, 0.0, 0.0, 0.0是黑色的，alpha 覆盖率为 0.0。换句话说，完全透明。

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

让我澄清一下，以防万一上述内容不清楚（这让我感到困惑）。

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

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

因此，在您的情况下，您请求的是一个具有 0 红色、0 绿色和 0 蓝色（只是黑色）的正方形。但是，当您将透明度（alpha 通道）设置为零时，它会呈现为白色（或更可能 - 透明，并且它后面的任何东西都是白色的）。当您将 alpha 透明度设置为 0.5 时，它会呈现黑色（如 0,0,0 应该）但只有一半可见。当您将 Alpha 透明度设置为 1.0 时，它会呈现一个完全不透明的黑色正方形。

有道理？

于 2011-05-28T06:18:17.763 回答