如何平滑追踪质心？解决增减实体时摄像机跳变问题

方案一：对质心结果做指数加权平滑 #

直接对计算出的原始质心做平滑处理，避免突变直接传递给摄像机。修改你的模拟帧代码：

let cX = 0;
let cY = 0;

for (let c of entities) {
  cX += c.x;
  cY += c.y;
}

// 计算原始瞬时质心
const rawCenterX = cX / entities.length;
const rawCenterY = cY / entities.length;

// 用指数加权平均平滑质心，smoothFactor控制平滑程度（0-1）
// 值越小越平滑，响应越慢；值越大响应越快，平滑度越低，建议0.05-0.2之间调试
const smoothFactor = 0.1;
centerX = centerX * (1 - smoothFactor) + rawCenterX * smoothFactor;
centerY = centerY * (1 - smoothFactor) + rawCenterY * smoothFactor;

prevCenterX = centerX;
prevCenterY = centerY;

原理：每次只让质心向原始计算值靠近一小步，实体增减带来的质心突变会被逐步稀释，摄像机的插值移动会自然过渡，不会出现跳变。

方案二：摄像机独立平滑追踪质心 #

将摄像机位置与质心计算解耦，让摄像机以平滑的方式追踪原始质心，而非直接使用质心值。修改渲染帧的逻辑（或单独新增摄像机更新逻辑）：

简单加权平滑版本 #

// 模拟帧（60次/秒）：只计算原始质心作为目标
let cX = 0;
let cY = 0;
for (let c of entities) {
  cX += c.x;
  cY += c.y;
}
const targetCenterX = cX / entities.length;
const targetCenterY = cY / entities.length;

// 渲染帧（165次/秒）：让摄像机向目标平滑移动
const cameraSmooth = 0.08; // 每帧向目标靠近8%，可根据需求调整
camera.x = camera.x * (1 - cameraSmooth) + targetCenterX * cameraSmooth;
camera.y = camera.y * (1 - cameraSmooth) + targetCenterY * cameraSmooth;

弹簧阻尼模型（更自然的跟随效果） #

如果想要更贴近物理的平滑跟随，可以加入速度和阻尼：

// 初始化摄像机时添加velocity属性
camera.velocity = { x: 0, y: 0 };

// 渲染帧更新：
const springStiffness = 0.1; // 弹簧拉力强度
const damping = 0.2; // 阻尼系数，防止过度摆动

// 计算拉力加速度
camera.velocity.x += (targetCenterX - camera.x) * springStiffness;
camera.velocity.y += (targetCenterY - camera.y) * springStiffness;
// 应用阻尼
camera.velocity.x *= (1 - damping);
camera.velocity.y *= (1 - damping);
// 更新摄像机位置
camera.x += camera.velocity.x;
camera.y += camera.velocity.y;

原理：不管原始质心如何突变，摄像机都会以渐进的方式向目标移动，弹簧模型还能模拟轻微的滞后效果，视觉上更自然流畅。

方案三：实体增减时的增量分步补偿 #

当实体数量变化时，计算质心突变的总偏移量，然后在后续多帧中逐步应用，避免一次性跳变：

// 新增变量记录上一帧的实体数量
let prevEntityCount = 0;
// 用于跟踪需要分步应用的增量
let deltaQueue = { cx: 0, cy: 0, stepsLeft: 0 };

// 模拟帧代码：
let cX = 0;
let cY = 0;
const currentCount = entities.length;

for (let c of entities) {
  cX += c.x;
  cY += c.y;
}

const rawCenterX = cX / currentCount;
const rawCenterY = cY / currentCount;

if (prevEntityCount !== 0 && currentCount !== prevEntityCount) {
  // 计算质心突变的总偏移量（基于总坐标和的变化）
  const prevTotalX = centerX * prevEntityCount;
  const deltaTotalX = cX - prevTotalX;
  const prevTotalY = centerY * prevEntityCount;
  const deltaTotalY = cY - prevTotalY;
  
  // 将总偏移量分成6帧应用（可根据帧率调整帧数）
  deltaQueue.cx = deltaTotalX / 6;
  deltaQueue.cy = deltaTotalY / 6;
  deltaQueue.stepsLeft = 6;
}

// 应用分步增量或直接平滑
if (deltaQueue.stepsLeft > 0) {
  centerX += deltaQueue.cx;
  centerY += deltaQueue.cy;
  deltaQueue.stepsLeft--;
} else {
  // 无增量时用轻微平滑维持稳定性
  const smoothFactor = 0.05;
  centerX = centerX * (1 - smoothFactor) + rawCenterX * smoothFactor;
  centerY = centerY * (1 - smoothFactor) + rawCenterY * smoothFactor;
}

prevEntityCount = currentCount;
prevCenterX = centerX;
prevCenterY = centerY;

原理：把实体增减带来的质心突变拆解成多个小步，让摄像机在几帧内完成过渡，视觉上完全不会出现跳变。

内容的提问来源于stack exchange，提问作者Ryan Peschel