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

问题描述

| 我正在尝试使用WebGL显示一个简单的效果。自然，这意味着我正在使用GLSL ES 1.0规范中定义的片段着色器语言。 我正在使用的代码大部分是从其他来源复制的。它建立一个正方形，并使用片段着色器和顶点着色器确定像素颜色。以下代码将仅显示一个白色正方形。

gl_FragColor = vec4(0.0,0.0,0.0);

但是，如果我将alpha分量更改为“ 1”，那么它将显示一个黑色正方形。

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

我假设片段着色器输出的颜色必须与某些以前的颜色组合。如何确定只有最后一种颜色（无论其alpha值如何）才是实际选择的显示颜色？ 或者，也许我以错误的方式获得了订单。也许有一个后期阶段与片段着色器中的颜色组合以产生白色。无论如何，我知道正在进行某种混合，因为当我将alpha值更改为0.5时，我得到一个灰色方块。我只想知道，白色是哪里来的？我该如何摆脱呢？ 据我所知，问题不在于混合功能。代码在GitHub上。在Google Chrome或Firefox中试用。     

解决方法

        白色不是来自任何WebGL混合操作。发生这种情况是因为canvas DOM元素与它们所驻留的网页混合在一起。将canvas DOM元素的背景色设置为黑色可解决此问题。这种现象已经在这里写了。但是，最明确的答案来自WebGL规范。可以通过设置“ 3”对象的各种属性来定义合成的行为。引用规范：   可选的WebGLContextAttributes   对象可用于更改是否   是否定义了缓冲区。它可以   也可以用来定义   颜色缓冲区将包含一个Alpha   渠道。如果已定义，则为Alpha通道   由HTML合成器用来   将颜色缓冲与其余的相结合   页面。 因此，一种不涉及将画布的背景设置为黑色的替代解决方案是使用以下Javascript代码请求WebGL上下文

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

    ,        如果您发布代码会很有帮助，但似乎非常像您将片段颜色与白色背景混合在一起。 可能的罪魁祸首是一些WebGL初始化代码，如下所示：

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

它将颜色缓冲区的透明颜色初始化为白色并启用Alpha混合。 因此，要摆脱您的问题，只需不要启用混合。换句话说，丢失“ 6”的陈述。 更新： 现在，您已经发布了代码，听起来您的问题与我所猜测的相反。假设您希望根据设置的Alpha来显示黑色背景，则应将

gl.disable(gl.BLEND)

替换为

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

    ,        我对这个主题（glsl，webgl等）一无所知，但是您说了“ 9”，这让我认为这是RGBA值。因此，

0.0,0.0,0.0

是黑色的，覆盖范围为0.0。换句话说，完全透明。

0.0,1.0

是黑色的，具有1.0 alpha覆盖率。换句话说，完全不透明。听起来输出是100％正确的。 让我澄清一下，以防万一上面的内容不清楚（这似乎使我感到困惑）。 最后一个数字仅影响颜色的透明度，前三个数字分别影响红色，绿色和蓝色。 我不确定它们的最大值/最小值，但是在Web浏览器（我的专业领域）中，颜色从0到255。其中0都不是该颜色，而255是所有该颜色。 因此，在您的情况下，您要求的方块包含0个红色，0个绿色和0个蓝色（仅黑色）。但是，当您将透明度（alpha通道）设置为零时，它将呈现为白色（或更可能是透明的，并且其背后的任何内容都是白色）。将Alpha透明度设置为.5时，它将呈现黑色（应为0,0），但只有一半可见。将Alpha透明度设置为1.0时，它将呈现一个完全不透明的黑色正方形。 合理？