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

編輯截至2016：「乘數」值爲globalCompositeOperation。性能綽綽有餘實時圖形。如何在畫布上實時使用多重混合模式？

從本質上講，我有兩個畫布（一個是用於繪圖的不可見帆布），我想向無形的畫布融合到可見一個與所述乘法混合模式。

Context.globalCompositeOperation不包括乘法（儘管它應該，在我看來）和使用imageData手動混合畫布太慢（我需要能夠以60fps做到這一點）。

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

來源

2012-07-21 nondefault

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

讓您的可見畫布成爲WebGL畫布。
創建兩個紋理;稱他們爲「來源」和「目的地」。

將您的隱形畫布內容渲染到「源」紋理;這可以直接使用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...

渲染其他內容被乘以「目標」紋理。
最後，針對實際的可見畫布，使用片段着色器來增加「源」和「目標」紋理。這裏的技術是用於後期處理效果的技術 - 我推薦查找such a tutorial或簡單示例。簡而言之，要將片段着色器應用於整個畫布，請繪製一個包含整個視口的幾何圖形全屏幕四邊形。頂點着色器是微不足道的，而片段着色器會是這樣：
```
varying vec2 texCoord; 
uniform sampler2D sourceTexture; 
uniform sampler2D destTexture; 
void main(void) { 
    gl_FragColor = texture2D(sourceTexture, texCoord) * texture2D(destTexture, texCoord); 
} 
```

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

如果您需要更具體的答案，請將您的問題展開，詳細說明您將多少圖形以及哪種圖形相乘。

來源

2012-07-22 00:36:38

感謝您的回答。我對WebGL非常陌生，需要一些幫助。我做了一些研究，發現可以使用gl.texSubImage2D將畫布內容複製到一個webGL紋理中。我正在考慮做一些像gl.texSubImage2D（GL_TEXTURE_2D，0,0,0,640,480，GL_COLOR_INDEX，type，imageData）。但是，我不確定使用哪種類型。另外，我不知道如何接近着色器部分。提前致謝。 – nondefault 2012-07-23 02:49:56

@ user1175802我已經添加了一些特定的示例代碼來回答您的問題。廣泛地說，我建議查找關於後處理效果的WebGL教程（因爲大多數代碼會相似），然後根據您的需要進行調整。 – 2012-07-23 13:50:45

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

回答

相關問題