Порядок отрисовки

Two.js — это мощная библиотека для работы с 2D-графикой на JavaScript, основанная на принципах сцен и объектов. Понимание порядка отрисовки (rendering order) является ключевым для создания корректных визуальных композиций и управления слоями.

Сцена и объекты

В Two.js все элементы добавляются в сцену (two.scene) в виде объектов (Two.Shape, Two.Group, Two.Path и других). Каждый объект в сцене имеет следующие важные свойства:

  • parent — ссылка на родительский объект (Two.Group или two.scene).
  • children — массив дочерних объектов для групп.
  • _renderer — внутренний объект, отвечающий за визуализацию.

Порядок отрисовки напрямую связан с структурой дерева сцены. Объекты, находящиеся выше в списке children, рисуются раньше, а те, что добавлены позже, — поверх них.

const circle = two.makeCircle(50, 50, 40);
const rect = two.makeRectangle(50, 50, 80, 40);

two.add(rect);
two.add(circle);

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

Управление порядком через группы

Группы (Two.Group) позволяют объединять объекты и управлять их отрисовкой как единой сущностью. Важные моменты:

  • Внутри группы порядок дочерних объектов определяется порядком в массиве children.
  • Группы можно перемещать в дереве сцены, что влияет на слой, на котором они отображаются.
  • Перемещение объекта между группами изменяет порядок отрисовки относительно других элементов сцены.
const group = two.makeGroup(circle, rect);
two.add(group);

group.children.reverse(); // изменяем порядок отрисовки внутри группы

После вызова reverse() прямоугольник окажется поверх круга, так как он теперь последний в списке children.

Методы для изменения порядка отрисовки

Two.js предоставляет несколько способов программно управлять порядком объектов:

  • bringToFront() — перемещает объект в конец родительского массива children, делая его верхним слоем.
  • sendToBack() — перемещает объект в начало родительского массива children, помещая под другие объекты.
  • appendTo(group) / prependTo(group) — добавляют объект в конец или начало массива дочерних объектов группы.

Пример:

rect.bringToFront(); // теперь прямоугольник поверх всех
circle.sendToBack(); // круг уходит на задний план

Влияние анимаций на порядок отрисовки

Two.js использует двухфазный цикл рендеринга:

  1. Обновление свойств объектов (update) — изменения позиции, масштаба, цвета и других атрибутов.
  2. Финальная отрисовка (render) — последовательное прохождение всех объектов сцены согласно текущему порядку children.

Если во время анимации изменяется порядок объектов, важно учитывать, что такие изменения вступают в силу только на следующем кадре. Для плавной анимации слоёв можно использовать методы управления группами в комбинации с requestAnimationFrame:

two.bind('update', function(frameCount) {
    if (frameCount % 60 === 0) {
        rect.bringToFront();
    }
}).play();

Z-index в Two.js

Two.js не использует CSS-подобный z-index. Позиция объекта в массиве children определяет его визуальный слой. В случае сложных сцен можно создать виртуальные слои, используя группы:

const backgroundLayer = two.makeGroup();
const mainLayer = two.makeGroup();
const uiLayer = two.makeGroup();

two.add(backgroundLayer);
two.add(mainLayer);
two.add(uiLayer);

Все объекты, добавленные в uiLayer, будут поверх объектов из mainLayer и backgroundLayer. Такой подход упрощает управление порядком и предотвращает необходимость постоянного вызова bringToFront().

Особенности при использовании SVG и Canvas рендереров

  • SVG Renderer: порядок отрисовки строго соответствует DOM-последовательности элементов <g> и <path>. Изменение порядка дочерних элементов влияет на их отображение.
  • Canvas Renderer: порядок отрисовки определяется последовательным вызовом методов рисования на context. Перемещение объектов в массиве children напрямую меняет слой.

Рекомендации по управлению порядком

  • Всегда использовать группы для логического разделения слоёв: фон, основной контент, интерфейс.
  • Для динамически изменяющихся объектов применять bringToFront() или sendToBack() с осторожностью, чтобы избежать мерцания при частых обновлениях.
  • При создании статических сцен порядок добавления объектов в массив children — основной способ управления слоями.

Важные свойства объектов, влияющие на визуальный результат

  • opacity — прозрачность объекта.
  • fill и stroke — цвет заливки и линии.
  • visible — видимость объекта; невидимые объекты не учитываются при рендеринге, но остаются в порядке отрисовки.

Эти свойства работают независимо от порядка, однако визуальные перекрытия объектов всегда зависят от их положения в массиве children.

Хотите, я подготовлю отдельный блок с практическими схемами и визуальными примерами порядка отрисовки, который идеально подходит для учебника и поможет закрепить материал наглядно?

Оглавление