Как реализовать рендерер с учетом возможностей процессора

Question

Мне было интересно, как лучше всего реализовать рендерер в JavaScript.Здесь важна не контентная часть рендеринга - мне бы хотелось услышать, когда и как эффективно выполнить код рендерера.

В настоящее время у меня есть window.setInterval(renderFunc, 1000 / 20), который будет рендерить кадр каждый50 мс (т. Е. Fps = 20).

Дело в том, что более быстрые компьютеры не будут воспроизводить больше кадров, более того, более медленные компьютеры не смогут догнать 20 кадров в секунду, поэтому функция вызывается более чемкомпьютер может справиться.

Я думал о цикле while(true), но он использует 100% ЦП и зависает сам компьютер - так что на самом деле моя игра (рендерер моей 3D-игры)больше не будет играть, так как вы больше не можете нажимать на кнопки.

Какой самый эффективный вариант в этом сценарии или есть лучший метод, который мне не пришёл в голову?

Заранее спасибо.

Answer 1

Специально для анимации создана функция window.requestAnimationFrame. Это означает, что браузеры выбирают, когда вызывать вашу функцию анимации вместо интервалов жесткого кодирования. Много преимуществ от его использования:

• Более быстрые компьютеры получат более высокую частоту кадров
• Windows / вкладки, которые не отображаются, обновляются гораздо реже
• Различная частота кадров в зависимости от загрузки процессора

В этой статье объясняется, как использовать его в кросс-браузерном режиме: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

В статье также есть ссылки на http://jsfiddle.net/paul/XQpzU/2/

Answer 2

"setInterval () пропустит количество миллисекунд после того, как обратный вызов был вызван" - https://developer.mozilla.org/en/window.setInterval

Вы можете использовать это для динамической настройки вашего интервала времени.

Примечание: документы MDCпредназначены для Javascript, реализованного Mozilla, а не для ECMA Script или других реализаций.Вы должны проверить, работает ли это в других браузерах.

Answer 3

Вы можете определить время, необходимое для рендеринга кадра, и настроить интервал между кадрами для достижения приемлемой нагрузки.Например, если для рендеринга текущего кадра потребовалось 5 мс, и вы хотите загрузить 50%, подождите 5 мс до следующего кадра.Вы захотите установить некоторые проверки работоспособности, а также, возможно, использовать время из последних нескольких кадров.

Answer 4

Изучите цикл while(true) внутри рабочего потока. Это должно предотвратить блокировку браузера. Обратите внимание, что вы не можете напрямую манипулировать <canvas> или любой другой частью DOM из рабочего потока.

https://developer.mozilla.org/En/Using_web_workers