将模型导入到three.js - 性能 [英] Importing model into three.js - performance
问题描述
是否有关于从文件加载 3D 模型以在 Three.js JavaScript 应用程序中使用的性能的好的/推荐的方法(尤其是在 Blender 中生成模型的地方)?
Is there a good/recommended approach regarding performance to load a 3D model from file to be used in a three.js JavaScript application (especially where the model is generated in Blender)?
我目前有以下工作流程:
I currently have the following workflow:
- 在 Blender 中创建模型.
- 使用three.js 导出器导出.
- 使用
THREE.JSONLoader
从 javascript 加载
- Create model in Blender.
- Export using the three.js exporter.
- Load from javascript using
THREE.JSONLoader
这很好用,只是生成的 JSON 文件可能大约为 4MB,如果我能减小这个大小就好了.我想知道最好的方法是什么:-
This works great except that the resultant JSON file can be around 4MB and it would be good if I could reduce this size. I am wondering what the best approach is: -
- 缩小 JSON 文件(有点棘手,因为我遇到的大多数 js 缩小器似乎都不起作用),或者
- 使用 gzip 压缩(需要一些握手),或者
- 使用二进制格式(我想这需要转换回 JSON)或
- 使用 OpenCTM 格式(不幸的是,这些脚本在 Blender 2.70 中似乎不起作用).
我做了一些研究,代表性的例子是这里、这里,此处和此处.从我发现的主要方法似乎属于我在上面的要点中列出的方法.每个人都有一些障碍需要克服.
I have done some research, representative examples being here, here, here and here. From what I have found the main approaches seem to fall under those I have listed in the bullet points above. Each have some hurdles to overcome.
所以,我问 - 是否有关于从文件加载模型的性能的好/推荐方法?
So, I am asking - is there a good/recommended approach regarding performance to load a model from file?
更新
所以,我问这个问题已经有一段时间了,我想我会报告我采取的方法.最后,我优化了模型,减少了顶点的数量,而不会对我使用它们的尺寸造成太大的可见质量损失.我还在客户端的 indexeddb 中缓存为 blob.
So, it has been a while since I asked this question and I thought I'd report back on the approach I took. In the end I optimised the models, reducing the number of vertices without much loss of visible quality for the size that I am using them for. I also cache on the client in indexeddb as a blob.
推荐答案
我对此类问题有过一些经验.这里的问题是您的模型很可能有很多点/多边形.因此,无论您使用何种格式,都必须描述模型的每个点和面.这确保了大文件大小,并且没有办法解决它.
I've had some experience with this kind of problem. The issue here is that you model most likely has a lot of points/polygons. So no matter what format you use every point and face of your model has to be described. This ensures a large file size and there is no way around it.
我的解决方案是查看 Blender 而不是 Three.js 并优化我的模型.关于这个主题有很多帖子(例如 这里,这里,以及此处).在详细了解 Blender 的工作原理后,我能够将大部分 4-8 Mb 网格减少到 <每个 200kb,浏览器中呈现的对象没有明显降低.
My solution was to look at Blender rather than Three.js and optimise my models. There are a ton of posts on this topic (e.g. here, here, and here). After learning more about how Blender works, I was able to reduce most of my 4-8 Mb meshes down to < 200kb each without noticable degradation to the objects rendered in the browser.
这篇关于将模型导入到three.js - 性能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!