在單個渲染過程中將正色和負色片段進行加性混合

Question

我正在研究一個類似於粒子系統的WebGL項目。 出於審美目的，我的一次渲染過程已配置為可疊加 ，並且我禁用了深度測試。 為了爭辯，我還將視口緩沖區清除為50％灰色 。

gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE);
gl.disable(gl.DEPTH_TEST);
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

我已經將頂點緩沖區和索引緩沖區上載到了GPU，它們代表兩個部分重疊的三角形 。 它們的頂點具有vec3 color屬性 。 我為每個頂點分配了50％灰色（ 0.5、0.5、0.5）的顏色。

當我使用着色器繪制三角形時，我欣慰地報告我的視口緩沖區現在看起來是50％的灰色 ，兩個重疊的三角形區域是white 。 三角形是白色的，因為它們的片段的顏色值與顏色緩沖區中已經存在的那些顏色值相加。

現在，我通過以下更改重新上傳頂點緩沖區：第二個三角形的頂點的顏色現在為-50％灰色（-0.5，-0.5，-0.5） 。

我希望完成的工作是，我的視口緩沖區看起來像是50％的灰色，有兩個重疊的三角形區域（一個白色 ，一個黑色 ）相交，並在它們的相交處產生50％的灰色 。 畢竟，加上負數應該等於減去相同幅度的正數。

相反，我看到的是50％的灰色視口，其中只有一個三角形區域 -白色。

我認為，這是因為我的片段着色器的輸出被鉗位到其下限為零的范圍，之前它與顏色緩沖區混合。 我想知道如何避免這種夾緊-理想情況下是在WebGL中，而無需多次渲染。

我將在此URL的頁面源中測試解決方案： http : //rezmason.net/scourge/issues/positive_negative_fragments.html

UPDATE

作為一項調查，我嘗試在幀緩沖區中執行添加混合，然后通過將其紋理化為一個單元四邊形將幀緩沖區繪制到視口緩沖區-當然，這是兩個單獨的繪制調用，喜歡避免。

就是說，因為我可以將幀緩沖區的格式顯式設置為浮點數， 所以當我在該緩沖區中執行操作時 ，任何值都不會發生鉗位 。 當我將緩沖區繪制到視口時，我假定最終會發生夾緊，但是到那時所有混合都已經完成。

我的問題現在簡單得多：有沒有辦法初始化WebGL或OpenGL上下文，以便將其視口格式化為浮點緩沖區？

Answer 1

使用gl.blendEquation( gl.FUNC_SUBTRACT ) 。 然后在着色器中使用正值。

如果您想在中間做某事，則可以做一些駭人聽聞的事情：

gl.enable(gl.BLEND);
gl.blendFuncSeparate(gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
gl.blendEquation(gl.FUNC_ADD);

它將為您提供以下等式：

現在，如果將顏色設置為（0.5，0.5，0.5，0），則可以繪制白色三角形，而將顏色（0.5，0.5，0.5，1）設置為黑色三角形。

如果您想要不同的顏色，希望您能理解。 您可以在此處比較不同的混合功能： http : //www.andersriggelsen.dk/glblendfunc.php

編輯：對不起，我的錯。 你應該改變

gl.blendFuncSeparate(gl.ONE_MINUS_DST_ALPHA, gl.ONE_MINUS_DST_ALPHA, gl.ONE, gl.ONE);

至

gl.blendFuncSeparate(gl.ONE_MINUS_SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);

我忘記了哪一個是來源，哪一個是目的地。 我已經更新了答案。