three.js particle system vs independent geometry performances

Question

My code manage thousand of particles. These particles can have different textures and these textures can change over the time. So I haven't used the particles system so far. I just add the mesh one by one in the scene.

Now come the time of the optimization, the application run slowly on old computers. The performance tool show that the task that take the most of the CPU is the Three.js render method. I wonder if I should change the structure of the code to switch to a particle system.

Will the difference be spectacular? What optimization does a particle system compared to a independent mesh management?

Thanks

Answer 1

Without additional materials it's hard to say, but if you look in the Three.js code you'll see how particles there are managed.

If you are switching textures per-particle, that can be a real performance killer. Try to sort the particles by texture, so that you are switching it only once per group of particles, rather than once per particle.

This may be impractical if you are depth-sorting the particles, but... I don't know what you're trying to do. If this is the case, and if you are only using a small # of different textures, consider putting them all together into an "atlas" and then just pass the UV-map offsets into each particle, rather than swapping samplers around. This will also be cheaper.