three.js逐步加载纹理

如何创建类似Sketchfab动态加载3d模型和纹理的加载行为。即，一旦加载几何体，它被添加到场景中…然后纹理以更高的分辨率进行流式处理。
下面是一个使用sketchfab加载的示例：
使用three.jsgltf加载程序如下所示：三次加载986×568 1.87 MB
您可以看到，只有在完成所有加载后才显示模型已完成。
这仅仅是存储低分辨率版本的纹理以便缩短初始加载时间的问题吗？还是有更奇特的方式来传输纹理数据？
我正在处理gltf文件，有些是二进制文件，有些是JSON文件，包含嵌入式或外部纹理/bi
文件。所有文件都托管在外部存储器中，并通过http访问（而不是本地存储在计算机上）。由donmccurdy在《post#2》中解决。几乎每当您在模型上有纹理时，都会有一个mipmap链，每个纹理的版本越来越小。例如：1024x1024512x512256x256…2x21x1带有PNG和JPEG纹理（大多数模型都使用）mipmap链通常在加载模型时动态生成，…
几乎每当模型上有纹理时，都会有一个mipmap链26，每个纹理的版本越来越小。例如：n1024x1024512x512256x256...2x21x1
具有PNG和JPEG纹理（大多数模型都使用）通常在加载模型时动态生成mipmap链，并从原始高分辨率图像调整大小。使用更高级的GPU压缩纹理（如DDS、KTX和Basis），不可能动态生成mipmap，因此您必须预先计算它们。它们有点不方便，但这些纹理有一些性能优势，所以像Sketchfab这样的查看器可能正在使用它们。另一个好处是，如果你已经预先计算了一组需要下载的图像的低分辨率版本，那么你最好先下载低分辨率版本，这样你就可以开始将它们添加到场景中，然后再增加分辨率。我想Sketchfab就是这么做的。
你可以用PNG/JPG纹理做同样的事情，但实际上人们通常不这么做。我不确定这是否有重要原因，或者只是不方便。在任何情况下，您的模型都已经包含图像的全分辨率版本，因此如果您已经下载了该版本，您也可以对其进行渲染。nglTF将添加对具有流媒体功能的GPU压缩纹理的支持，其开始部分在https://github.com/mrdoob/three.js/pull/1849045但是流媒体部分还不存在，所以还有一条路要走。
与此同时，你需要自己管理你的纹理，在模型之外，来尝试这一点。
非常好的解释，谢谢。
所以mip映射几乎就是我想要的……除非它只在加载时间之后发生，因此，对于我想要实现的目标来说，这不是很有用……正如你所指出的那样——我已经拥有了完全分辨率的纹理。
下面的方法在理论上可行吗？n- 存储每个纹理的多个版本，并减小其大小（例如1024、512、256、128）。n- 加载模型后，确保模型引用的是最低分辨率的纹理，使用其他逻辑下载低分辨率纹理，并将其替换为下一个最高分辨率版本…重复此操作，直到加载了最高分辨率为止。
，这在功能上是可行的。您不一定需要存储整个链，如果您在最后从最终的高分辨率图像动态生成mips，几个文件可能就足够了。实际上，PNG/JPEG图像还有一个障碍，那就是较大的图像需要一段时间才能解码并上传到GPU。结果是，在您已经开始使用低分辨率版本进行渲染后，当高分辨率图像上载到GPU时，您可能会有XXms的冻结时间。这可能还可以，具体取决于您的用例。您可以配置应用程序，并在现有模型中看到这一点-纹理GPU上载调用通常很容易在Chrome dev tools profiler中看到。
好的，谢谢。很高兴知道我可以使用开发工具对此进行分析。
我可以确认加载低分辨率纹理确实会对模型的初始加载产生巨大影响。在我的（相对高性能）机器上，为一个简单模型加载512x512分辨率的纹理会导致即时显示，将纹理分辨率增加到1024x1024会导致3-4秒的加载时间延迟。
我相信类似于为Three.js·GitHub 62有助于实现我们的目标。
请参阅这篇评论是关于在背景中渲染两个场景，并在其中一个加载纹理21时在它们之间交替，以及在一个实时示例中进一步渲染我倒下去了。基本上，概念是你可以有两张画布，两个工人用THREE在你之间交替（在给定时间只有一个场景加载纹理，另一个场景进行渲染），以显示只有一个场景在加载纹理时不会暂停
Load textures progressivelyn

three.js逐步加载纹理

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形