javascript - 在 Three.js 上渲染重型模型/网格

Question

我知道这是一个众所周知的问题，但我找不到好的答案。

我的使用情况

我使用 Three.js 来显示通过无人机图片创建的 3D 模型 ( here an example )。

问题

我无法渲染重型模型(1M 个顶点、2M 个面):Chrome 或 WebGl 崩溃了。

我尝试过的

我在所有测试中都使用了 Threejs.org 示例，以确保不是我的代码不起作用。我在 x64 Chrome 上使用 --max_old_space_size=6144 标志进行了测试。

• 使用 ColladaLoader 在 .dae 中导入模型 --> 使用 2.5Go 的 RAM，Chrome 崩溃(显示“内存不足”)
• 使用 OBJLoader + MTLLoader 在 .obj 中导入模型 --> 使用 2.8Go 的 RAM，WebGl 崩溃
• 我红色了很多关于 Three.js 和内存分配的帖子，但其中很多都谈到从场景中删除对象

可能的解决方案

• 我看到 .STL(二进制)文件更紧凑，但据我所知 这些文件没有纹理，所以我无法使用它
• 使用 BinaryLoader(具有 GeometryBuffer 输出)，但我需要将 .dae 或 .obj 转换为二进制文件，但我不知道该怎么做
• 将我的模型分成多个部分加载，而不是一次加载？但我没有看到任何这样处理的示例或帖子

如何重现

对于代码，我使用 Threejs.org 上的基础示例。对于模型:

• 如果您想尝试使用 .dae，您可以在 this folder 上找到一个工作示例(WorkingModel.dae/.jpg)和不工作的模型(BigModel.dae/.jpg)
• 如果您想尝试使用 .obj，您可以在 this folder 上找到一个工作示例(WorkingModel.dae/.jpg/.mtl)和不工作的模型(BigModel.dae/.jpg/.mtl)

有什么想法可以加载大的吗？ 谢谢!

编辑 1:

我尝试在 SuccessCallback 中放置一个断点，以查看 RAM 过载是在加载期间还是之后。我无法命中断点，因此 RAM 过载发生在 SuccessCallback 之前。

然后我在 ColladaLoader 中一步步查找到底是什么占用了这么多 RAM。这是“调用堆栈”:

• myCollada.load()
• ColladaLoader.parse()
• Geometry.parse()
• Mesh.parse()
  • Source.parse(命中 3 次)= +400mo RAM
  • Vertices.parse = +0mo 在 RAM 中
  • Triangles.parse = RAM 中 +1500mo
  • this.geometry3js.computeVertexNormals() = RAM 超过 2600Mo 并且 chrome 崩溃

我可以做其他测试来找出这个问题的原因吗？ 谢谢

Answer 1

您的纹理太大了，而且您不需要它们，因为您的模型已烘焙顶点颜色，其中包括烘焙照明。因此，您的模型也不需要 UV。

使用ColladaLoader2，以及这个模式。它应该可以工作。

var loader = new THREE.ColladaLoader();

loader.load( 'BigModel.dae', function ( collada ) {

        var dae = collada.scene;

        dae.traverse( function( child ) {

            if ( child instanceof THREE.Mesh ) {

                child.geometry.removeAttribute( 'uv' ); // you don't need it

                child.material = new THREE.MeshBasicMaterial( { // scene lights not required

                    vertexColors: THREE.VertexColors // you have them, use them

                } );

                scene.add( child );
            }

        } );

} );

三.js r.86