Question

自2016年起编辑：为globalCompositeOperation实施“倍增”值。对于实时图形来说，性能已经足够了。

基本上，我有两个画布（一个是用于绘图的隐形画布），我想用不同的混合模式将不可见的画布混合到可见的画布上。

Context.globalCompositeOperation不包括乘法（虽然它应该在我看来）并且使用imageData手动混合画布太慢（我需要能够以60fps的速度执行此操作）。< / p>

有没有更快的方法可以用来混合画布？我相信这可以使用 WebGL 来完成，但我没有使用它的经验。

Answer 1

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

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

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

1 个答案: