Javascript Three.js/WebGL一次加载大量纹理数据，如何实现？

最近我有一个项目，我需要使用画布创建大量大型纹理，然后将它们上传到GPU。当页面加载时，我的内存一直在耗尽（chrome正在崩溃）并且“窒息”，因为所有的纹理都是同时通过GPU总线推送的

我决定错开

texture.needsUpdate=true调用，以便在一次渲染更新中不会将所有纹理推送到GPU

这是可行的，但我对其他解决方案很好奇

我之所以发布这篇文章，是因为它可能对其他在发布时加载所有纹理的人有所帮助。
将纹理剔除为零是停止过度加载的最佳方法。让它们在根部变小将改善接下来的一切

虽然这篇文章很老，但它在谷歌上的排名却很靠前。因此，这里有一些方便的提示，供其他3D游戏/web开发新手参考

纹理以固定位块的形式添加到缓冲区，块越少越好，但是以2的幂的分辨率创建纹理将防止加载半块并浪费位/时间。的幂指的是在每个实例（2、4、8、16、32、64）上加倍的数字序列，遵守此公式将防止位丢失

查看屏幕上纹理的大小。您的源代码可能是1024x1024，但如果它在屏幕上的高度只有20px，或者您的输出画布id为480x640，那么所有额外的信息都将丢失。减少纹理以匹配屏幕上的纹理

在同样的情况下，如果不使用纹理上的颜色，有时可以使用顶点着色和/或灯光向纹理添加回细节，在这种情况下，将纹理保存为灰度图像，或者通过索引它们来限制调色板大小

.gif对于小纹理是一种很好的格式，而Jpeg则更适合压缩大纹理。如果使用.gif，还可以通过将纹理分组到一张图像上并使用与之匹配的调色板来节省空间。还记得整个塞尔达LTTP游戏只运行了256色。有几种方法可以创建RGB索引数组，并将图像存储为从中提取的原始数字

如果要从JSON导入/导出，请记住图像默认为原始32位.png文件。它们本身很大，当作为位数据添加到JSON objet文件的末尾时会变得更大。
仅导出网格数据，并通过源代码中的JS将纹理添加回网格数据，可以使用更多格式并优化更多纹理。
我也有类似的问题。我加载了大约50MB的jpeg数据，我承认这是一个很大的数据量，但是内存开始被消耗，最终使用了超过8GB的RAM。我已经指出纹理是问题所在。它们是从JSON加载程序加载的。查看这篇关于使用压缩纹理的文章，将解释为什么你的JPG也会爆炸：我会添加一些我发现的东西。它在2个或更多材质上使用相同的纹理贴图（不同的着色属性）。JSON加载器每次将它们作为单独的纹理加载，而不是每个文件加载一个纹理（它应该根据文件名进行组合，这可能被认为是一个bug或功能请求）。这并不是真正解决问题，而是表明我们一开始没有大纹理。虽然我很欣赏你的细节，但我知道位和字节是如何工作的。事实仍然是，它们必须在某个时候发送到VRAM，我很好奇不同的用户如何避免缓冲区溢出和页面崩溃，如果同时发送所有纹理，这是一种典型的情况。