OpenGL和WebGL之間的Alpha渲染區別

我使用相同的C++代碼渲染相同的場景，一次渲染到Windows上的本機OpenGL以及一次使用Emscripten渲染WebGL。場景中的所有內容看起來都完全一樣，除非我使用alpha！= 1.0進行渲染。所不同的是這樣的： OpenGL和WebGL之間的Alpha渲染區別

藍色立方體的顏色是(0.0, 0.0, 1.0, 0.5)
用於渲染立方體的着色器什麼都不做，除了繪製的顏色。
右邊是它與OpenGL的外觀，是預期的結果，只是半透明的藍色。左邊是Emscripten + WebGL的外觀。它看起來像它呈現的顏色實際上是(0.5, 0.5, 1.0, 0.5)

我使用的混合功能是標準：

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

是否有某種差異與WebGL的阿爾法？什麼可能導致這種情況發生？

來源

2016-02-12 shoosh

...接近題外話？請解釋 – shoosh

它可能是一個預乘與非預乘α的問題嗎？ –

@WacławJasper我想過這個問題，但我真的不知道怎樣......左乘阿爾法將使它更暗，亮不，不是嗎？ – shoosh

您是否將畫布設置爲非預置？

gl = someCanvas.getContext("webgl", { premultipliedAlpha: false });

WebGL的默認值爲true。大多數OpenGL應用程序的默認值爲false

除此之外，WebGL與頁面的其餘部分合成。至少是畫布的背景顏色或其內部任何內容（文檔的主體）。

要看看這是問題請嘗試設置畫布底色爲紫色或東西，將伸出

<canvas ... style="background-color: #F0F;"></canvas>

或CSS

canvas { background-color: #F0F; }

的OpenGL應用程序是在什麼地方很少合成因爲WebGL應用程序總是有效地進行合成。

一些解決方案

關閉阿爾法

如果您不需要在您的目的地阿爾法，你可以把它關掉
```
gl = someCanvas.getContext("webgl", { alpha: false }); 
```
現在阿爾法將有效地1

將alpha設置爲1在幀的末尾

// clear only the alpha channel to 1 
gl.clearColor(1, 1, 1, 1); 
gl.colorMask(false, false, false, true); 
gl.clear(gl.COLOR_BUFFER_BIT);

不要忘記設置顏色掩蓋回所有真實的，如果你需要清除顏色緩衝區後

設置畫布的背景色爲黑色
```
canvas { background-color: #000; } 
```

如果可能，我會選擇關閉alpha。如果是alpha的原因被設置爲關閉，瀏覽器可以在將畫布繪製到瀏覽器時關閉混合。根據GPU的不同，速度可能會提高10-20％或更多。有沒有保證，任何瀏覽器做最優化，只知道它是可能的，而不會與其他2個解決方案這是不可能的，或者至少不太可能

來源

2016-02-13 05:14:08 gman

OpenGL和WebGL之間的Alpha渲染區別

回答

相關問題