Threejs 2000纹理瓶颈

Question

我已经和three.js玩了几个月了。最近，我们开始了一个three.js应用项目，这是一个三维webgl产品目录(想象平面上的产品图像是一个纹理512x512)，将base64图像存储到浏览器indexeddb中，在app加载下创建产品目录。

然而，我们有性能问题，假设一个类别的产品可能有100个产品，甚至更多，产品总数可能高达10000。

在每一个类别中，我们都以特定的方式呈现我们的模型(飞机)。因为应用程序应该提供一个良好的用户体验，所有的东西都是预先加载，纹理生成之前，应用程序启动和保存在内存。问题就从这里开始..。

目前，在一个拥有4gb内存的硬件和一个与cpu共享内存的车载gpu上，将导致铬崩溃。而且，每个模型都可以由用户通过触摸事件来拖动。

另一方面，我们尝试按需加载纹理，但这对用户体验有很大影响，它可能会将应用程序冻结1-2秒。

目前，正在为每种产品创造材料，没有任何纹理。纹理基于产品id存储在不同的对象上，当每个类别加载时，我们将纹理分配给每个模型。此外，我们处理纹理的材料，不再可见。

我的问题是，必须存储2000纹理是内存效率不高，并导致铬崩溃低坏的硬件。另一方面，如果我加载纹理随需用户体验冻结几秒钟.

请记住，每种型号都是通过用户触摸而拖动的。

我不面临任何编码问题，所以除非你想看到一些东西，否则没有必要显示任何代码。我主要关心的是建筑。

如果有更好的方式来实现这样的应用程序.我想过粒子系统，但是每个粒子都有不同的纹理会导致相同的结果？

Answer 1

你需要调查为什么你的加载过程是冻结应用程序几秒钟，这听起来太长了。

存储器

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

纹理地图集/巨型图集：

在这里使用巨型地图/纹理地图集并不是一种可行的方法。WebGL不支持以内存高效的方式实现这一点所需的特性。您需要以最大纹理大小( 8k到16k)分配纹理，然后将纹理平铺到其中，跟踪当前使用的纹理，以便用新的所需纹理更新地图集的任意部分。一旦你用完了地图集瓷砖，你需要分配一个新的地图集纹理的最大大小，这是你会遇到真正的打嗝和崩溃，因为你不能问有多少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();
}