Question

我在想，对于某些项目，我做60fps并不是完全需要的。我想我可以有更多的物体和物体以30fps运行，如果我能让它以该帧速率平稳运行。我想如果我在three.js中编辑了requestAnimationFrame垫片，我可以将它限制为30。但是我想知道是否有更好的方法来使用提供的three.js本身。此外，这会给我带来我正在思考的性能提升。我能以30fps的速度渲染两倍于60fps的物体吗？我知道在30和60之间运行的东西之间的区别，但是我能够以平稳的30fps运行吗？

我通常使用WebGLRenderer，如果需要，可以回退到Canvas，除了专门针对一个的项目，通常是webgl着色器项目。

Answer 1

这样的事情：

function animate() {

    setTimeout( function() {

        requestAnimationFrame( animate );

    }, 1000 / 30 );

    renderer.render();

}

Answer 2

CPU和GPU需要做的工作量取决于工作负载，并设置平滑帧率的上限。

GPU主要是线性工作，并且可以始终将相同数量的多边形推出到屏幕上。
但是，如果你加倍了对象的数量，CPU必须更加努力地为这些所有对象设置动画（矩阵转换等等）。这取决于你的世界模型和其他工作Javascript确实给了多少额外的开销。此外，可见对象的数量等条件也很重要。

对于所有多边形都在屏幕上的简单模型，它应该遵循“帧速率的一半，对象加倍”的规则。对于像场景一样的3D射击游戏，情况肯定不是这样。

Answer 3

使用三时钟测量增量，此方法也可以使用。

let clock = new THREE.Clock();
let delta = 0;
// 30 fps
let interval = 1 / 30;

function update() {
  requestAnimationFrame(update);
  delta += clock.getDelta();

   if (delta  > interval) {
       // The draw or time dependent code are here
       render();

       delta = delta % interval;
   }
}

Answer 4

我遇到过这篇文章，它提供了两种解决自定义帧速率问题的方法。

http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/

我认为这种方式更加强大，因为即使在不能以60 fps一致渲染画布的计算机上也能保持稳定的动画速度。以下是一个例子

SqlConnectionFactory

Answer 5

普遍的答案是有问题的，与不限制fps相比，慢速计算机上的速度高达-10fps，例如在不限制36pfs的情况下，可接受的解决方案为26fps。

相反，您可以执行以下操作：

var dt=1000/60;
var timeTarget=0;
function render(){
  if(Date.now()>=timeTarget){

    gameLogic();
    renderer.render();

    timeTarget+=dt;
    if(Date.now()>=timeTarget){
      timeTarget=Date.now();
    }
  }
  requestAnimationFrame(render);
}

如果已经落后，那将不会等待。

限制Three.js中的帧率以提高性能，requestAnimationFrame？

5 个答案: