javascript - Threejs 2000 纹理瓶颈

Question

我已经使用 Three.js 几个月了。最近我们启动了一个 Three.js 应用程序项目，它是一个 3D webgl 产品目录(将产品图像想象为纹理 512x512 的平面)，将 Base64 图像存储到浏览器 indexeddb 中，并在应用程序加载时创建产品目录。

但是我们存在性能问题，想象一下一个产品类别可能有 100 个产品甚至更多，而产品总数可能高达 10000 个。

在每个类别中，我们都以特定的方式展示我们的模型(飞机)。因为应用程序应该提供良好的用户体验，所以所有内容都已预先加载，因此纹理在应用程序启动之前生成并保存在内存中。这是问题开始的地方......

目前，在具有 4GB RAM 和与 CPU 共享内存的板载 GPU 的硬件上，会导致 chrome 崩溃。此外，每个模型都可以由用户通过触摸事件拖动。

另一方面，我们尝试按需加载纹理，但这对用户体验影响很大，可能会卡住应用 1-2 秒。

目前正在为每个产品创建没有任何纹理的 Material 。纹理根据产品 ID 存储在不同的对象上，当每个类别加载时，我们将纹理分配给每个模型。我们还处理不再可见的 Material 的纹理。

我的问题是，必须存储 2000 个纹理，内存效率不高，并且会导致 chrome 在低徽章硬件上崩溃。另一方面，如果我按需加载纹理，用户体验会卡住几秒钟......

请记住，每个模型都可以通过用户触摸进行拖动。

我没有遇到任何编码问题，因此没有必要显示任何代码，除非您想查看某些内容。我主要关心的是建筑。

如果有一种更高效的方法来实现这样的应用程序...我想到了粒子系统，但是每个粒子具有不同的纹理会产生相同的结果吗？

Answer 1

您需要调查一下为什么您的加载过程会卡住应用几秒钟，这听起来太长了。

内存

考虑数据的大小，假设您的 512x512 纹理仅每个大小约为 256kb，对于 2000 个纹理，您仍试图存储 500MB(+ ~33% base64 开销) indexedDB 中的数据目前限制为 5MB。因此，无论哪种方式，您都必须按需加载纹理。

纹理图集/巨型纹理:

使用巨型纹理/纹理图集在这里不是一个可行的方法。 WebGL 不支持以内存有效方式实现此功能所需的功能。您需要分配最大纹理大小(8k 到 16k 之间)的纹理，然后将纹理平铺到其中，跟踪当前使用的纹理，以便您可以使用新的所需纹理更新图集的任意部分。一旦你用完阿特拉斯图 block ，你需要以最大尺寸分配一个新的阿特拉斯纹理，这就是你会遇到真正的问题和崩溃的地方，因为你无法查询有多少可用的 GPU 内存。

实现自适应加载队列:

var textureQueue = [];
// on visible
if (loadedTextures[textureID])
    return object.texture = loadedTextures[textureID];

textureQueue.push(textureID);
object.texture = loadingTexture;

// each update
var
    startLoading = window.performance.now(),
    currentTime = startLoading,
    loadID
;
while(
    currentTime - startLoading < 10/*ms*/ &&
    loadID = textureQueue.shift()
) {
    /** load and assign texture here **/
    currentTime = window.performance.now();
}