PixiJS固定步长循环卡顿抖动问题排查求助

架构背景 #

• 服务器运行帧率：20-30fps
• 客户端逻辑循环帧率：与服务器保持一致（20-30fps）
• 客户端独立维护渲染循环
• 基于PixiJS构建UI

问题现象 #

客户端循环同时管理逻辑与渲染，将逻辑循环限制在20FPS时，正常运行无异常。但当浏览器帧率从120fps骤降至60fps时，玩家单次移动距离会翻倍（例如从1.66变为3.3）——理论计算逻辑是正确的，但实际会引发轻微的卡顿抖动。该问题在简化Demo中无法复现，推测是Demo代码过于简单，未触发浏览器帧率下降的场景。

排查过程 #

• 最初怀疑是pixi-viewport的角色跟随功能导致抖动
• 进一步测试发现：即使是仅执行x = x + speed * delta的最简游戏循环，在帧率骤降时仍会出现相同的抖动问题

相关代码 #

private update = () => {
    let elapsed = PIXI.Ticker.shared.elapsedMS
    if (elapsed > 1000) elapsed = this.frameDuration
    this.lag += elapsed

    //Update the frame if the lag counter is greater than or
    //equal to the frame duration
    while (this.lag >= this.frameDuration) {  

        //Update the logic
        console.log(`[Update] FPS ${Math.round(PIXI.Ticker.shared.FPS)}`)
        this.updateInputs(now())

        //Reduce the lag counter by the frame duration
        this.lag -= this.frameDuration
    }

    // Render elements in-between states
    const lagOffset = this.lag / this.frameDuration
    this.interpolateSpaceships(lagOffset)
}

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