如何利用物理机制避免运动模糊？

我用P5.js做了个小Demo，专门对比不同移动逻辑下的视觉表现——这个实现逻辑其实不挑工具，换成任何非游戏引擎的编程语言或图形库都能复用：

• 不使用固定时间步长与插值时，物体移动的视觉效果清晰锐利，但帧率波动时物理逻辑容易不稳定
• 启用固定时间步长加插值后，物理逻辑能保持稳定，但会出现轻微的运动模糊感
• 如果只保留固定时间步长却移除插值，物体移动会出现明显的卡顿

你可以直接在P5.js在线编辑器里运行这个示例，把下面的代码粘贴进去，点击运行按钮或者按下Ctrl+Enter就能看到效果：

const step = 1 / 60; // 物理步长
let acc = 0; // 累加器
let pos1; // 上方矩形
let lastPos1; // 上方矩形的上一位置
let pos2; // 下方矩形

// 初始化函数，仅调用一次
function setup() {
  createCanvas(windowWidth, windowHeight); // 创建画布
  frameRate(144); // 设置帧率（每秒帧数）
  // 初始化矩形位置
  pos1 = createVector(0, height / 2 - 100);
  pos2 = createVector(0, height / 2);
}

// 帧更新函数，每帧调用一次
function draw() {
  background(220); // 填充背景色
  acc += deltaTime / 1000; // 更新累加器
  lastPos1 = pos1; // 记录上方矩形的上一位置
  while (acc >= step) { // 当累加器值大于等于物理步长时执行物理更新
    pos1.x += 100 * step; // 上方矩形向右移动
    acc -= step; // 减少累加器值
  }
  pos2.x += 100 * (deltaTime / 1000); // 下方矩形向右移动
  const alpha = acc / step; // 插值系数
  // 位置插值计算
  const interpPos = p5.Vector.lerp(lastPos1, pos1, alpha);
  // 绘制上方矩形（基于物理逻辑移动）
  rect(interpPos.x, interpPos.y, 200, 50);
  // 绘制下方矩形（基于渲染逻辑移动）
  rect(pos2.x, pos2.y, 200, 50);
}

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