Цикл рендеринга и метод update

Цикл рендеринга в Two.js представляет собой непрерывный процесс обновления сцены и её отображения на холсте. В основе лежит механизм анимации, позволяющий синхронизировать изменения объектов с частотой кадров, обеспечивая плавную визуализацию.

Каждый кадр цикла рендеринга проходит следующие этапы:

  1. Обновление состояния объектов – вычисляются новые позиции, размеры, цвета и другие свойства графических элементов.
  2. Перерисовка сцены – сцена полностью перерисовывается в соответствии с актуальными значениями свойств объектов.
  3. Запуск колбэков анимации – выполняются функции, добавленные через Two.bind('update', callback) или через собственный метод animate.

Two.js использует внутренний механизм запроса анимации браузера через requestAnimationFrame, что гарантирует оптимальное использование ресурсов и синхронизацию с частотой обновления экрана.

Метод update

Метод update() является центральным элементом управления сценой в Two.js. Он выполняет пересчет всех трансформаций, положение и состояние объектов, а также обновляет визуальные свойства перед рендерингом. Метод можно вызвать вручную, если требуется обновить сцену без запуска полного цикла анимации.

Основной синтаксис

two.update();

Ключевые функции update()

  • Пересчет матриц трансформации: все объекты сцены имеют локальные и глобальные матрицы, которые пересчитываются при вызове update().
  • Обновление привязанных свойств: любые свойства, которые были изменены через анимацию или скрипт, фиксируются и становятся видимыми на экране.
  • Синхронизация с рендерером: метод обеспечивает передачу актуальных данных в рендерер (SVG, Canvas или WebGL), что делает возможной корректную отрисовку.

Связь update и анимации

Two.js позволяет организовать анимацию объектов через внутренний цикл обновления. Привязка колбэков осуществляется следующим образом:

two.bind('update', function(frameCount) {
  rectangle.rotation += 0.01;
}).play();
  • frameCount – число текущего кадра, увеличивается на единицу при каждом вызове update().
  • Все изменения, произведенные внутри колбэка, будут учтены при следующем вызове update() и отрисованы на экране.

Важно понимать, что update() не выполняет автоматический рендер: если цикл анимации не запущен через play(), сцена останется визуально неизменной до вызова render() или update() вручную.

Управление частотой обновлений

Two.js позволяет регулировать скорость анимации через параметр two.setFrameRate(fps):

two.setFrameRate(30); // ограничение 30 кадрами в секунду
  • При установке меньшего FPS объекты обновляются реже, экономя ресурсы, но анимация может стать менее плавной.
  • При высоком FPS анимация становится более плавной, но нагрузка на процессор и GPU увеличивается.

Метод update() будет вызываться в соответствии с установленным FPS при использовании встроенного метода play().

Взаимодействие с динамическими объектами

При работе с динамическими объектами сцены (например, создаваемыми в цикле или добавляемыми по событию) важно корректно управлять их состоянием:

let circle = two.makeCircle(0, 0, 50);
two.update(); // пересчитывает положение и размеры нового объекта
  • После добавления нового объекта его свойства не будут отображены до следующего вызова update().
  • Если объект изменяется несколько раз до следующего кадра, метод update() гарантирует, что финальное состояние будет отрисовано корректно.

Практическая схема работы

  1. Создание сцены: let two = new Two({ width: 800, height: 600 });
  2. Добавление объектов: two.makeRectangle(...) или two.makeCircle(...)
  3. Определение анимации: two.bind('update', callback)
  4. Запуск цикла: two.play()
  5. Автоматический вызов update() каждый кадр, пересчет всех трансформаций и рендеринг сцены.

Метод update() и цикл рендеринга тесно связаны: первый обеспечивает актуальность состояния объектов, второй – их визуальное отображение. Такой подход позволяет создавать сложные интерактивные сцены с динамическими объектами, плавной анимацией и точным контролем над обновлением графики.

Оглавление