摘要：數(shù)據(jù)采集因?yàn)槭菧y(cè)試物理引擎的性能，這里不考慮，只采集物理引擎更新每一幀的時(shí)間，因?yàn)槌_(kāi)物理引擎，渲染引擎也會(huì)帶來(lái)性能消耗。

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

這段時(shí)間先后折騰了matter-js和Box2D，因?yàn)轫?xiàng)目需要在微信小游戲端運(yùn)行，對(duì)性能要求比較高，最終還是選擇了Box2D。

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

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

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

機(jī)器本身的配置；

JIT：蘋(píng)果端微信小游戲沒(méi)有JIT，性能會(huì)大打折扣；

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

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

因?yàn)槭菧y(cè)試物理引擎的性能，這里不考慮FPS，只采集物理引擎更新每一幀的時(shí)間，因?yàn)槌_(kāi)物理引擎，渲染引擎（PixiJS）也會(huì)帶來(lái)性能消耗。

// Box2d數(shù)據(jù)打點(diǎn)
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ù)打點(diǎn)
Performance.startPoint("matterUpdateCost");
matter.Engine.update(this.engine, 1e3 / this.fps);
Performance.endPoint("matterUpdateCost");

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

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

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

在PC端，Box2d全面戰(zhàn)勝了matter-js，在蘋(píng)果的微信小游戲端，因?yàn)闆](méi)有JIT，Box2d性能反而不如matter-js，而回到安卓的微信小游戲端，因?yàn)橛蠮IT，Box2d同樣是可以戰(zhàn)勝matter-js的。

上面提到了兩個(gè)引擎對(duì)于圓形剛體的設(shè)計(jì)，因?yàn)閙atter-js沒(méi)有正統(tǒng)的圓形，我大膽猜測(cè)圓形剛體的性能Box2D會(huì)大大高于matter-js!

特意去翻了下各自的源碼，首先我們來(lái)看看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)成圓，這里在進(jìn)行碰撞檢測(cè)的時(shí)候，會(huì)比純圓有更多的計(jì)算量，不知道m(xù)atter-js作者是出于什么目的這樣設(shè)計(jì)。

再來(lái)看看Box2D版本的實(shí)現(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的圓與多邊形是獨(dú)立的。

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

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