Ограничение частоты кадров в три.JS, чтобы увеличить производительность, метод requestAnimationFrame?

Я думал, что для некоторых проектов я делаю 60fps не совсем нужен. Я решил, что у меня может быть больше объектов и вещей, которые работают на 30fps, если я смогу заставить его работать плавно на этой частоте кадров. Я решил, что если я отредактирую оболочку requestAnimationFrame внутри трех.js я мог бы ограничить его до 30 таким образом. Но мне было интересно, есть ли лучший способ сделать это, используя три.js сам по себе, как предусмотрено. Кроме того, это даст мне прирост производительности, я думаю. Смогу ли я передать в два раза больше объектов в 30fps, чем я буду в 60? Я знаю разницу между запуском вещей в 30 и 60, но смогу ли я заставить его работать с гладкой постоянной 30fps?

обычно я использую WebGLRenderer и при необходимости возвращаюсь к Canvas, за исключением проектов, которые специально нацелены на один, и обычно это проекты шейдеров webgl.

18
canvas html5 javascript requestanimationframe three.js

4 ответов

Как насчет чего-то вроде этого:

function animate() {

    setTimeout( function() {

        requestAnimationFrame( animate );

    }, 1000 / 30 );

    renderer.render();

}
44

объем работы вашего процессора и GPU должен зависеть от рабочей нагрузки, и они устанавливают верхний предел плавной частоты кадров.

  • GPU работает в основном линейно и всегда может выталкивать одно и то же количество полигонов на экран.

  • однако, если вы удвоили количество объектов, CPU должен работать больше, чтобы оживить эти все объекты (matrix transformationsn и такие). Это зависит от вашей модели мира и другой работы Javascript, сколько дополнительные накладные расходы. Также условия, такие как число видимого объекты-это важно.

для простых моделей, где все полигоны находятся на экране всегда, тогда он должен в значительной степени следовать правилу "половина частоты кадров, удвоить объекты". Для 3D-шутера, как сцены, это определенно не так.

6

я наткнулся на эту статью, которая дает два способа решения проблемы пользовательской частоты кадров.

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();
}
2

этот подход также может работать, используя три.Часы для измерения дельты.

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;
   }
}
0