WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js控制渲染帧率(FPS)

首先你应该知道Three.js渲染器的渲染方法.render()每执行一次,WebGL帧缓冲区就得到一帧像素数据,canvas画布就会显示当前渲染的一帧像素数据。通过requestAnimationFrame()可以周期性调用执行渲染方法.render(),帧率就是指渲染方法.render()每秒钟执行次数,比如帧率是60,可以表示为60FBS,FBS对应的英文是Frame per Second(每秒帧数),如果帧率是50,那么2秒对应帧数就是100.

在一些特定的应用中没有必要保持Threejs渲染频率为60FPS,那么可以通过Threejs渲染时间判断来控制Threejs渲染频率,比如设置为30FPS。

下面代码通过时钟对象.Clock.getDelta()方法获得threejs两帧渲染时间间隔,然后通过时间判断来控制渲染器渲染方法.render()每秒执行次数。

// 创建一个时钟对象Clock
var clock = new THREE.Clock();
// 设置渲染频率为30FBS,也就是每秒调用渲染器render方法大约30次
var FPS = 30;
var renderT = 1 / FPS; //单位秒  间隔多长时间渲染渲染一次
// 声明一个变量表示render()函数被多次调用累积时间
// 如果执行一次renderer.render,timeS重新置0
var timeS = 0;
function render() {
  requestAnimationFrame(render);
  //.getDelta()方法获得两帧的时间间隔
  var T = clock.getDelta();
  timeS = timeS + T;
  // requestAnimationFrame默认调用render函数60次,通过时间判断,降低renderer.render执行频率
  if (timeS > renderT) {
    // 控制台查看渲染器渲染方法的调用周期,也就是间隔时间是多少
    console.log(`调用.render时间间隔`,timeS*1000+'毫秒');
    renderer.render(scene, camera); //执行渲染操作
    ...
    //renderer.render每执行一次,timeS置0
    timeS = 0;
  }
}
render();
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com