How to optimize objects in three.js? Methods of optimization

Questions
1

I have 20 objects in format .fbx. Their size is about 60-258KB But mac os is already roars in dev mode. How can I optimize objects and is it will OK on production? I make a project with three.js first time and don’t know in what way my animation will work on production

What methods of optimization are in three.js?

1 Like
2

It’s hard to answer this question without doing a performance analysis of your application. So I can only provide some general best practices.

To improve the performance of you app, you generally want to reduce the amount of draw calls and the complexity of your geometries and materials. You can try for example to …

  • merge geometries,
  • use instanced rendering,
  • use simple materials like MeshBasicMaterial or MeshLambertMaterial,
  • use LOD mechanism,
  • reduce the overall model complexity.

Performance optimization was discussed in this forum multiple times. Just search for the tag performance and you will find some interesting stuff.

5 Likes
4

Crossposting:

2 Likes
5

I actually wanted to make a post like this yesterday, but limited to geometry.

Such as best practices for geometry. There are many options, and it can a little confusing until a user really wraps their head around them (at least in my case).

For example.

Super inefficient: unique geometry per mesh. Runs terribly with enough meshes.

Reusing geometry: Caching geometry and creating multiple meshes from the same cached geometry. This did not work very well. It saved plenty of memory but the rendering performance was still pretty garbage with enough meshes.

Merging geometry: Create one large geometry object from many smaller parts and use it in a single mesh. This works extremely well, however there are some caveats.

Instanced Geometry: I guess push the geometry object to the gpu once and have the shader place all of the predetermined number of instances in unique positions/rotations (at least i think that’s how it works). Haven’t quite found the courage to move on to this one. Though @pailhead has created an abstraction class for this and I am looking forward to playing with it.

A pro/con sheet for these would be helpful maybe?

2 Likes
6

Just to add. I have identified some more areas for improvement that can lead to even better performance. See the answer here: