webgl颜色和alpha

我有一个webgl中的颜色和alpha的问题。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除以0.7的α值。但我想，这个命令会产生与第二个gl_FragColor-command相同的颜色。看来，我的计算是错误的。我能做什么，以获得相同的颜色？

测试与铬和Firefox，在窗户上。

来源

2016-03-01 m1au

您能否给我们一个工作代码片段/ jsfiddle？右侧没有相同的颜色。 –

您可以使用http://www.mathematik.uni-marburg.de/~thormae/lectures/graphics1/code/WebGLShaderLightMat/ShaderLightMat.html 将我的片段着色器复制到fragment-textarea并单击提交按钮。在那里你可以看到3种不同的颜色。但我想，中间和正确的颜色是相同的。 – m1au

files： html http://textuploader.com/5vr4o javascript http://textuploader.com/5vr4a – m1au

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

默认情况下，混合公式是：

blendedColor = sourceColor + destinationColor * (1 - sourceAlpha)

背景为白色， sourceColor = c = 0.5, sourceAlpha = a = 0.7, destinationColor = white = 1.0

所以，所以blendedColor = 0.8

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

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

来源

2016-03-01 15:08:18

就是这样。谢谢！ :) – m1au

webgl颜色和alpha

回答

相关问题