Three.js纹理模型崩溃移动

Question

我正在开发一个three.js应用程序 - 当模型完全纹理化时，它会导致移动设备崩溃。

是否有一种方法 - 比如VRML - 将距离场应用于模型 - 在更远的地方使用较低分辨率的纹理 - 或者仅将纹理应用于POV中的模型？

Answer 1

以下是devtools的输出，包括有效的和无效的（您在评论中提供的链接）。
顶点数似乎不是问题 但仔细看看纹理的大小（具体来说，最后一个） 电话不会有内存来存储所有这些纹理。 将纹理大小调整为较小的尺寸，例如。 1024

Answer 2

没有太多可继续下去的内容，以下是我要审核的内容：

您的纹理，可能是jpg或png在ram中解压缩为位图并占用大量资源。例如，如果你有20个纹理，并且它们各自为2 mb，则在分配的ram中可能是800mb。分配以块为单位完成。例如，在Safari mobile中，加载1像素图像将分配与解码的1024x1024图像相同的ram！在桌面上，我们可以选择使用DDS images或类似功能，通过将这些图像保留在VRAM中来帮助解决性能问题。不幸的是，对DDS图像的移动支持至多是粗略的。您可以在一个简单的测试中找到how to load DDS images，看看它是否适用于您的目标设备。

如果它不符合您的需求，您需要在其他地方寻找优化：

您可以查看您的帧速率，了解您要求浏览器渲染的频率，并限制三个仅在用户输入触摸交互以更改相机或任何场景对象时调用渲染。

同样，如果您可以支持DDS图像，建议使用512x512和1024x1024的纹理，这些纹理在单个纹理文件上共享多个纹理。虽然对于Unity，this blog post也有适用于three.js的有用信息。理解所解释的概念是很好的，特别是在针对有限的设备时。

还要确保您的面部数量可以控制。您拥有的面越多，在所有这些面上正确放置纹理所需的索引就越多。这可能导致非常大的数组，以及JavaScript中非常长的过程，这些过程可能会超出移动RAM分配。您可以使用a decimation plugin

优化您的面部数量

至于剔除，你不太可能看到性能提升，因为你可能会遇到一个无论如何都要分配的ram问题。您可以使用a decimation plugin，并在检测到移动设备时切换到一组特定的模型。您还可以确定到网格的摄像机距离，以确定是否应该用更详细的内容替换几何体，但在加载更详细的模型时仍需要考虑所有上述性能问题。