在JavaScript/canvas粒子系統中處理碰撞

我在JavaScript中有一個基本的粒子系統（利用畫布進行渲染），我試圖找到處理粒子之間碰撞的最佳方法。該粒子系統可以處理大約70,000個粒子，並且具有相當不錯的FPS。在JavaScript/canvas粒子系統中處理碰撞

它由一個包含每個粒子對象的數組組成。每個粒子對象包含3個矢量對象（一個用於位移，速度和加速度），它們包含一個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); 
}

這是顯而易見的，爲什麼上面的方法大大降低了性能 - 每增加一個新粒子，計算次數就會成指數增長。

是否有另一種粒子碰撞檢測方法，能夠在數千個粒子中獲得良好的性能？這些方法是否適用於我目前的對象結構？

來源

2013-10-15 Sosumi

粒子系統本身是非常耗資源的，如果你另外做70k +粒子的碰撞檢測，恐怕JavaScript對你無能爲力。即使有宏觀優化（在這種情況下可能很重要），您將看到性能上的困難。通常情況下，這些東西都是使用低級代碼（彙編器或c/C++）與硬件加速的3D卡相結合的。事件有時必須呈現（這在Pro視頻世界中是正常的）。你可以評估你是否願意在我認爲是最好的機會的粒子數量方面做出妥協。 – K3N

如果可能的話，我會建議你給我們提供一個小提琴，我們可以與之一起玩，並與我們一起做一些優化。可以看到從那裏得到的結果（即使它會根據硬件配置而變化） – K3N

不要在這裏創建一個新的向量。這意味着你每幀創建70 000個新的向量。只需更改矢量值：

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

如果沒有足夠的幫助，您將不得不使用WebWorker。

來源

2013-10-15 07:20:30

在JavaScript/canvas粒子系統中處理碰撞

回答

相關問題