如何在画布上实时使用多重混合模式？

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个，你可以扩展上面的过程来乘以几个纹理; 如果有很多，你需要做多个阶段的两个纹理相乘，同时渲染到第三个，然后交换角色。

如果您想要一个更具体的答案，那么请扩展您的问题，详细说明您将多少以及哪种图形相乘。