canvas context2d.drawImage( webglCanvas, 0, 0 ) 是否阻塞直到 webgl 完成渲染？

Question

我假设我的测试答案是“否”，但我想我会确定。

我正在尝试每帧从 WebGL canvas 绘制/复制内容到 2d canvas，我想知道是否应该等到 WebGL 上下文完成绘制（我可以在调用它之前使用 gl.fenceSync 检查），或者我是否可以立即调用 drawImage 而不必担心性能下降。以下是我打算如何使用 three.js 作为渲染器的支架：

const renderer = new THREE.WebGLRendeer();
const canvas = document.createElement( 'canvas' );
const ctx = canvas.getContext( '2d' );

// ...

function renderLoop() {

    renderer.render( camera, scene1 );
    ctx.drawImage( renderer.domElement, 0, 0 );

    renderer.render( camera, scene2 );
    ctx.drawImage( renderer.domElement, 0, 0 );

}

这里有我遗漏的陷阱吗？

谢谢！

编辑

根据 gman 的要求，这里有一个示例表明该函数在调用 drawImage 之前似乎不会通过执行大量 GPU 工作（50000 个没有深度写入的实例化立方体）来阻塞。无论是一个立方体还是 50000 个立方体，无论是在 render() 之前还是之后调用，drawImage 函数都需要相同的时间，这让我相信 drawImage 不会阻塞。在装有最新 Chrome:

的 2017 Mac 笔记本电脑上测试

https://jsfiddle.net/sL9npto6/

Answer 1

Does canvas context2d.drawImage( webglCanvas, 0, 0 ) block until a webgl is finished rendering?

是的，它有效地阻止了

this page 上的最后一个示例完全符合您的渲染循环显示的内容。

如果你有一些你认为不显示的示例，请制作一个最小的回购协议 post 它是 snippet

canvas context2d.drawImage( webglCanvas, 0, 0 ) 是否阻塞直到 webgl 完成渲染？

Does canvas context2d.drawImage( webglCanvas, 0, 0 ) block until a webgl is finished rendering?

javascript

canvas

webgl

html5-canvas