如何在画布上实时使用乘法混合模式？

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个，则可以扩展上述过程以乘法多个纹理；否则，请执行以下步骤。如果有很多，您将需要执行多个阶段：将两个纹理相乘，同时渲染到第三个，然后交换角色。

如果您想获得更具体的答案，请扩大您的问题，以获取更多详细信息，以了解您要乘法的图形数量和种类。