WebGL中的透明紋理行爲

環境：WebGL，Chrome。使用透明png作爲模型紋理時，我有以下行爲：WebGL中的透明紋理行爲

圖片A - 樹隱藏它後面的建築，我看到世界箱體紋理。它還隱藏自身（回分支是不可見的）
與此同時 - 圖B - 工作正常，窗口是透明的，我看看有什麼背後

答： B：

這兩個截圖都是在同一時間從不同的攝像頭位置拍攝的。紋理由相同的算法生成。

我不明白窗口和分支透明度有什麼區別。我的主要問題是 - 如何修復分支以免隱藏背後的物體？着色器的代碼是：

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);

我打了啓用/禁用混合和depth_test，有時會得到想要的結果，但不知道這是否是做事的正確方法。

來源

2012-01-06 Vecnas

您正在深入討論緩衝區問題，它與着色器或混合模式無關。

發生什麼事情是，您呈現透明幾何體的順序影響您在其後面呈現的能力。這是因爲深度緩衝區沒有透明或不透明的概念。因此，即使它們沒有在視覺上對場景做出貢獻，那些透明像素無論如何都會將自己寫入深度緩衝區，之後，在它們後面繪製的任何像素都將被丟棄，因爲它們「不可見」。如果您首先在透明對象背後畫幾何圖形，它會正確顯示，因爲它會在透明深度放置到位並放棄之前寫入框架。

這是即使是大型商業遊戲引擎仍然在一定程度上掙扎，所以不要爲它感到不好，造成一些混淆。 :)

有沒有「完美的解決方案」這個問題，但什麼是真正歸結爲試圖構建場景，像這樣：

渲染由國家來分類的任何不透明的幾何形狀（着色器/紋理/等等）
接下來渲染任何透明幾何。如果可能的話，按照深度對它們進行分類，以便首先從相機中抽出最遠的一個。

簡單地通過標記透明幾何位並在一切之後渲染它們，您可以解決90％的問題，但問題可能仍然存在於重疊的透明對象上。這對你來說可能不是問題，取決於你的場景，但是如果它仍然造成僞影，你需要在繪製之前按深度對透明物體排序。

來源

2012-01-07 16:33:31 Toji

謝謝你的明確答案。我可以按要求的順序進行渲染。只剩下問題 - 自我重疊。例子中的樹會通過前面「隱藏」後面的分支。假設通過常規方法無法解決。現在至少有90％的問題可以通過按照正確的順序進行解決。 – Vecnas 2012-01-09 18:45:36

@Toji有沒有一種很好的方法來按深度對對象進行排序？ Greeings – schlenger 2014-08-29 21:22:33

丟棄alpha小於0.5的碎片可能會有幫助（當然，還有副作用）。

if（gl_FragColor.a < 0。5）丟棄;

AlphaFunctions in WebGL?

來源

2015-12-18 03:00:53 Punyapat

請添加代碼。 – 2015-12-18 05:29:44

WebGL中的透明紋理行爲

回答

相關問題