如何在 pixi.js 中实现黄油平滑运动（没有任何滞后/尖峰）

Posted 2023-03-10

【中文标题】如何在 pixi.js 中实现黄油平滑运动（没有任何滞后/尖峰）

【英文标题】：How to achieve butter smooth motion in pixi.js (without any lags / spikes)

【发布时间】：2020-10-12 07:10:54

【问题描述】：

我正在尝试使用 pixi.js 实现黄油平滑运动。我想应该是很简单的事情，但我似乎无法获得它。

有时我会遇到尖峰/微滞后。我已经使用最新的 Chrome 版本和最新的 PIXI js（实际上是 5.3.3）在我的 Ubuntu 20.04 开发机器上对其进行了测试。我的旧 Macbook pro（2013 年末）上的最新版 Chrome 也会发生同样的情况

这是我正在使用的代码：

const app = new PIXI.Application(
  view: document.querySelector("#view"),
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x0,
  antialias: false
)
const ticker = PIXI.Ticker.system
const box = new PIXI.Graphics()
box.lineStyle(1, 0xff0000)
        .drawRect(
                100, 
                100, 
                100, 
                100)
app.stage.addChild(box)

let speed = 4
app.ticker.add( (dt) => 
  if (box.x < 0) 
    speed *= -1
    box.x += speed * dt
  
  if (box.x > 800) 
    speed *= -1 
    box.x += speed * dt
  
  box.x += speed * dt
)

这里是运行版本https://codepen.io/ferama/pen/LYZVBMx

我错过了什么？

【参考方案1】：

您将永远无法消除 WebGL 动画中偶尔出现的卡顿。每个 Web 渲染框架（包括 PixiJS）的下面都是对 requestRenderFrame() 的调用。顾名思义，它是对浏览器的一个 request 重新绘制窗口。你不会总是得到一个“确定，现在就做！”的反馈。从浏览器。有时浏览器很忙。有时，您的 javascript 垃圾收集器必须运行。有时蝴蝶在中国扇动翅膀……

要点是，完全控制帧速率的唯一方法是使用 DirectX 等技术，该技术允许完全控制实际渲染和显示硬件（主要是！）。 WebGL 根本不适合这个。

【讨论】：

谢谢。很奇怪，我在 Linux 上使用 Monogame 构建了相同的最小示例。微滞后不太频繁，但也在那里发生。与此同时，我有机会在 Windows 上测试了 pixi 版本，并且在微滞后非常罕见的情况下看起来更加稳定。

问题：当您在 linux 上使用 pixi.js 应用程序启动页面时，您在控制台中看到了什么？ "PixiJS 5.1.3 - WebGL 2... ?你看到WebGL 2 部分了吗？另外，您应该将您的 pixi 版本升级到最新版本（现在是 5.3.3）：github.com/pixijs/pixi.js/releases

控制台显示 PixiJS 5.3.3 - ✰ WebGL 2 ✰（我编辑的原始问题中有错字，谢谢）

【参考方案2】：

它对我来说运行得很好，但是你可以尝试设置 antialias: true 和 resolution: window.devicePixelRatio。

【讨论】：

经过测试但不幸的是没有成功