webgl：使用透明度時的白色邊框（alpha）

當渲染具有alpha通道的紋理時，在不透明部分周圍出現白色邊框（邊框看起來像是alpha> 0和< 1 ）：webgl：使用透明度時的白色邊框（alpha）

enter image description here

原始紋理在插畫創建並導出爲PNG。這就是：

enter image description here

（嗯，好像計算器改變了形象，調整並不完全是不透明/透明的像素，所以這裏是一個link）

它可能是混合的，雖然我不知道什麼是錯的設置：

gl.enable(gl.BLEND); 
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

[更新]

這裏是一個渲染的版本，其中，i增加了的α-梯度紋理的左側部分（因此它是從0的不透明度得到爲1，直到半）

enter image description here

該紋理是在這個位置渲染的紋理只有。它在a = 0.5左右似乎是最白的。真奇怪。背景只是清除顏色：

gl.clearColor(0.603, 0.76, 0.804, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
// render objects here

深度函數看起來像：

gl.enable(gl.DEPTH_TEST); 
gl.depthFunc(gl.LEQUAL);

什麼想法？非常感謝。

[更新2]

回答我的問題：當畫布的背景色或HTML頁面的主體爲白色時的效果。雖然我沒有解釋。

2011-10-11 CodeSalad

有一大段有0 Shahbaz

是的。我更新了這篇文章。有一個白色的地區。白色的數量取決於阿爾法。似乎最白的是0.5左右 – CodeSalad

奇怪的是它比紋理和背景都亮！你有照明功能嗎？ – Shahbaz

-1

回答我的問題：當畫布的背景色或主體的HTML頁面的是白色的發生的效果。雖然我沒有解釋。

（從我的原帖的更新2添加了這個，只是爲了讓答案更容易找到）

2013-03-19 19:56:52 CodeSalad

解釋是目標framebuffer有一個alpha通道，所以它會和站點背景混合。另一種解決方案是在請求webgl上下文或使用更適當的混合函數時設置「alpha：false」。 – urraka

什麼是您的畫圖順序？這對我來說看起來像是一個深度緩衝問題 - 您以白色背景開始，用邊框繪製物體，使其合成爲白色，然後用邊框將物體繪製在背後。邊界與原始白色背景混合的區域將在深度緩衝區中存儲一個等於其平面深度的值，因此當隨後繪製後面的對象時，其像素將在該區域中丟棄。

一般規則是在不透明物體後面繪製透明物體，通常是從後向前。如果您使用的是添加混合，那麼在不透明繪製之後禁用深度緩衝區並以任何順序繪製它們通常都足夠好。

2011-10-12 11:45:21 Tommy

在給定的屏幕截圖中，這是在清除的背景之上呈現的唯一紋理（在某些藍色陰影中）。所以這似乎不是確切的問題，雖然這是一個非常好的提示！我用新的截圖更新了我的問題。 – CodeSalad

這是紋理線性插值相關的問題。在邊框上，一些內插像素將採用半白半綠和0.5 alpha。你應該修改你的紋理來擴展你的邊框，即使它是完全透明的，也可以再增加一個綠色像素。

2011-10-14 16:36:40 neodelphi

在着色器中設置FragColor時，嘗試將圖像RGB與圖像alpha相乘。

2011-12-23 17:35:33 user1113724

如果alpha值已經很低，那麼顏色是否應該幾乎看不見，而不是白色邊框？ –

使用預乘alpha，此問題將消失。

2012-10-22 07:11:53

該鏈接已損壞，您可以更新它嗎？謝謝！ –

回答