CODEWITHSUNDEEP
three.js
ty.
ty.

Reputation: 11132

Improving ParticleSystem performance in Three.js

I'm running a simulation of asteroids that move in orbits around our solar system. You can see an initial implementation here.

I converted the entire set of orbiting objects to a single ParticleSystem and I can run 10,000 orbits at 60fps on my home machine (about 30fps on my laptop). 15-20k brings my machine down to 30fps.

I am running a web worker to compute a new list of positions, and then I update positions for each object in the main thread like so:

    for (var j=0; j < positions.length; j++) {
      myobjects[j].MoveParticleToPosition(positions[j]);
    }
    particle_geometry.__dirtyVertices = true;

MoveParticleToPosition:

  var vertex_particle = this.particle_geometry.vertices[this.vertex_pos];
  vertex_particle.x = pos[0];
  vertex_particle.y = pos[1];
  vertex_particle.z = pos[2];

My question is: how can I improve performance from here?

For example, is there a quicker way to update the geometry vertices? Are there optimizations I can apply to a ParticleSystem? Is it possible to update vertices from within a web worker?

Upvotes: 2

Views: 815

Answers (1)

ty.
ty.

Reputation: 11132

I wound up using two other techniques to improve performance in addition to switching to a ParticleSystem. None of them are specific to Three.js. They involved using web workers and splitting loops in chunks with setTimeout to give Three.js a chance to update the rendering.

I wrote a blog post with more technical details here.

Upvotes: 3

Related Questions