在three.js上渲染较重的模型/网格

Question

I know this is a well known question but I was not able to find a good answer.

My usage

I use three.js to display 3D models created through drone pictures ( here an example ).

The problem

I can't render heavy models (1M vertices, 2M faces) : Chrome or WebGl crashed.

What I tried

I used Threejs.org examples for all my tests to be sure that it was not my code that didn't work. I made my test on a x64 Chrome with --max_old_space_size=6144 flag.

• Import model in .dae with ColladaLoader --> 2.5Go of RAM is used and Chrome crash (displaying "not enough memory")
• Import model in .obj with OBJLoader + MTLLoader --> 2.8Go of RAM is used and WebGl crash
• I red many posts about Three.js and memory allocation but many of them speak about remove an object from the scene

Possible solutions

• I saw that .stl (binary) file are more compact, but as far as I know there is no texture with these files, so I can't use it
• Use BinaryLoader (which has GeometryBuffer output) but I need to convert .dae or .obj to binary files and I don't know how to do that
• Load my model in multiple parts to not load in one shot ? But I didn't saw any example or posts with that kind of treatment

How to reproduce

For the code, I use basics examples on Threejs.org. For models :

• If you want to try with .dae you can find on this folder a working example (WorkingModel.dae / .jpg) and the model who don't work (BigModel.dae / .jpg)
• If you want to try with .obj you can find on this folder a working example (WorkingModel.dae / .jpg / .mtl) and the model who don't work (BigModel.dae / .jpg / .mtl)

Any ideas to load the big one ? Thanks !

EDIT 1 :

I tried to put a breakpoint in the SuccessCallback to see if the overload of RAM is during the load or after. I was not able to hit the breakpoint, so the overload of RAM is before the SuccessCallback.

Then I went step by step in the ColladaLoader to find what is using so much RAM. Here is the "callstack" :

• myCollada.load()
• ColladaLoader.parse()
• Geometry.parse()
• Mesh.parse()
  • Source.parse (hit 3 times) = +400mo in RAM
  • Vertices.parse = +0mo in RAM
  • Triangles.parse = +1500mo in RAM
  • this.geometry3js.computeVertexNormals() = RAM go over 2600Mo and chrome crash

Could I do any other tests to find the reason of this problem ? Thanks

Answer 1

Your textures are waaaay to big, and besides, you don't need them because your model has baked vertex colors, which includes baked lighting. Your model therefore does not require UVs eiher.

Use ColladaLoader2 , and this pattern. It should work.

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 );
            }

        } );

} );

three.js r.86