WebGL 大纹理导致 chrome 中的隐藏停顿
WebGL large texture causes hidden stalling in chrome
在 Windows 10（使用 Three.js）在 WebGL 中初始化大型 (4096 x 4096) 纹理时，chrome 的主线程停顿了相当长的时间，而探查器显示没有任何反应。
这是 4096 x 4096 纹理的示例配置文件：
1500ms 之前的 "plateau" 是在 Three.js 和 WebGL 中对 texImage2D 的调用，然后 requestAnimationFrame 代码在幻影间隙显示之前被调用两次向上。
这是什么原因造成的？ chrome 中的底层 WebGL 代码是否发生了探查器未报告的事情？为什么调用 texImage2D 需要 90 毫秒，然后出现空白点？我希望所有涉及将纹理加载到 GPU 的工作都发生在那里。
Here is a link 应该重现该行为。
嗯，4096 x 4096 是一个大纹理，将所有数据传输到 GPU 需要一些时间。如果您正在调用 texImage2D 然后立即调用 drawArrays，则 drawArray 无法执行，直到 texImage2D 中的上传完成。这解释了您在探查器中看到的延迟。
原来这里的问题出在requestAnimationFrame。这里有两个配置文件来说明
requestAnimationFrame:
setTimeout:
这似乎是一个相当大的问题，因为现有的大多数 WebGL 教程都提到 requestAnimationFrame 是执行动画循环的 "correct" 方法。
已在此处更新 demo。
在 Windows 10（使用 Three.js）在 WebGL 中初始化大型 (4096 x 4096) 纹理时，chrome 的主线程停顿了相当长的时间，而探查器显示没有任何反应。
这是 4096 x 4096 纹理的示例配置文件：
1500ms 之前的 "plateau" 是在 Three.js 和 WebGL 中对 texImage2D 的调用，然后 requestAnimationFrame 代码在幻影间隙显示之前被调用两次向上。
这是什么原因造成的？ chrome 中的底层 WebGL 代码是否发生了探查器未报告的事情？为什么调用 texImage2D 需要 90 毫秒，然后出现空白点？我希望所有涉及将纹理加载到 GPU 的工作都发生在那里。
Here is a link 应该重现该行为。
嗯，4096 x 4096 是一个大纹理，将所有数据传输到 GPU 需要一些时间。如果您正在调用 texImage2D 然后立即调用 drawArrays，则 drawArray 无法执行，直到 texImage2D 中的上传完成。这解释了您在探查器中看到的延迟。
原来这里的问题出在requestAnimationFrame。这里有两个配置文件来说明
requestAnimationFrame:
setTimeout:
这似乎是一个相当大的问题，因为现有的大多数 WebGL 教程都提到 requestAnimationFrame 是执行动画循环的 "correct" 方法。
已在此处更新 demo。