提高Three.js中的ParticleSystem性能

Question

我正在运行模拟在我们的太阳系周围运行的小行星。您可以看到初始实施here。

我将整套轨道物体转换为单个粒子系统，我可以在家用机器上以60fps运行10,000个轨道（在我的笔记本电脑上大约30fps）。 15-20k使我的机器降低到30fps。

我正在运行一个Web worker来计算一个新的位置列表，然后我更新主线程中每个对象的位置，如下所示：

    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];

我的问题是：如何从这里提高绩效？

例如，有更快的方法来更新几何顶点吗？我可以应用于ParticleSystem的优化吗？是否可以从Web工作者中更新顶点？

Answer 1

除了切换到ParticleSystem之外，我还使用了其他两种技术来提高性能。它们都不是特定于Three.js。他们使用Web工作人员并使用setTimeout分块循环，以便让Three.js有机会更新渲染。

我写了一篇博文，其中包含更多技术细节here。