webgl 颜色和 alpha

Posted 2023-03-15

【中文标题】webgl 颜色和 alpha

【英文标题】：webgl colors and alpha

【发布时间】：2016-03-01 13:32:05

【问题描述】：

我对 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 命令的 alpha = 1.0。颜色按预期呈现。

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

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

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

【问题讨论】：

你能给我们一个工作代码sn-p / jsfiddle吗？我在右边没有得到相同的颜色。

您可以使用mathematik.uni-marburg.de/~thormae/lectures/graphics1/code/…将我的片段着色器复制到片段文本区域并单击提交按钮。在那里你可以看到 3 种不同的颜色。但我想，中间和右边的颜色是一样的。

文件：html textuploader.com/5vr4o javascript textuploader.com/5vr4a

@Tamas Hegedus 你用的是微软电脑还是苹果电脑？这可能是操作系统颜色表的问题吗？

好吧，我错了，现在我的颜色和你一样

【参考方案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

【讨论】：

就是这样。谢谢！ :)