javascript - Three.js/WebGL一次加载大量纹理数据，如何处理？

Question

最近我有一个项目，我需要使用 Canvas 创建大量大型纹理，然后将它们上传到 GPU。由于所有纹理都同时通过 GPU 总线推送，因此当页面加载时我经常用完内存(chrome 崩溃)和“窒息”。

我决定错开 texture.needsUpdate = true; 调用，这样就不会在一次渲染更新中将所有纹理推送到 GPU。

这行得通，但我对任何其他解决方案感到好奇...

我发布这个是因为它可能对其他在启动时加载所有纹理的人有帮助...

Answer 1

将纹理剔除至零是停止过度负载的最佳方式。从根本上缩小它们将改善后续的一切。

虽然这篇文章很旧，但它在谷歌上显示为最高结果。因此，这里有一些适用于任何其他初学者 3D 游戏/网络开发人员的实用提示。

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

在屏幕上查看纹理的大小。您的来源可能是 1024x1024，但如果它在屏幕上的高度仅为 20 像素或您的输出 Canvas ID 为 480x640，则所有额外信息都将丢失。减少纹理以匹配屏幕上的内容。

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

.gif 是小纹理的好格式，而 Jpeg 更适合压缩大纹理。如果您使用 .gif，您还可以通过将纹理分组在一个图像和匹配它们的调色板中来节省空间。请记住，整个塞尔达 LTTP 游戏仅使用了 256 种颜色。有多种方法可以创建 RGB 索引数组并将图像存储为从中提取的原始数字。

如果您从 JSON 导入/导出，请记住您的图像默认为原始 32 位 .png 文件。它们本身很大，当作为位数据添加到 JSON 对象文件的末尾时会变得更大。仅导出网格数据并通过源代码中的 JS 将纹理添加回它可以让您使用更多格式并优化更多纹理。