title: WebGL is it possible to emulate an asynchronous call to gl.finish()
body: <p>WebGL is nice and asynchronous in that you can send off a long list of rendering commands without waiting for them to complete.  However, if for some reason you do need to wait for the rendering to complete, you have to do it synchronously with <code>gl.finish()</code>.  Surely it would be better if <code>gl.finish</code> accepted a callback and returned immediately?</p>
  
  <p><strong>Question:</strong> Is there any way to emulate this reliably? </p>
  
  <p><strong>Usage case:</strong> I am rendering a large number of vertices to a large off-screen canvas and then using <code>drawImage</code> to copy sections of this large canvas to small canvases on the page. I don't actually use <code>gl.finish()</code> but <code>drawImage()</code> seems to have the same effect. In my application, re-rendering is only triggered when the user performs an action (e.g. clicking a button), and it may take several hundred milliseconds.  It would be nice if during rendering the browser was still responsive allowing scrolling etc.  I am looking in particular for a Chrome solution, though something that also works in Firefox and Safari would be good.</p>
  
  <p><strong>Possible (bad) answer:</strong> You could try and estimate how long rendering is going to take and then set a timeout that begins with the call to <code>gl.finish()</code>.  However, reliably doing this estimation for all sizes of vertex buffer and all users is going to be pretty tricky and inaccurate.</p>
  
  <p><strong>Possible (non-)answer:</strong> <code>requestAnimationFrame</code> does what I'm looking for...it doesn't though, does it?</p>
  
  <p><strong>Possible answer in 2018:</strong> Perhaps the <code>ImageBitmap</code> API solves this problem - see <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas/transferToImageBitmap#Examples" rel="nofollow noreferrer">MDN docs</a>.</p>