Управление ресурсами

Two.js — это высокоуровневая библиотека для работы с 2D-графикой в браузере с использованием Canvas, SVG или WebGL. Управление ресурсами в Two.js начинается с правильного создания экземпляра Two, который отвечает за рендеринг сцен и хранение всех объектов графики.

const elem = document.getElementById('draw-area');
const params = {
  width: 800,
  height: 600,
  type: Two.Types.canvas // можно использовать Two.Types.svg или Two.Types.webgl
};
const two = new Two(params).appendTo(elem);

Ключевые моменты:

  • width и height задают размеры холста.
  • type определяет рендерер: Canvas, SVG или WebGL. Выбор влияет на производительность и возможности анимации.
  • appendTo добавляет холст в DOM и является первым шагом для управления графическими ресурсами.

Создание и управление фигурами

Все графические объекты в Two.js являются экземплярами Two.Shape или его наследников: Two.Path, Two.Circle, Two.Rectangle и других.

const circle = two.makeCircle(400, 300, 50);
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;
  • fill и stroke отвечают за заливку и обводку.
  • linewidth задаёт толщину линии.
  • Объект автоматически добавляется в сцену Two.js, что упрощает управление ресурсами.

Для управления большим количеством объектов удобно группировать их через Two.Group:

const group = two.makeGroup(circle);
const rect = two.makeRectangle(500, 300, 100, 50);
group.add(rect);
group.translation.set(100, 50); // перемещает всю группу

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

Работа с текстурами и изображениями

Two.js поддерживает использование растровых изображений в качестве текстур через Two.Texture и Two.Image.

const texture = new Two.Texture('path/to/image.png');
const image = two.makeSprite(texture, 200, 150);

Особенности управления ресурсами:

  • Текстуры загружаются асинхронно, поэтому следует использовать события загрузки для корректного отображения:
texture.image.onl oad = () => {
  two.update();
};
  • После добавления изображения в сцену, Two.js автоматически управляет его рендерингом и очисткой памяти при удалении объекта.

Анимация и управление временем

Для управления обновлением сцены и анимацией используется встроенный метод two.update() и цикл two.bind(‘update’, callback):

two.bind('update', (frameCount) => {
  circle.rotation += 0.02;
}).play();
  • frameCount увеличивается с каждой итерацией цикла.
  • play() запускает анимационный цикл, автоматически обновляя все объекты на сцене.
  • Для паузы или остановки используется two.pause() или two.stop(), что освобождает ресурсы CPU и памяти.

Управление памятью и удаление объектов

Удаление объектов в Two.js выполняется через метод remove():

two.remove(circle);
  • После удаления объект больше не участвует в рендеринге, а память освобождается сборщиком мусора.
  • Для групп также работает удаление всех дочерних объектов одновременно:
two.remove(group);

Дополнительно для очистки всей сцены используется two.clear(), что удаляет все объекты и освобождает ресурсы:

two.clear();
two.update();

Работа с слоями и порядком отрисовки

Two.js управляет порядком рендеринга через порядок добавления объектов. Для точного контроля можно использовать свойства addTo() и bringToFront() / sendToBack():

rect.addTo(two.scene); // добавление на сцену
circle.bringToFront(); // вывод поверх других объектов

Ключевой момент: управление слоями влияет на визуальное перекрытие и рендеринг, а также на оптимизацию, поскольку объекты, скрытые другими слоями, всё равно могут обрабатываться CPU/GPU.

Использование ресурсов SVG и Canvas

Two.js абстрагирует рендеринг, но при работе с SVG или Canvas важно учитывать особенности управления ресурсами:

  • SVG: объекты создаются как DOM-элементы <path>, <circle> и др., легко управляются через CSS и события.
  • Canvas: объекты не являются отдельными DOM-элементами, поэтому для удаления или изменения атрибутов нужно обновлять сцену через two.update().
  • WebGL: позволяет использовать GPU для ускоренного рендеринга, важно следить за текстурами и памятью видеокарты.

Оптимизация ресурсов

Для больших сцен Two.js предлагает следующие подходы:

  1. Использовать группы для коллективного управления объектами.
  2. Удалять неиспользуемые объекты через remove().
  3. Обновлять сцену только при изменении с помощью two.update(), а не на каждом кадре.
  4. Использовать WebGL для графики с большим количеством элементов.
  5. Пересчитывать сложные фигуры заранее, вместо динамического пересоздания на каждом кадре.

Эти методы позволяют контролировать использование памяти, CPU и GPU, обеспечивая плавную работу приложений на базе Two.js.

Оглавление