提高 Three.js 中的 ParticleSystem 性能答案

【问题标题】：Improving ParticleSystem performance in Three.js提高 Three.js 中的 ParticleSystem 性能
【发布时间】：2012-11-08 03:27:54
【问题描述】：

我正在模拟围绕太阳系运行的小行星。你可以看到一个初始实现here。

我将整个轨道对象集转换为单个 ParticleSystem，我可以在我的家用机器上以 60fps 的速度运行 10,000 个轨道（在我的笔记本电脑上大约为 30fps）。 15-20k 让我的机器降到 30fps。

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

    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 Worker 中更新顶点？

【问题讨论】：

__dirty 标志不再受支持。您不妨更新到当前版本的 three.js 并查看 wiki：github.com/mrdoob/three.js/wiki/Updates。

标签： three.js

【解决方案1】：

除了切换到粒子系统之外，我还使用了另外两种技术来提高性能。它们都不是 Three.js 特有的。他们涉及使用 Web Worker 并使用 setTimeout 将循环分成块，以便为 Three.js 提供更新渲染的机会。

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

【讨论】：