Question

我在JavaScript中有一个基本的粒子系统（利用画布进行渲染），我正在尝试找到处理粒子间碰撞的最佳方法。粒子系统可以在相当不错的FPS下处理大约70,000个粒子。

它由一个包含每个Particle对象的数组组成。每个Particle对象包含3个Vector对象（一个用于置换，速度和加速度），它们包含x和y变量。在每帧之前，将加速度矢量应用于速度矢量，并将速度矢量应用于每个单个粒子对象的位移矢量。然后渲染器遍历每个粒子，然后在每个位移矢量的位置绘制1x1像素的正方形。

粒子系统也有“磁场”，可以使粒子朝着/远离给定点加速。

我尝试在每个粒子上应用“磁场”，但我用来获取每个粒子的更新加速度矢量的计算效率太低，而且这种方法大大降低了FPS。

下面是我用来重新计算粒子加速度矢量的代码，关于附近的磁场（在每帧之前调用此函数）：

Particle.prototype.submitToFields = function (fields) {
    // our starting acceleration this frame
    var totalAccelerationX = 0;
    var totalAccelerationY = 0;

    // for each passed field
    for (var i = 0; i < fields.length; i++) {
        var field = fields[i];

        // find the distance between the particle and the field
        var vectorX = field.point.x - this.point.x;
        var vectorY = field.point.y - this.point.y;

        // calculate the force via MAGIC and HIGH SCHOOL SCIENCE!
        var force = field.mass / Math.pow(vectorX*vectorX+vectorY*vectorY,1.5);

        // add to the total acceleration the force adjusted by distance
        totalAccelerationX += vectorX * force;
        totalAccelerationY += vectorY * force;
    }

    // update our particle's acceleration
    this.acceleration = new Vector(totalAccelerationX, totalAccelerationY);
}

很明显，为什么上述方法会大幅降低性能 - 随着每个新粒子的添加，计算次数呈指数增长。

是否有另一种粒子碰撞检测方法可以获得数千个粒子的良好性能？这些方法是否适用于我当前的对象结构？

Answer 1

此处不要创建新的Vector。这意味着你每帧创建70 000个新向量。只需更改矢量值：

this.acceleration.x = totalAccelerationX; // or : this.acceleration[0] = totalAccelerationX;
this.acceleration.y = totalAccelerationY; // or : this.acceleration[1] = totalAccelerationY;

如果它没有足够的帮助，您将不得不使用WebWorker。

JavaScript /画布粒子系统中的碰撞处理

1 个答案: