0

I have a basic particle system in JavaScript (utilising canvas for rendering), and I'm trying to find the best way to handle collisions between particles. The particle system can handle about 70,000 particles at a pretty decent FPS.

It consists of an array that contains every Particle object. Each Particle object contains 3 Vector objects (one for displacement, velocity, and acceleration) which contain an x and a y variable. Before each frame, acceleration vectors are applied to velocity vectors, and velocity vectors are applied to displacement vectors for every single Particle object. The renderer then iterates through each Particle and then draws a 1x1 pixel square at the location of every displacement vector.

The particle system also has 'magnetic' fields also, which can cause the particles to accelerate towards/away from a given point.

I tried applying a 'magnetic' field to each particle, but the calculations I use to get the updated acceleration vectors for each particle are too inefficient, and this method reduced the FPS considerably.

Below is the code I use to recalculate Particle acceleration vectors, with respect to nearby magnetic fields (This function is called before every frame):

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);
}

It's obvious why the above method reduced the performance drastically - the number of calculations rises exponentially with every new particle added.

Is there another method of particle collision detection that will have good performance with thousands of particles? Will these methods work with my current object structure?

4

1 回答 1

1

不要在这里创建新的 Vector。这意味着您每帧创建 70 000 个新向量。只需更改向量值：

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

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

于 2013-10-15T07:20:30.123 回答