Bringing a model into three.js: The impact on performance

Question

Bringing a model into three.js: The impact on performance

Exploring the optimal method for loading a 3D model in a three.js JavaScript application, specifically when the model is created in Blender, poses an intriguing challenge.

The current workflow entails:

Designing the model in Blender.
Exporting using the three.js exporter.
Loading from javascript utilizing THREE.JSONLoader

While this process works effectively, the resulting JSON file can reach sizes of approximately 4MB. Hence, it becomes imperative to seek methods to minimize this size without compromising performance. Potential solutions include: -

Minimization of the JSON file (albeit challenging due to limited js minifiers functionality), or
Utilizing gzip compression (though requiring specific configurations), or
Adopting a binary format (after converting back to JSON) or
Implementing OpenCTM format (hampered by compatibility issues with Blender 2.70).

Research conducted includes detailed studies such as here, here, here and here. The overarching consensus revolves around the approaches outlined above, each presenting its unique challenges.

Therefore, the query lingers - what constitutes the most favorable approach in terms of optimizing performance during the model loading phase?

Update

Considering the time elapsed since posing this question, I felt compelled to share the strategy I ultimately pursued. I opted to optimize the models, reducing vertex count while maintaining visual quality at the desired scale. Additionally, I implemented client-side caching within indexeddb as a blob.

javascript json three.js blender

Answer 1

Answer №1

Dealing with these types of issues is something I've encountered before. The main problem lies in the fact that your model likely contains a high number of points and polygons. This means that regardless of the format you choose to use, each individual point and face of your model must be detailed. As a result, this leads to large file sizes that are unavoidable.

To address this issue, I decided to explore Blender as an alternative to Three.js and focused on optimizing my models. There are numerous resources available on this topic (such as here, here, and here). By familiarizing myself with Blender's functionalities, I was able to decrease the size of my 4-8 Mb meshes to under 200kb each without any noticeable loss in quality when viewed in a web browser.

Answer 2

Dealing with these types of issues is something I've encountered before. The main problem lies in the fact that your model likely contains a high number of points and polygons. This means that regardless of the format you choose to use, each individual point and face of your model must be detailed. As a result, this leads to large file sizes that are unavoidable.

To address this issue, I decided to explore Blender as an alternative to Three.js and focused on optimizing my models. There are numerous resources available on this topic (such as here, here, and here). By familiarizing myself with Blender's functionalities, I was able to decrease the size of my 4-8 Mb meshes to under 200kb each without any noticeable loss in quality when viewed in a web browser.

Answer 3

Answer №2

After seeing your response to my inquiry, I can confirm that I utilized Blender version 2.68a for this project. In order to import from openctm format, I followed these steps:

var loader = new THREE.CTMLoader();
...
loader.load( 'models/basic_model.ctm',  function( geometry, material ){
    // create mesh and position it
    var material = new THREE.MeshPhongMaterial({ color: 0xEEEEEE, shininess: 100, side: THREE.DoubleSide }),
        mesh = new THREE.Mesh( geometry, material );
    // The orientation of faces determines which side is visible and backside culling removes unnecessary elements

    mesh.position = position;
    mesh.scale.set( 30, 30, 30 );

    // display the model
    scene.add( mesh );
    render();

    meshes[ 'basic_model' ] = mesh;
}, {} );

To successfully complete this process, you must export from Blender using the openctm export plugin and include js-openctm in your project. Unfortunately, I cannot recall additional specifics as my current focus lies elsewhere.

PS: I distinctly remember having to manually install the openctm plugin into Blender for proper functionality

Answer 4

After seeing your response to my inquiry, I can confirm that I utilized Blender version 2.68a for this project. In order to import from openctm format, I followed these steps:

var loader = new THREE.CTMLoader();
...
loader.load( 'models/basic_model.ctm',  function( geometry, material ){
    // create mesh and position it
    var material = new THREE.MeshPhongMaterial({ color: 0xEEEEEE, shininess: 100, side: THREE.DoubleSide }),
        mesh = new THREE.Mesh( geometry, material );
    // The orientation of faces determines which side is visible and backside culling removes unnecessary elements

    mesh.position = position;
    mesh.scale.set( 30, 30, 30 );

    // display the model
    scene.add( mesh );
    render();

    meshes[ 'basic_model' ] = mesh;
}, {} );

To successfully complete this process, you must export from Blender using the openctm export plugin and include js-openctm in your project. Unfortunately, I cannot recall additional specifics as my current focus lies elsewhere.

PS: I distinctly remember having to manually install the openctm plugin into Blender for proper functionality

Answer 5

Answer №3

If you are currently using the Blender Three.js exporter (specifically the r71 dev version at the time of writing), there are a variety of options available to optimize your files:

Decrease the precision values to reduce file size
Disable Indent to eliminate unnecessary white spaces and newline characters in animation files
Explore utilizing msgpack compression by installing the mspack package (refer to this msgpack loading example)

It's worth noting that JSON may not always be the most efficient format for your needs, and other formats could potentially offer better performance. Optimizing your models can also significantly improve your overall file efficiency.

Answer 6

If you are currently using the Blender Three.js exporter (specifically the r71 dev version at the time of writing), there are a variety of options available to optimize your files:

Decrease the precision values to reduce file size
Disable Indent to eliminate unnecessary white spaces and newline characters in animation files
Explore utilizing msgpack compression by installing the mspack package (refer to this msgpack loading example)

It's worth noting that JSON may not always be the most efficient format for your needs, and other formats could potentially offer better performance. Optimizing your models can also significantly improve your overall file efficiency.

Bringing a model into three.js: The impact on performance

Answer №1

Answer №2

Answer №3

Similar questions

observing the pathway and modifying a variable within a directive's scope

Ways to exhibit API information leveraging the prowess of Ajax

Is it possible for me to declare attributes using a function object in a single statement?

Transforming control of execution seamlessly between two interactive functions in nodejs

A highly effective method for nesting items within a list through recursive functions

Turning $.post into $.ajax: A step-by-step guide

Create a function that works with arrays

Smooth scrolling to an anchor with jQuery

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

Concealing option value based on ng-if conditions in AngularJS: A guide

Unable to display values in Fusion Charts zoomline chart using the showValues chart property

Issue with encoding long strings in json_encode

Troubleshooting ng-click not functioning within ng-repeat with database integration in MEAN Stack

Analyzing data from Facebook API response (JSON) to extract valuable information

Is it possible to include a border/stroke on a Raphael picture?

When you utilize React.createRef, the value of `current` is consistently null

Appear gradually and descend

Step-by-step guide on how to load an Ext JS tab after clicking on it

Can the text color be customized to match the brightness level of the background area being covered?

Using `encodeURIComponent` to encode a URL does not function properly when used with a form action