基本上,我有两个画布(一个是用于绘制的隐藏画布),我想使用乘法混合模式将隐藏画布混合到可见画布上。
Context.globalCompositeOperation
不包括乘法(尽管在我看来应该包括),使用 imageData
手动混合画布太慢了(我需要以60fps进行操作)。有没有更快的方法可以用来混合画布?我相信可以使用 WebGL 来完成,但我没有使用它的经验。
Context.globalCompositeOperation
不包括乘法(尽管在我看来应该包括),使用 imageData
手动混合画布太慢了(我需要以60fps进行操作)。Render your invisible-canvas content to the "source" texture; this can be done either using WebGL drawing operations directly (using no extra canvas) or by uploading your 2D invisible canvas's contents to the texture (this is a built-in operation):
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...
Render the other content to be multiplied to the "destination" texture.
Finally, targeting the actual visible canvas, use a fragment shader to multiply the "source" and "destination" textures. The techniques here are those used for post-processing effects — I recommend looking up such a tutorial or simple example. Briefly, to apply a fragment shader to the entire canvas, you draw a full-screen quad - geometry that covers the entire viewport. The vertex shader is trivial, and the fragment shader would be like:
varying vec2 texCoord;
uniform sampler2D sourceTexture;
uniform sampler2D destTexture;
void main(void) {
gl_FragColor = texture2D(sourceTexture, texCoord) * texture2D(destTexture, texCoord);
}