摘要：數(shù)據(jù)采集因為是測試物理引擎的性能，這里不考慮，只采集物理引擎更新每一幀的時間，因為除開物理引擎，渲染引擎也會帶來性能消耗。

在挑選JavaScript 2D物理引擎的時候，不外乎兩種主流的選擇：第一種是老牌的Box2D，最開始的版本是C++實現(xiàn)的，后來有了很多種實現(xiàn)，比如flash版本和js版本，具體可看：https://stackoverflow.com/que...；第二種是新潮的matter-js，matter-js比較輕量，API和文檔都比較有友好。

這段時間先后折騰了matter-js和Box2D，因為項目需要在微信小游戲端運行，對性能要求比較高，最終還是選擇了Box2D。

但凡涉及到這種需要經(jīng)常看源碼才能使用的庫中文社區(qū)都非常少干貨，這段時間折騰之后打算整理一些文章，分享給社區(qū)也作為一個知識備忘。

本文簡單對兩個引擎的性能在不同平臺上進行對比，其中Box2D采用的是TypeScript實現(xiàn)的版本：https://github.com/flyover/bo...， 作者仍然在更新，并且我看了下CocosCreator內(nèi)置的物理引擎也是基于這個進行的封裝，社區(qū)還是可以得到保證的。matter-js采用的是0.14.2版本（感覺作者已經(jīng)更新不動這個庫了:),大半年都不怎么活躍了）。

在屏幕隨機位置重復(fù)創(chuàng)建相同的矩形剛體，使之自由落體到底部，計算不同剛體數(shù)量下，全部剛體落地后每一幀的物理計算平均耗時。下面是測試中的一些截圖：

機器本身的配置；

JIT：蘋果端微信小游戲沒有JIT，性能會大打折扣；

剛體的隨機性：剛體在隨機位置生成的過程中，如果與其他剛體重疊，物理引擎需要更多的性能消耗來修正重疊，因此，每次運行測試用例數(shù)據(jù)上都不可避免會有波動。

引擎本身的設(shè)計：比如matter-js沒有圓形的定義，創(chuàng)建圓形剛體本質(zhì)上是創(chuàng)建25邊形，而Box2d天然就設(shè)計了圓形剛體，所以對于圓形剛體，兩個引擎會存在不小的差異。

因為是測試物理引擎的性能，這里不考慮FPS，只采集物理引擎更新每一幀的時間，因為除開物理引擎，渲染引擎（PixiJS）也會帶來性能消耗。

// Box2d數(shù)據(jù)打點
let positionIterations = 3;
let velocityIterations = 8;
let timeStep           = 1 / 60;
Performance.startPoint("box2dUpdateCost");
world.Step(timeStep, velocityIterations, positionIterations);
Performance.endPoint("box2dUpdateCost");

// matter-js數(shù)據(jù)打點
Performance.startPoint("matterUpdateCost");
matter.Engine.update(this.engine, 1e3 / this.fps);
Performance.endPoint("matterUpdateCost");

// 計算平均耗時
function calAverage(list, key) {
    let sum = list.reduce((total, curr) => curr[key] + total, 0);
    console.log(sum / list.length)
}

// 所有數(shù)據(jù)會收集到一個數(shù)組里面
let data = Performance.print();

//calAverage(data, "matterUpdateCost");
calAverage(data, "box2dUpdateCost");

在PC端，Box2d全面戰(zhàn)勝了matter-js，在蘋果的微信小游戲端，因為沒有JIT，Box2d性能反而不如matter-js，而回到安卓的微信小游戲端，因為有JIT，Box2d同樣是可以戰(zhàn)勝matter-js的。

上面提到了兩個引擎對于圓形剛體的設(shè)計，因為matter-js沒有正統(tǒng)的圓形，我大膽猜測圓形剛體的性能Box2D會大大高于matter-js!

特意去翻了下各自的源碼，首先我們來看看matter-js的：

Bodies.circle = function(x, y, radius, options, maxSides) {
    options = options || {};
    var circle = {
        label: "Circle Body",
        circleRadius: radius
    };
                                
     // approximate circles with polygons until true circles implemented in SAT
    maxSides = maxSides || 25;
    var sides = Math.ceil(Math.max(10, Math.min(maxSides, radius)));

    // optimisation: always use even number of sides (half the number of unique axes)
    if (sides % 2 === 1)
        sides += 1;
        
    return Bodies.polygon(x, y, sides, radius, Common.extend({}, circle, options));
};

從上面的代碼可得，matter-js將25邊形當(dāng)成圓，這里在進行碰撞檢測的時候，會比純圓有更多的計算量，不知道m(xù)atter-js作者是出于什么目的這樣設(shè)計。

再來看看Box2D版本的實現(xiàn):

class b2CircleShape extends b2Shape {
      constructor(radius = 0) {
          super(exports.b2ShapeType.e_circleShape, radius);
          this.m_p = new b2Vec2();
      }
      Set(position, radius = this.m_radius) {
          this.m_p.Copy(position);
          this.m_radius = radius;
          return this;
      }
}

與matter-js相比，Box2D的圓與多邊形是獨立的。

多說無益，我們對比下100個剛體狀態(tài)下，兩個引擎的數(shù)據(jù)對比，為了凸顯差距，我們選擇Box2D打不過matter-js的蘋果端微信小游戲平臺查看數(shù)據(jù):

我們可以得出一個有意思的結(jié)論：同樣是100個剛體，矩形剛體的耗時是13ms~14ms，而圓形剛體的耗時下降到了8ms，這對于一些彈球類的游戲無疑是福音，據(jù)我的觀察，100個圓形剛體在蘋果端微信小游戲下面絲毫不會卡頓。而matter-js的耗時從11.5ms~12ms上升到了25ms，顯然就是在越多邊形碰撞檢測需要的計算量越大！