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

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

这种方法也可以使用 THREE.Clock 来测量增量。

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 3

CPU和GPU需要做的工作量取决于工作负载,它们设置了平滑帧率的上限.

• GPU主要是线性工作,并且总是可以将相同数量的多边形推出到屏幕上.

• 但是,如果你加倍了对象的数量,CPU必须更加努力地为这些所有对象设置动画(矩阵转换等).这取决于你的世界模型和其他工作Javascript确实给了多少额外的开销.此外,可见对象的数量等条件也很重要.

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

Answer 4

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

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

我认为这种方式更健壮，因为即使在不能以 60 fps 始终如一的速度渲染画布的计算机上，它也会具有稳定的动画速度。下面是一个例子

var now,delta,then = Date.now();
var interval = 1000/30;

function animate() {
    requestAnimationFrame (animate);
    now = Date.now();
    delta = now - then;
    //update time dependent animations here at 30 fps
    if (delta > interval) {
        sphereMesh.quaternion.multiplyQuaternions(autoRotationQuaternion, sphereMesh.quaternion);
        then = now - (delta % interval);
    }
    render();
}