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

回答

相關問題