В экосистеме Lottie Web модель сцены строится на иерархии слоёв, где каждый элемент может выступать как родитель или потомок. При включении 3D-режима добавляется третье измерение, и вся система трансформаций переходит от плоской матрицы к пространственной, где учитываются оси X, Y и Z.
Родительские связи в 3D не являются отдельным механизмом — это расширение стандартной системы трансформаций, основанной на матрицах. Каждый слой хранит собственное локальное преобразование, а итоговое положение вычисляется через последовательное умножение матриц родителей.
Каждый слой в Lottie описывает собственные параметры:
В 3D-режиме добавляется ось Z для всех пространственных свойств. При наличии родителя вычисление итоговой матрицы происходит по следующему принципу:
Итоговая позиция объекта определяется не напрямую, а через композицию всех трансформаций вверх по дереву.
Внутри движка Lottie используется стандартная 4×4 матрица преобразований. Она объединяет:
Общая форма:
M_total = M_parent × M_localДля цепочки вложенности:
M_total = M_root × ... × M_parent × M_childВажно, что порядок умножения имеет критическое значение: изменения родителя всегда применяются первыми.
Каждый слой в Lottie имеет anchor point — точку привязки, относительно которой происходят все трансформации.
В 3D-пространстве anchor point становится трёхмерным:
Именно относительно этой точки происходят вращения по осям X, Y и Z.
Если родительский слой смещается, дочерний не просто сдвигается, а полностью пересчитывает своё положение в пространстве с учётом локального anchor point.
В 3D Lottie поддерживает вращение вокруг трёх осей:
При наличии родительского слоя вращения становятся кумулятивными.
В отличие от 2D, где rotation — скаляр, в 3D порядок вращений влияет на результат:
R_total = R_parent × R_childЕсли родитель вращается по Y, а потом по X, дочерний слой наследует уже изменённую систему координат. Это приводит к эффекту «локального мира», где оси ребёнка перестают совпадать с глобальными.
Scale в 3D наследуется так же, как и другие трансформации, но с важной особенностью: масштаб влияет на глубину сцены.
При вложенных слоях:
Пример эффекта:
В 3D-режиме Lottie не использует полноценный Z-buffer как игровой движок. Вместо этого применяется упрощённая система сортировки:
Это приводит к важному ограничению: пересечения объектов в глубину могут выглядеть некорректно при сложных иерархиях.
Хотя Lottie не является полноценным 3D-движком, камера в композиции влияет на восприятие родительских связей.
Камера задаёт:
При движении камеры вся иерархия пересчитывается как единое дерево трансформаций. Родительские связи при этом остаются неизменными, но визуальная интерпретация глубины меняется.
Композиции в Lottie работают как верхнеуровневые контейнеры, внутри которых строится отдельное дерево слоёв.
В 3D-режиме композиция становится:
Каждая вложенная композиция фактически создаёт изолированную 3D-сцену, но при рендеринге они могут быть объединены через parent composition.
При глубокой вложенности 3D-слоёв возникают характерные эффекты:
Особенно заметны проблемы при комбинации:
Внутренне вся система родительских связей сводится к одной операции:
LayerWorldMatrix = ParentWorldMatrix × LocalTransformMatrixЭто означает, что каждый слой не существует отдельно — его состояние всегда зависит от всей цепочки родителей.
Даже незначительное изменение в верхнем слое:
пересчитывает всю поддеревянную структуру.
Анимация ключевых кадров в 3D-иерархии не изменяет принцип наследования, но изменяет динамику:
При этом родительская анимация может полностью изменить траекторию дочернего слоя без изменения его собственных ключей.
При сильных вращениях родителей происходит эффект инверсии локальных осей:
Это приводит к тому, что дочерний слой начинает интерпретировать свои трансформации в изменённой системе координат.
Система родительских связей в 3D Lottie остаётся упрощённой по сравнению с полноценными 3D-движками:
Однако матричная система наследования обеспечивает стабильное поведение и предсказуемую композицию слоёв при правильной структуре иерархии.