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

标签 javascript google-chrome three.js webgl

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

以下是 4096 x 4096 纹理的示例配置文件: enter image description here

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

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

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

最佳答案

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

关于javascript - WebGL 大纹理导致 Chrome 中隐藏的停顿,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39213203/

相关文章:

javascript - Gmail 是如何创建这个自定义提示对话框的?

macos - Chrome OSX SSL 此证书的颁发者无效

javascript - 在 Three.js 中加载多个 Blender 导出的对象/网格+ Material

javascript - Three.js-如何限制 3D 场景中的摄像机 View ?

javascript - 即使函数不返回任何内容,onBeforeUnload 也会创建提示

javascript - 使用 Object.keys 和 lodash _.keys() 的性能差异是什么

javascript - Express JS 通过控制台日志查看

javascript - 如何在 React Material-UI 中更改事件选项卡 inkBarStyle 颜色和厚度?

javascript - CSS 问题 : Chrome adds 3px extra margin-right to text field

javascript - jsonloader 纹理未加载