Three.js requestAnimationFrame 或 TweenMax 刻度处理程序答案

【问题标题】：Three.js requestAnimationFrame OR TweenMax tick handlerThree.js requestAnimationFrame 或 TweenMax 刻度处理程序
【发布时间】：2012-08-17 22:52:09
【问题描述】：

我一直在试验Greensock's TweenMax JS 和Three.js。由于两个库都使用 requestAnimationFrame (rAF)，我需要决定哪个库应该处理这个问题。

如果我使用Three.js 内置的 rAF，它的运行速度约为 30fps，并且非常流畅。

如果我使用TweenMax，例如：TweenMax.ticker.addEventListener('tick', animate);，它的运行速度约为 55-60fps，但有点不稳定。

我可以将 TweenMax 中的 fps 更改为 TweenMax.ticker.fps(30);，正如预期的那样，它的运行类似于 Three.js rAF 版本。

我的问题是哪种方法更受欢迎，哪种方法被认为是最佳实践？另外，如果我选择 Three.js，我是否可以在其 rAF 实现中更改 fps？

最后，您将如何决定 fps 以适应更广泛的受众？限制为 30fps 似乎没问题，但有点武断，一些用户的速率可能比我允许的高得多。

更新：

根据 mrdoob 和 jack 的反馈，我已经在 three.js 中尝试 rAF 和使用 TweenMax 的 rAF，开启和关闭抗锯齿。

抗锯齿开启：

Three.js rAF (default) - 30fps smooth.

http://jsfiddle.net/cR7Lx/21/

TweenMax rAF (default) - 55-60fps slightly choppy.

http://jsfiddle.net/cR7Lx/23/

TweenMax rAF (fps(30)) - 30fps smooth.

http://jsfiddle.net/cR7Lx/24/

抗锯齿关闭：

Three.js rAF (default) - 30 - 60fps slightly choppy.
TweenMax rAF (default) - 92-120fps slightly choppy.
TweenMax rAF (fps(30)) - 30fps smooth.

可以请知道 requestAnimationFrame 如何在后台工作的人来帮助解释差异，现在我将使用 TweenMax 30fps 或 Three.js 两者都启用抗锯齿。

【问题讨论】：

标签： three.js gsap

【解决方案1】：

澄清一下，默认的 TweenMax RAF 行为并没有对 fps 设置上限，因为...嗯...这就是 requestAnimationFrame 的重点——它旨在成为 浏览器 指示（通常在 60fps 左右）。使用 TweenMax.ticker.fps() 设置特定的 fps 只是设置一个上限（除非您设置了 TweenMax.ticker.useRAF(false) 在这种情况下它将使用setTimout() 以尽可能接近您设置的 fps）。

我注意到有人说您必须在 TweenMax 中设置 fps 以使其流畅，我只是想澄清这不是真的 - 如果/当它们发生得太快时，这样做只会跳过 RAF 更新 - 我可以'无法想象这会使任何事情变得更顺畅。它可能会适得其反。

如果您想降低低于正常浏览器刷新率的帧速率（通常为 60fps 左右），请仅使用 TweenMax.ticker.fps()。如果您正在寻找最平滑的结果，我可能会坚持使用 TweenMax 的默认配置。您可以尝试关闭 requestAnimationFrame 并使用非常高的 fps (TweenMax.ticker.useRAF(false); TweenMax.ticker.fps(100))，但缺点是您会丢失所有RAF 的好处，例如在标签处于非活动状态时提高移动设备的电池寿命，与本机浏览器刷新同步更新等。

抖动行为的最大原因是与 JavaScript 动画引擎无关的浏览器中的图形渲染。

我不熟悉 Three.js，所以我无法谈论它的功能或哪个选项会更好地用于驱动您的其他东西（抱歉）。我只能说我是 GreenSock 的忠实粉丝（哈哈）

【讨论】：

杰克，我也是你图书馆的忠实粉丝。我所经历的是，在 Three.js 中将 rAF 作为默认设置运行平稳，但在 30 fps 左右，在 TweenMax 中将 rAF 作为默认设置运行更高的帧率，但由于它介于 55 - 60 fps 之间，所以抖动更多。如果我使用 TweenMax.ticker.fps(30); 限制 fps，我可以让它更平滑；
顺便说一句，在 Stackoverflow 中没有 tweenmax 和 tweenlite 标签的 wiki 条目，我从您的网站添加了一些文本，作为您的库，您可能想要更新标签！

【解决方案2】：

当我检查这两种实现时，实际上它们实际上非常相似。他们都使用this 实现，但差别很小。

Three.js 实现计算您的最后一次调用并将下一次调用延迟 (16 ms - lastCall) 以修复您的 fps 60。如果它不能在 16 毫秒内完成，它自然会等待，只要它需要。

TweenMax 实施最初并没有修复您的 fps。相反，您必须手动调用 fps。这造成了这种波涛汹涌的局面。因为您必须始终提供正确的 fps 值（不多 - 不少）来调整延迟时间。

编辑：

我必须编辑 TweenMax 行为，因为我错过了在 fps 未定义时将默认 fps 设置为 60 的股票代码类末尾的构造函数调用 this.fps(fps)。

【讨论】：

如果 Three.js 不能做到 16ms 并等待只要它需要，它如何保持在 30fps 而不会跳到说 55fps？我知道动画能够达到 55fps，因为我使用 TweenMax 实现看到了这一点。
您在 animate 函数中的订单如何？您必须始终在 reqestAnimateFrame 之后调用渲染函数。如果您打破该顺序，您可以等待超过 16 毫秒，这可以修复您的 fps 2 x 16 毫秒（30 fps）。你是如何计算 fps 值的？您是否使用过任何第三方库，例如 stats.js？
在three.js中我使用requestAnimationFrame(animate);在动画函数中，类似于 rAF(animate);使成为（）; stats.update();是的，我正在使用 Stats.js。我根本不计算 fps，我把它留给两个实现自己做，除了在 TweenMax 中将 fps 更改为 30 以查看它是否更平滑。
function animate() { requestAnimationFrame( animate );使成为（）; stats.update(); }
这是一个疯狂的猜测。您是否尝试将抗锯齿设置为 false？我注意到当 antialias 设置为 true 时，Chrome 将 fps 设置为 30。