Display complex 3D models using three.js

Question

Display complex 3D models using three.js

This question is widely known, but unfortunately, I have been unable to find a satisfactory answer.

My Approach

I utilize three.js for showcasing 3D models generated from drone images (example here).

The Issue

I face difficulty rendering large models (1M vertices, 2M faces) as Chrome or WebGL crashes.

Attempted Solutions

I conducted tests using examples from Threejs.org to ensure it wasn't an issue with my code. These tests were carried out on a x64 Chrome with the --max_old_space_size=6144 flag.

Importing model in .dae format using ColladaLoader results in the utilization of 2.5GB RAM and Chrome crashing due to insufficient memory.
Importing model in .obj format with OBJLoader + MTLLoader consumes 2.8GB RAM leading to WebGL crash.
I read numerous posts about Three.js and memory allocation, however, most focus on removing objects from the scene which is not applicable in this scenario.

Potential Resolutions

.stl (binary) files are more compact, but lack texture support which makes them unsuitable for my use case.
Using BinaryLoader with GeometryBuffer output requires converting .dae or .obj files to binary, a process I am unfamiliar with.
Breaking down the model into multiple parts for incremental loading could be an option, although I haven't found any references supporting this approach.

Reproduction Steps

For coding, I refer to basic examples on Threejs.org. Regarding models:

If experimenting with .dae files, you can access working and non-working examples in this folder.
Similarly, if dealing with .obj files, check out samples in this folder.

Any suggestions on how to load the larger model? Thanks!

EDIT 1 :

To determine if the RAM overload occurs during or after the load, I attempted to set a breakpoint in the SuccessCallback without success. This suggests that the RAM overuse transpires before reaching the SuccessCallback.

I proceeded to delve into the ColladaLoader step by step to identify what's consuming excessive RAM. Here is the "callstack":

myCollada.load()
ColladaLoader.parse()
Geometry.parse()
Mesh.parse()
- Source.parse (triggered 3 times) = +400MB in RAM
- Vertices.parse = no increase in RAM
- Triangles.parse = +1500MB in RAM
- this.geometry3js.computeVertexNormals() = RAM exceeds 2600MB causing Chrome to crash

Are there any other tests I can perform to pinpoint the root cause of this problem? Thank you.

javascript google-chrome memory three.js

Answer 1

Answer №1

Your textures are way too large, and there is no need for them since your model already has baked vertex colors with lighting included. UV mapping is unnecessary for your model.

Try using ColladaLoader2 along with this method. It should do the trick.

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' ); // not needed

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

                    vertexColors: THREE.VertexColors // utilize the baked vertex colors

                } );

                scene.add( child );
            }

        } );

} );

Using three.js r.86

Answer 2

Your textures are way too large, and there is no need for them since your model already has baked vertex colors with lighting included. UV mapping is unnecessary for your model.

Try using ColladaLoader2 along with this method. It should do the trick.

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' ); // not needed

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

                    vertexColors: THREE.VertexColors // utilize the baked vertex colors

                } );

                scene.add( child );
            }

        } );

} );

Using three.js r.86

Display complex 3D models using three.js

Answer №1

Similar questions

Prevent the add to cart button from being clicked if the product is out of stock in Laravel

Is it possible to use Three.js camera lookAt function without any rolling?

Guide to initializing modules in Angular 2+ using server-side responses

Finding the data type based on the button clicked with javascript: A beginner's guide

Assign the values from the axios response to variables within the exported const

Encountering issues with postback functionality on an ASP.NET webpage while attempting to integrate Google

arrange data based on table heading using vue.js

Is there a way to implement full-page scrolling in Vue?

How to retrieve the current event handler's value with jQuery

Arrangement of watch attachment and $timeout binding

jQuery - Error: Unexpected token SyntaxError

Guide on how to set a custom image as the cursor when clicking on an image through javascript

Having trouble bringing in icons from the @mui/icons-material library

Please enter a string and I will locate it within an array. If found, I will provide you with information about that string as a fact

The Facebook login pop-up is not visible, however, it is still delivering on its promise

Calculating the distance of the camera in Three.js with respect to the size of the object

Transform a key:value string with multiple lines into a JSON format

Customizing Webpack 4's Entry Point

Error: Encountered an unforeseen symbol '<' during AJAX request

The manipulation of geometries in Three.js through rotation and positioning