javascript - WebGL 大纹理导致 Chrome 中隐藏的停顿

Question

在 Windows 10(使用 Three.js)上的 WebGL 中初始化大型 (4096 x 4096) 纹理时，chrome 的主线程会停滞相当长的时间，而分析器则显示没有任何反应。

以下是 4096 x 4096 纹理的示例配置文件:

1500ms 之前的“稳定期”是在 Three.js 和 WebGL 中调用 texImage2D，然后在幻影间隙显示之前 requestAnimationFrame 代码被调用两次向上。

这是什么原因造成的？ Chrome 中的底层 WebGL 代码是否发生了探查器未报告的情况？为什么调用texImage2D需要90毫秒，然后出现空白点？我希望所有涉及将纹理加载到 GPU 的工作都在那里发生。

Here is a link这应该会重现该行为。

Answer 1

4096 x 4096 是一个很大的纹理，需要一些时间才能将所有数据传输到 GPU。如果您先调用texImage2D，然后立即调用drawArrays，则直到texImage2D中的上传完成后，drawArray才能执行。完毕。这解释了您在分析器中看到的延迟。