解决 Matter.js 大量物体模拟卡顿的性能优化技巧

一、问题根源与模拟流水线分析

Matter.js 在单帧模拟时执行标准的刚体动力学流水线。默认配置下，引擎更偏向于保证物理刚度与视觉稳定性，但在高并发刚体场景下会产生高昂的计算冗余。每次执行 Engine.update(engine, delta) 时，底层均包含五个关键阶段：

1. 宽相碰撞初筛（Broadphase）：基于空间网格划分（Grid）寻找可能发生重叠的候选刚体对（Pairs）。当物体密集堆叠时，桶内物体数量剧增，候选对数量可能趋近于 \(O(N^2)\)。
2. 窄相几何判定（Narrowphase）：采用分离轴定理（SAT）计算碰撞对的交叠深度与接触流形。顶点的每次投影计算都需要多次浮点运算。
3. 接触与约束求解（Solver Iterations）：在每帧内多次循环迭代冲量，以防止刚体互相渗透并解决弹簧/铰链约束。默认配置下位置迭代（6次）与速度迭代（4次）会遍历所有活动接触点。
4. 数值积分（Integration）：使用 Verlet 积分更新每个活动刚体的位置与线速度、角速度。
5. 图形绘制（Render Pipeline）：若使用官方提供的 Matter.Render，则会在主线程 Canvas 2D 上逐个刚体执行 beginPath、arc、fill 和 stroke，带来极大的绘制调用开销。

分析可见，当画面物体数量激增至 500 以上时，算力绝大部分被消耗在无休眠的静止堆叠求解、全量多边形窄相检测以及 Canvas 2D 逐帧重绘上。明确了热点分布后，可以通过针对性的分级优化逐一消除算力浪费。

二、分级调优的标准实施路线

为了避免盲目调整参数导致物理失真或穿模，建议按照由浅入深的标准步骤排查并落实优化策略。整个优化过程分为五个连贯阶段。

在调优过程中，建议通过 Chrome DevTools 的 Performance 面板记录单个物理帧的耗时。当 Engine.update 耗时稳定压降至 5ms 以内时，即表明物理主循环已达到支撑 60 FPS 流畅运行的标准。

三、开启并精细控制刚体休眠机制（Sleeping）

在默认情况下，Matter.js 的 enableSleeping 为 false。这意味着无论场景中的小球或箱子是在高速下落，还是已经平稳堆叠在地面静止不动，引擎都会在每一帧对所有物体进行碰撞检测和约束解算。对于大量掉落或堆积场景，这是导致卡顿的最主要原因。

启用刚体休眠机制后，当刚体的线速度与角速度在连续若干帧内低于指定阈值时，引擎会自动将其标记为 isSleeping: true，并将其从宽相检测对与求解器循环中摘除，直到有新的外力冲击或活跃刚体碰撞时再重新唤醒。

1. 引擎初始化配置与阈值调优

在创建引擎实例时，显式配置 enableSleeping: true 并设置合适的静止检测帧数：

// 启用休眠与调优静止判定
const engine = Matter.Engine.create({
  enableSleeping: true,        // 开启全局休眠检测
  positionIterations: 6,       // 初始维持默认，后续分步调整
  velocityIterations: 4
});

// 针对场景微调休眠灵敏度
// sleepingThreshold 决定刚体在动能低于阈值后，需维持多少帧静止才正式进入休眠
engine.sleepingThreshold = 45; // 默认值为 60 帧（约 1 秒），降至 45 帧可更快进入休眠挂起

2. 刚体主动休眠与动态唤醒

在生成大批量初始处于静止状态的道具、积木或墙体时，可以直接调用 Matter.Sleeping.set(body, true) 使其初始即为休眠态，避免初次加载时触发庞大的瞬时解算峰值：

// 批量生成静置场景物体时立即挂起
for (let i = 0; i < 500; i++) {
  const box = Matter.Bodies.rectangle(100 + (i % 20) * 30, 400 - Math.floor(i / 20) * 30, 28, 28, {
    friction: 0.8,
    restitution: 0.1
  });
  // 直接置入休眠状态，节约初始结算开销
  Matter.Sleeping.set(box, true);
  Matter.Composite.add(engine.world, box);
}

// 当需要通过外部业务逻辑（如鼠标拖拽、爆炸推力）激活该物体时手动唤醒
function applyExplosion(body, force) {
  if (body.isSleeping) {
    Matter.Sleeping.set(body, false); // 唤醒刚体
  }
  Matter.Body.applyForce(body, body.position, force);
}

四、按场景调优求解器迭代轮次（Solver Iterations）

Matter.js 使用迭代松弛法来消除刚体间的穿透误差。引擎默认配置 positionIterations = 6 和 velocityIterations = 4。这意味着在一个时间步长内，接触求解器需要对所有的碰撞接触点完整循环 10 次。

对于大量刚体同屏（如弹幕碰撞、金币雨、小球沙盒）的场景，视觉上并不需要毫米级精确的刚体刚度。降低迭代次数可以成倍减少 CPU 内部循环次数。

// 针对密集轻量物理场景的求解器参数优化
engine.positionIterations = 2; // 位置校正迭代轮次从 6 降低至 2
engine.velocityIterations = 1; // 速度校正迭代轮次从 4 降低至 1 (或 2)

权衡指标与穿模防范

减少迭代次数的主要副作用是物体在高速撞击或重压下可能出现“变软”或轻微穿透（Tunneling）。在工程中可以通过以下两项配套措施进行弥补：

• 加厚静态边界墙体：将地面和墙壁的碰撞体厚度从常见的 20px 增加到 100px 以上，使视觉边界处于碰撞体中央。即使物体发生轻度穿透，也无法完全穿透厚墙。
• 限制刚体最大速度：避免微小物体在重力加速度或爆发力下产生过大单帧位移。可通过监听 beforeUpdate 事件限制刚体的 velocity 模长。

五、碰撞过滤位掩码与几何简化机制

宽相空间网格在分配对象时，即使两个刚体最终不需要发生物理交互，只要它们的边界框处于同一个网格单元内，仍会被加入候选 Pairs 列表中。使用 collisionFilter 可以在宽相初筛阶段直接依据位运算将无效配对剔除。

1. 碰撞位掩码配置实战

Matter.js 中每个刚体均包含 collisionFilter 属性，核心字段包含 category（自身类型位）与 mask（可交互碰撞类型的位掩码组合）。仅当满足 (A.category & B.mask) !== 0 && (B.category & A.mask) !== 0 时，引擎才会分配接触点进行窄相几何测试。

// 定义二进制分类枚举常量
const CATEGORY_WALL    = 0x0001; // 0001: 边界墙体
const CATEGORY_PLAYER  = 0x0002; // 0010: 核心玩家
const CATEGORY_PARTICLE= 0x0004; // 0100: 海量粒子/掉落金币

// 创建地面：可与所有类型发生碰撞
const ground = Matter.Bodies.rectangle(400, 600, 800, 50, {
  isStatic: true,
  collisionFilter: {
    category: CATEGORY_WALL,
    mask: 0xFFFF // 与所有分类均碰撞
  }
});

// 创建海量粒子：只与地面碰撞，粒子彼此之间不发生碰撞
function createParticle(x, y) {
  return Matter.Bodies.circle(x, y, 6, {
    collisionFilter: {
      category: CATEGORY_PARTICLE,
      mask: CATEGORY_WALL // 关键点：仅包含墙壁位，排除了 CATEGORY_PARTICLE
    }
  });
}

在上述配置下，即便同屏出现 2000 个粒子，粒子与粒子之间的位与运算结果均为 0，宽相阶段以 \(O(1)\) 复杂度直接放行，候选对数量从 \(N(N-1)/2\) 直降为 \(N\)。

2. 几何外形的选择优先级

窄相阶段的计算复杂度与形状顶点数直接相关：

• 圆形（Bodies.circle）：性能最高。碰撞判定只需比对两圆心欧氏距离与半径之和，无须多轴分离轴投影。
• 矩形（Bodies.rectangle）：性能优异。属于规则 4 顶点凸多边形，分离轴仅有 2 条投影法线。
• 复杂凸多边形 / 凹多边形复合体（Bodies.fromVertices）：性能消耗极大。每个凸分解分片均需独立执行分离轴测试，且容易产生内部缝隙卡顿。大量实体场景下严禁直接使用高顶点几何体。

六、解耦物理模拟与图形渲染

许多开发者在项目初期直接使用 Matter.Render.create() 进行画面呈现。但 Matter.Render 设计初衷仅用于开发调试，其实现机制是在每一帧清除整块画布，重新遍历 world.bodies 中的所有顶点执行 Canvas 2D 路径绘制与描边填充。当物体超过 300 个时，主线程的大部分时间被 Canvas 2D 上下文占满。

在生产环境下，必须将物理模拟循环与图形渲染完全解耦：物理引擎负责更新刚体坐标与角度，画面展示则交给支持批处理绘制（Sprite Batching）的高性能渲染引擎（如 Pixi.js 或 Three.js）。

// 物理主循环与 WebGL 渲染管线解耦示例
const engine = Matter.Engine.create({ enableSleeping: true });
const fixedDeltaTime = 1000 / 60; // 固定物理计算步长：16.66ms

// 维护逻辑与图形精灵的映射表
const bodySpriteMap = new Map();

function createVisualBox(x, y, width, height) {
  // 1. 创建轻量物理刚体
  const body = Matter.Bodies.rectangle(x, y, width, height);
  Matter.Composite.add(engine.world, body);

  // 2. 创建 Pixi.js Sprite 精灵（基于纹理图集批量合批）
  const sprite = new PIXI.Sprite(boxTexture);
  sprite.anchor.set(0.5);
  pixiApp.stage.addChild(sprite);

  bodySpriteMap.set(body, sprite);
  return body;
}

// 独立统一的 RAF 帧驱动循环
let lastTime = performance.now();
function gameLoop(currentTime) {
  requestAnimationFrame(gameLoop);

  // 驱动固定步长的物理计算
  Matter.Engine.update(engine, fixedDeltaTime);

  // 仅在物理更新后同步活动刚体的变换矩阵到精灵
  for (const [body, sprite] of bodySpriteMap) {
    // 若刚体休眠且之前已同步过，可跳过位置写入，进一步节约 JS-DOM/Context 交互开销
    if (body.isSleeping && sprite._synced) continue;

    sprite.position.x = body.position.x;
    sprite.position.y = body.position.y;
    sprite.rotation = body.angle;
    sprite._synced = body.isSleeping;
  }
}
requestAnimationFrame(gameLoop);

七、视口边界裁剪与刚体对象池（Object Pool）

在持续发射或掉落物体的场景中，刚体离开屏幕可见区域后若不及时清理，会持续累积在物理世界中不断膨胀。而如果简单地通过 Composite.remove(world, body) 销毁并在下一次需要时重新执行 Bodies.circle() 创建，会产生大量的内存分配，导致浏览器垃圾回收器（Garbage Collector）频繁触发主线程冻结（GC Pause）。

建立专门的刚体对象池（Object Pool），在物体飞出视口边界时将其挂起回收，新生成时复用既有实例，是保证长时稳定运行的关键手段。

// 刚体对象池实现
class BodyPool {
  constructor(capacity, createFn) {
    this.pool = [];
    this.createFn = createFn;
    for (let i = 0; i < capacity; i++) {
      const body = this.createFn();
      body.isStatic = true; // 初始非活跃挂起
      this.pool.push(body);
    }
  }

  acquire(x, y, vx, vy) {
    let body = this.pool.pop();
    if (!body) {
      body = this.createFn();
    }
    // 重置刚体位置、姿态与速度
    Matter.Body.setPosition(body, { x, y });
    Matter.Body.setVelocity(body, { x: vx, y: vy });
    Matter.Body.setAngle(body, 0);
    Matter.Body.setAngularVelocity(body, 0);
    body.isStatic = false;
    Matter.Sleeping.set(body, false);
    return body;
  }

  release(body) {
    // 移至不可见屏幕外并重置为静态挂起
    Matter.Body.setPosition(body, { x: -9999, y: -9999 });
    Matter.Body.setVelocity(body, { x: 0, y: 0 });
    body.isStatic = true;
    Matter.Sleeping.set(body, true);
    this.pool.push(body);
  }
}

// 视口边界监控循环：定期清理出界刚体
function pruneOutOfBoundsBodies(activeBodies, pool, viewBounds) {
  for (let i = activeBodies.length - 1; i >= 0; i--) {
    const b = activeBodies[i];
    if (b.position.y > viewBounds.maxY || b.position.x < viewBounds.minX || b.position.x > viewBounds.maxX) {
      activeBodies.splice(i, 1);
      pool.release(b);
    }
  }
}

八、优化策略综合评估与选型决策

在实际项目重构时，各项优化手段的投入产出比各有侧重。下表与图示总结了五大核心手段的技术指标收益，便于根据项目类型合理选型。

九、常见边界问题与排查指南

在应用上述优化技巧时，针对常见边界异常，可按如下方案排查解决：

• 问题 1：物体在斜坡上无法休眠或持续微颤
  原因与解法：重力沿斜面的分力大于动摩擦力与休眠运动判定阈值。解决办法是适当调大物体的 frictionAir（如 0.02）并增加材料接触摩擦力 friction，或调小 engine.sleepingThreshold。
• 问题 2：降低迭代次数后，快速运动物体偶尔穿过薄墙
  原因与解法：单个物理步长内物体的位移大于墙体厚度。解决办法是将静态墙壁厚度增加至 80px 以上，并在视觉层仅显示薄线；对于极高速物体，可以在 Engine.update 时采用微步进（Substepping，如拆为两次 delta / 2 的 update 执行）。
• 问题 3：休眠后的刚体无法响应鼠标或脚本直接位移
  原因与解法：直接修改休眠刚体的 position 不会自动激活物理求解器。在通过代码强制移动或施加冲量前，必须显式调用 Matter.Sleeping.set(body, false)。