webgl 颜色和 alpha

Question

我对 webgl 中的颜色和 alpha 有疑问。

我的JavaScript-程序的一部分：

gl.clearColor(0.0, 0.0, 0.0, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

还有我的片段着色器：

precision highp float;
void main(void)
{
   float c = 0.5;
   float a = 0.7;
   if(gl_FragCoord.x < 310.0) // left color
      gl_FragColor = vec4(c, c, c, 1.0);
   else if(gl_FragCoord.x > 330.0) // right color
      gl_FragColor = vec4(c, c , c , a);
   else gl_FragColor = vec4(c / a, c / a, c / a, 1.0); // middle color
}

我正在渲染一个立方体。

但不幸的是立方体呈现了 3 种不同的颜色。结果：

图片见http://fs5.directupload.net/images/160301/hcrpgyc9.png

第一个 gl_FragColor-command 的 alpha = 1.0。颜色按预期呈现。

第二个 gl_FragColor-command 的 alpha 值为 0.7。

第三个gl_FragColor-command的最后一个参数又是1.0。 r、g 和 b 除以 alpha 值 0.7。但我希望这个命令产生与第二个 gl_FragColor-command 相同的颜色。看来，我的计算是错误的。我该怎么做才能获得相同的颜色？

已在 chrome 和 firefox 上测试，均在 windows。

Answer 1

你得到的结果是因为浏览器在 canvas 后面混合了背景色。尝试设置 background-color，你会得到这样的结果：

默认的混合方程为：

blendedColor = sourceColor + destinationColor * (1 - sourceAlpha)

所以用白色背景，sourceColor = c = 0.5, sourceAlpha = a = 0.7, destinationColor = white = 1.0，所以blendedColor = 0.8

在这种情况下除以 alpha 没有多大意义。要匹配中间区域，您可以复制上面的混合过程：

else gl_FragColor = vec4(vec3(c) + vec3(1.0) * (1.0 - a), 1.0); // middle color

webgl 颜色和 alpha

webgl colors and alpha

javascript

webgl