WebGL 是否可以模拟对 gl.finish() 的异步调用

Question

WebGL 很好而且是异步的，因为您可以发送一长串渲染命令而无需等待它们完成。但是，如果由于某种原因确实需要等待渲染完成，则必须与 gl.finish() 同步进行。 .如果gl.finish当然更好接受回调并立即返回？

问题:有没有办法可靠地模拟这一点？

使用案例:我将大量顶点渲染到一个大的屏幕外 Canvas ，然后使用 drawImage将此大 Canvas 的部分复制到页面上的小 Canvas 。我实际上不使用 gl.finish()但是 drawImage()似乎有同样的效果。在我的应用程序中，仅当用户执行操作(例如单击按钮)时才会触发重新渲染，并且可能需要数百毫秒。如果在渲染期间浏览器仍然响应允许滚动等，那就太好了。我特别在寻找 Chrome 解决方案，尽管在 Firefox 和 Safari 中也可以使用的东西会很好。

可能的(错误的)答案:您可以尝试估计渲染需要多长时间，然后设置从调用 gl.finish() 开始的超时时间。 .然而，对所有大小的顶点缓冲区和所有用户可靠地进行这种估计将是非常棘手和不准确的。

可能的(非)答案: requestAnimationFrame我正在寻找的东西......但它没有，是吗？

2018 年可能的答案:也许ImageBitmap API 解决了这个问题——见 MDN docs .

Answer 1

您已经部分回答了:drawImage()确实具有类似完成的行为，因为它强制所有未完成的绘图命令在它读回图像数据之前完成。问题是即使gl.finish()做你想做的事，等待渲染完成，你仍然会像现在一样使用它。渲染完成时主线程将被阻塞，从而中断用户与页面交互的能力。

理想情况下，您在这种情况下想要的是某种回调，指示何时完成一组绘制命令，而实际上没有阻塞等待它们。不幸的是，不存在这样的回调(考虑到浏览器的内部工作方式，提供一个回调会非常困难!)

在您的情况下，一个体面的中间立场可能是对您认为图像何时准备就绪进行一些智能估计。例如，一旦您通过 3 或 4 requestAnimationFrame 调度了您的绘图调用s 在您调用之前 drawImage .如果您始终观察到它花费的时间更长(10 帧？)，则旋转更长时间。这将允许用户继续与页面正常交互，并且在绘制图像时不会产生延迟，因为内容已经完成渲染，或者由于您在渲染中途执行同步步骤而产生更少的延迟。根据您网站的预期用途，非实时渲染甚至可能在呈现之前旋转一整秒左右。

这当然不是一个完美的解决方案，我希望我有一个更好的答案给你。也许 WebGL 将来会获得查询此类状态的能力，因为它在像您这样的情况下会很有值(value)，但就目前而言，这可能是您能做的最好的事情。