webgl颜色和alpha

Question

我在webgl中遇到颜色和alpha问题。

我的JavaScript程序的一部分：

NSURLSessionDelegate

我的片段着色器：

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

我正在渲染一个立方体。

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

图片请参阅http://fs5.directupload.net/images/160301/hcrpgyc9.png

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

第二个gl_FragColor命令的alpha值为0.7。

第三个gl_FragColor命令的最后一个参数再次为1.0。 r，g和b除以α值0.7。但我想，这个命令产生的颜色与第二个gl_FragColor命令相同。看来，我的计算错了。我能做些什么来获得相同的颜色？

在Windows上使用chrome和firefox进行测试。

Answer 1

您得到的结果是因为浏览器混合了画布后面的背景颜色。尝试设置背景颜色，你会得到这样的结果：

默认情况下，混合方程为：

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