Three.js 完全冻结 Chrome，GLTF 模型中的巨大纹理

Posted 2023-02-27

【中文标题】Three.js 完全冻结 Chrome，GLTF 模型中的巨大纹理

【英文标题】：Three.js freezes Chrome completely, huge texture in GLTF model

【发布时间】：2022-01-12 11:51:11

【问题描述】：

我想加载一个只有几个多边形 (~250) 和 10,000 x 5,500 像素的巨大纹理的可笑二进制 glTF 对象。该文件“仅”20MB 大小。

当我使用 Three.js 加载它时，Chrome 完全挂起将近 15 秒。在探查器中查看时，在冻结期间几乎没有发生任何事情。

如果你想自己加载文件，可以在https://phychi.com/uni/threejs/models/freezing-monster.glb下载，在https://phychi.com/uni/threejs/可以访问整个场景（直到找到解决方案或放弃）。

无论我调用 GLTFLoader.load()、GLTFLoader.loadAsync() 还是创建自己的 Promise 并调用 .then(addToScene)，行为都保持不变，无需任何等待。

有人有神奇的解决方案吗？或者，如果没有，我怎样才能更有效地分析它，查看内部调用？还是我应该只打开 Chrome/Three.js 的错误报告？

PS：Windows 10 个人版、锐龙 5 2600、32 GB RAM、RX 580 8GB。

【参考方案1】：

应该通过将库升级到r135（当前版本）来解决该问题。

r133 和 r134 版本有一个变化，在使用 sRGB 编码纹理时在 Windows 上引入了性能回归。

【讨论】：

还要注意所有纹理（不包括特殊的压缩 GPU 纹理格式）在上传到 GPU 之前必须解压缩。一个 10,000 x 5,500px 的纹理在解压缩后大约为 300 MB，因此解压缩和上传仍然需要相当长的时间——即使在 r135 中修复了错误。