Is Performance Enhanced by Exporting Meshes in Three.js?

Question

Is Performance Enhanced by Exporting Meshes in Three.js?

Currently, I am working on a Three.js project and have noticed some performance lag in certain areas. The most significant lag occurs when rendering the text Meshes that I have created as follows:

var text1Geo = new THREE.TextGeometry("Hello", {font: font});
text1Mesh = new THREE.Mesh(text1Geo, textMaterial);
text1Mesh.position.set(-6500, 150, -500);
text1Mesh.castShadow = true;
scene.add(text1Mesh);

I am considering whether exporting the text as an obj using the OBJExporter would enhance performance. Instead of creating a THREE.TextGeometry, I could potentially load the mesh into the scene using an OBJLoader. Do you think this approach would boost performance? If you're interested in viewing the complete project and source code, please visit this link. Any additional tips or suggestions for improving performance are welcome. Thank you!

javascript performance three.js

Answer 1

Answer №1

It is not necessary to download an .obj file.

An experiment is needed, but the solution may be to store the text geometry.

Rather than using something like

loadText( 'url.obj' , (t)=>{ /*...do stuff...*/});

You could try

computeText(){ 
  var t = new THREE.TextGeometry();
  ...
}

computeText();
//...do stuff...

I believe that parsing obj files can be tricky, so perhaps a formatted json or binary would be better.

Instead of downloading, parsing, indexing, and then taking action on an .obj file, it might be more efficient to compute it beforehand.

There may still be some lag when this data hits the gpu, whether it is computed or downloaded.

Answer 2

It is not necessary to download an .obj file.

An experiment is needed, but the solution may be to store the text geometry.

Rather than using something like

loadText( 'url.obj' , (t)=>{ /*...do stuff...*/});

You could try

computeText(){ 
  var t = new THREE.TextGeometry();
  ...
}

computeText();
//...do stuff...

I believe that parsing obj files can be tricky, so perhaps a formatted json or binary would be better.

Instead of downloading, parsing, indexing, and then taking action on an .obj file, it might be more efficient to compute it beforehand.

There may still be some lag when this data hits the gpu, whether it is computed or downloaded.

Is Performance Enhanced by Exporting Meshes in Three.js?

Answer №1

Similar questions

What is the best way to assign table rows to various interfaces in typescript?

Tips for preserving the contents of a list with HTML and Javascript

Tips for managing the submission process for dynamically generated formsORStrategies for

How can I remove the script from Response.Write?

Retrieving a JavaScript variable from a Python Selenium request

Is there a way for me to make this Select update when onChange occurs?

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

The Nextjs framework is experiencing a high total blocking time in its *****.js chunk

Receive fresh properties in React and subsequently reset state

What is the best approach to comparing two times in JavaScript to ensure accuracy after an NTP time update?

When a specific function is called, the DayPickerRangeController in the airbnb/react-dates library will update the

Function defined as an AngularJS component

Processing ajax requests in Rails 4 using HTML format

Understanding the operational aspects of Typescript's target and lib settings

Troubleshooting permission problems with Yarn and node_modules in a Docker environment

Looking to retrieve the checkbox value from HTML in AngularJS and pass it to the controller

Tips for transforming a string into an object using AngularJS

Obtaining Mouse Click X, Y, and Z Coordinates with Three.js

Updating inner text content dynamically can be accomplished without relying on the use of the eval() function

Transferring JSON data through AJAX to a PHP backend