为单个大型模型优化Three.js

时间:2017-06-01 13:42:45

标签: javascript three.js webgl

我正在构建一个文件浏览器/ 3D模型查看器。我想将各种格式的模型(atm only .OBJ)加载到场景中,并使用orbitControls.js获得合理的帧率。

我见过的大多数优化策略都围绕处理许多网格而不是单个大网格。 有史以来最好的目标是加载巨大的文件(数十万/百万个顶点)并且不会崩溃。我知道这很遥远,但我甚至不知道从哪里开始优化这个问题所以我可以至少提高一点帧率。到目前为止谷歌没有帮助我

1 个答案:

答案 0 :(得分:0)

gpio_enable_addr = gpio_addr + _PIO_OFFSET - (_PA_OFFSET) + _PIO_ENABLE; 没有做的事情 - 这可能真的有助于提高你的表现 - 是索引(具有共享顶点/正常对的面)。我从Blender导出了一个立方体,得到了36个索引(1个三角形= 3个顶点,每个立方体面对2个三角形= 6个顶点,6个面= 36个顶点)。具有索引的相同立方体将是24个顶点。

索引 会根据索引的数量增加对象的大小。立方体就是一个不好的例子(24个索引),因为很少有人共享相同的顶点,但对于复杂的网格,节省的费用可能非常高。

我认为解释索引如何工作的所有细节超出了答案的范围,我确信其他资源比我做得更好,但这是一个小平面的例子:

OBJLoader

请注意,两个顶点索引使用了两次,这使我们只能在var planeGeo = new THREE.BufferGeometry(); planeGeo.addAttribute("position", new THREE.BufferAttribute(new Float32Array([ -10, 10, 0, -10, -10, 0, 10, -10, 0, 10, 10, 0 ]), 3)); planeGeo.addAttribute("normal", new THREE.BufferAttribute(new Float32Array([ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1 ]), 3)); planeGeo.setIndex(new THREE.BufferAttribute(new Float32Array([ // triangle 1 0, 1, 2, // triangle 2 3, 2, 1 ]), 1)); 缓冲区中拥有一个顶点副本。

要记住的一件事是索引应该适用于顶点/正常对。顶点和法线没有离散索引,因此如果一个顶点有两个法线,则仍需要position缓冲区中顶点值的第二个副本。

但这对你有什么帮助?嗯,它没有直接。我建议您修改position以创建索引OBJLoader对象(BufferGeometry方法需要更智能地创建正确的索引),或者编写自己的全新对象parse功能。后者实际上对您更有用,因为您可能需要创建新的加载器来处理您希望支持的其他文件格式。