Оптимизация путей и фигур

Two.js предоставляет возможность создавать сложные графические объекты с помощью примитивов и кривых. Пути (Paths) в Two.js формируются из последовательностей вершин (Vertices) и могут быть замкнутыми или открытыми. Каждый путь представляет собой объект Two.Path, который поддерживает прямые линии, кривые Безье и полилинии.

Создание и модификация путей

Путь создаётся через массив точек, каждая из которых задаётся объектом { x, y }:

const path = new Two.Path([
  new Two.Anchor(0, 0),
  new Two.Anchor(100, 0),
  new Two.Anchor(100, 100)
], true); // true — замкнутый путь
two.add(path);

Ключевые свойства Two.Path:

  • vertices — массив объектов Two.Anchor, определяющих форму пути.
  • closed — булево значение, указывающее, замкнут путь или нет.
  • fill и stroke — цвет заливки и обводки.
  • linewidth — толщина линии.
  • cap и join — стили окончания линий и соединений углов.

Для оптимизации важно минимизировать количество вершин, особенно при сложных кривых. Каждая лишняя вершина увеличивает нагрузку на рендеринг и обновление сцены. Использование метода simplify() позволяет уменьшить количество точек без значительной потери формы.

path.vertices = Two.Utils.simplify(path.vertices, 2);

Здесь 2 — это допустимая погрешность.

Работа с кривыми и сглаживанием

Two.js поддерживает кривые Безье второго и третьего порядка. Для создания плавных контуров используется свойство curve у вершин:

const anchor = new Two.Anchor(50, 50, 20, 0, 0, 20); // x, y, lx, ly, rx, ry
  • lx, ly — левый управляющий вектор.
  • rx, ry — правый управляющий вектор. Правильная установка управляющих векторов позволяет уменьшить количество вершин, создавая плавные кривые вместо множества маленьких отрезков.

Методы Two.Path.subdivide() и Two.Path.curve() позволяют динамически изменять кривизну, что удобно для анимаций или генеративной графики. В целях оптимизации рекомендуется использовать заранее вычисленные кривые вместо частого пересоздания вершин в цикле анимации.

Минимизация количества объектов

Создание множества отдельных фигур влияет на производительность. Для оптимизации:

  • Объединение объектов: Использовать Two.Group для объединения нескольких фигур в один графический контейнер. Это снижает количество draw calls.
  • Использование Two.Path вместо Two.Polygon для сложных фигур: Polygon создаёт отдельный объект для каждой вершины, тогда как Path позволяет хранить всю форму внутри одного объекта.
const group = two.makeGroup([circle, rect, path]);
group.translation.set(200, 200);

Оптимизация анимаций

  • Изменение свойств напрямую: Модификация vertices быстрее, чем пересоздание всего объекта.
  • Сглаживание и упрощение: Методы simplify() и flatten() помогают уменьшить количество вычисляемых точек.
  • Кэширование статических фигур: Если фигура не меняется, её можно рендерить один раз на Two.Texture или использовать canvas слой для хранения результата.

Цвет, заливка и обводка

Использование сложных градиентов или прозрачных слоёв увеличивает нагрузку. Для оптимизации:

  • Использовать простые цвета, если динамика не требует градиентов.
  • Минимизировать использование прозрачности на больших фигурах.
  • Группировать фигуры с одинаковыми стилями, чтобы Two.js мог оптимизировать рендеринг.

Работа с Path Boolean Operations

Two.js поддерживает базовые операции над путями: объединение, вычитание, пересечение. Эти операции создают новые объекты Path, поэтому их нужно применять экономно. Для оптимизации:

  • Выполнять операции только один раз при инициализации сцены.
  • Избегать пересоздания объектов в каждом кадре анимации.
const combined = Two.Path.union(path1, path2);

Вывод

Для оптимальной работы с путями и фигурами в Two.js важно:

  • Минимизировать количество вершин с помощью simplify() и кривых Безье.
  • Использовать Two.Group для объединения объектов.
  • Изменять существующие объекты, а не пересоздавать их.
  • Стараться использовать простые стили заливки и обводки.
  • Кэшировать статические фигуры и заранее вычислять сложные операции.

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

Оглавление