javascript - 在 WebGL 中使用 texImage2D 加速或多线程纹理上传

Question

我正在构建一个遭受严重性能瓶颈的 WebGL 应用程序。应用程序通常需要将一组大型纹理（例如 2000 x 2000）突发上传到 GPU。现在它正在texImage2D通话中窒息。每次我打电话texImage2D都会出现明显的卡顿。当它们爆发时，它会完全扼杀 UI 体验。

这实际上是 OpenGL 应用程序的一个端口。在 OpenGL 中，这个问题是通过在单独的线程中上传纹理来解决的，并且效果很好。据我所知，在 WebGL 中没有直接的方法可以做任何类似的事情。我最初尝试OffScreenCanvas与工人一起使用。计划是将一个转移OffScreenCanvas到一个Worker将上传纹理的，但我发现我只能访问WebGLRenderingContext一个OffScreenCanvas中的一个Worker。这违背了我的目的。

有没有其他方法可以加快texImage2D呼叫速度，或者以某种方式让 CPU->GPU 传输发生在单独的Worker?

我可以将许多不同的来源传递给texImage2D调用，我可以期望它们中的一些比其他的性能更好吗？ImageBitmap看起来很有希望（我将对此进行测试），但我无法确定 an 的数据ImageBitmap是否保存在 GPU 中。

标签： javascripthtml5-canvaswebgl