如何在畫布上實時使用多重混合模式？

Question

編輯截至2016年 ：為globalCompositeOperation實現“乘法”值。 對於實時圖形來說，性能綽綽有余。

---

基本上，我有兩個畫布（一個是用於繪圖的隱形畫布），我想用不同的混合模式將不可見的畫布混合到可見的畫布上。

Context.globalCompositeOperation不包括乘法（雖然它應該，在我看來）和使用imageData手動混合畫布太慢（我需要能夠以60fps的速度執行此操作）。

有沒有更快的方法可以用來混合畫布？ 我相信這可以使用WebGL完成，但我沒有使用它的經驗。

Answer 1

WebGL的混合模式也不包括（源和目標的）乘法。 但是，您可以使用WebGL的渲染到紋理功能有效地執行乘法運算：

1. 讓您的可見畫布成為WebGL畫布。
2. 創建兩個紋理; 稱他們為“來源”和“目的地”。

3. 將隱形畫布內容渲染為“源”紋理; 這可以通過直接使用WebGL繪圖操作（不使用額外的畫布）或將2D隱形畫布的內容上傳到紋理（這是內置操作）來完成：

    var sourceTexture = gl.createTexture() gl.bindTexture(gl.TEXTURE_2D, sourceTexture) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas) // ...also set texture filters — see any WebGL tutorial... 

4. 渲染要與“目標”紋理相乘的其他內容。

5. 最后，以實際可見畫布為目標，使用片段着色器將“源”和“目標”紋理相乘。 這里的技術是用於后處理效果的技術 - 我建議查找這樣的教程或簡單的例子。 簡而言之，要將片段着色器應用於整個畫布，可以繪制覆蓋整個視口的全屏四邊形幾何體。 頂點着色器很簡單，片段着色器如下：

    varying vec2 texCoord; uniform sampler2D sourceTexture; uniform sampler2D destTexture; void main(void) { gl_FragColor = texture2D(sourceTexture, texCoord) * texture2D(destTexture, texCoord); } 

如果你想每幀做多個重疊的乘法混合，那么如果不超過8個，你可以擴展上面的過程來乘以幾個紋理; 如果有很多，你需要做多個階段的兩個紋理相乘，同時渲染到第三個，然后交換角色。

如果您想要一個更具體的答案，那么請擴展您的問題，詳細說明您將多少以及哪種圖形相乘。