在WebGL中渲染時混合前一幀

Question

使用常規二維畫布時，可以通過在繪製其他圖形的同時在整個畫布上填充透明版的背景色來獲得一些很酷的效果。例如：

ctx.fillStyle = "rgba(0,0,0,0.1)"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

如何使用WebGL獲得類似的重影/混合效果？

我試着用透明值設置glClearColor，但是這沒有奏效。也許可以用blendFunc來完成？如果是這樣，我會傳遞給blendFunc什麼參數？

Answer 1

您正在尋找的是渲染到紋理並在全屏幕四邊形上將其顯示在屏幕上。

看看Lesson 16 at learningwebgl和Section 9.090 of OpenGL FAQ（注意正交視圖）。目標紋理可能與您的視口一樣大，但您必須follow the rules for NPOT textures。

要達到真正好看的效果，您可能需要兩個自定義幀緩衝區。詳細解釋請參見Chapter 21 of GPU Gems（在線）。

Answer 2

具有透明值的glClearColor對我也不適用。但重複繪製覆蓋整個輸出區域的透明矩形並啓用了混合後，在某些情況下可以找到您正在尋找的效果。我用 gl.blendFunc（gl.SRC_ALPHA_SATURATE，gl.ONE_MINUS_SRC_ALPHA）。一個簡單的例子請看http://db.tt/6QpXqzx。該代碼可在「查看頁面源」中找到。代碼的結構與tutorialwebgl站點上的教程相同。