I assume the answer is “no” from my testing but I thought I’d make sure.
I’m trying to draw / copy the contents from a WebGL canvas to a 2d canvas every frame and I want to know if I should wait until the WebGL context is finished drawing (which I can use gl.fenceSync to check) before calling it or if I can call drawImage
immediately without worrying about a performance hit. Here’s how I would plan to use it using three.js as a stand in renderer:
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 );
}
Is there a pitfall here I’m missing? Here’s a jsfiddle showing the basic concept.
I created a post at Stackoverflow but figured I’d post here in case someone knew the answer. It’s not clear to me from the docs online. Here’s the SO link.