В основе системы трансформаций Lottie лежит двумерная композиция, однако в структуре формата предусмотрен набор параметров, позволяющих эмулировать трёхмерное пространство. Эти возможности возникают на стыке данных из Adobe After Effects и способа интерпретации JSON-структуры библиотекой lottie-web.
3D в Lottie не является полноценным рендерингом трёхмерной сцены. Вместо этого используется математическое расширение 2D-трансформаций за счёт добавления осей вращения и перспективных коэффициентов. Каждый слой может хранить состояние в виде преобразования матрицы, дополненного компонентами вращения по осям X, Y и Z.
Поддержка 3D-трансформаций начинается на уровне композиции в After Effects. При включении режима 3D Layer для слоя в структуру проекта добавляются дополнительные параметры:
При экспорте через Bodymovin эти параметры сериализуются в JSON как дополнительные каналы анимации transform-объекта слоя.
В формате Lottie каждый слой содержит блок ks (keyframe
transformations). Для 3D-слоёв структура расширяется следующим
образом:
p — позиция, может содержать три компонента [x, y,
z]rx — rotationXry — rotationYrz — rotationZor — orientationa — anchor pointПри этом важно, что наличие третьей координаты в позиции и отдельных осей вращения не означает наличие полноценной Z-буферизации или реального 3D-движка. Это лишь параметры преобразования, которые далее проецируются в 2D-плоскость.
Lottie-web использует два основных типа рендеринга: SVG и Canvas. В обоих случаях 3D-данные приводятся к двумерной матрице преобразования.
Каждый слой описывается матрицей:
M = T × Rz × Ry × Rx × Sгде:
После вычисления итоговой матрицы происходит проекция в экранное пространство.
В случае Canvas-рендерера используется встроенная матрица
CanvasRenderingContext2D.setTransform, а в SVG —
модификация атрибута transform.
Несмотря на наличие Z-координаты, Lottie не выполняет:
Z-значение используется только для смещения слоя вдоль виртуальной оси, которое затем учитывается при проекции камеры, если она присутствует в композиции.
При использовании камеры After Effects добавляет в экспорт дополнительные параметры:
Эти значения преобразуются в матричную проекцию, влияющую на все 3D-слои композиции.
Камера в Lottie реализуется как дополнительное глобальное преобразование сцены. Все слои пересчитываются относительно её позиции, после чего результат приводится к 2D-плоскости.
Перспективный эффект в Lottie достигается за счёт комбинации:
При этом отсутствует полноценная перспектива рендеринга геометрии, как в WebGL. Эффект является математической аппроксимацией.
Библиотека lottie-web при загрузке JSON-композиции анализирует структуру слоя и определяет наличие 3D-флагов. Если слой помечен как трёхмерный, активируется расширенный режим вычисления трансформаций.
Ключевые особенности обработки:
3dLayer флага в данных AEПри этом движок не переключается в другой режим рендеринга — остаётся SVG или Canvas.
3D-трансформации значительно увеличивают вычислительную нагрузку за счёт:
На Canvas это проявляется в росте CPU-вычислений, на SVG — в увеличении количества DOM-операций при обновлении атрибутов transform.
Вращения применяются в строго определённой последовательности:
Изменение порядка приводит к различным визуальным результатам из-за некоммутативности матричных операций. After Effects фиксирует порядок на этапе экспорта, и Lottie воспроизводит его без изменений.
Anchor point играет ключевую роль в восприятии 3D-вращений. Вращение всегда выполняется относительно точки якоря слоя.
При изменении anchor point:
В 3D-слоях anchor point может содержать трёхмерные координаты, что дополнительно усложняет матричные вычисления.
Несмотря на расширенную модель трансформаций, существуют системные ограничения:
3D в Lottie остаётся слоёной моделью с математической проекцией, а не полноценной 3D-средой.
SVG-рендерер:
transformCanvas-рендерер:
3D-трансформации в Canvas обычно дают более предсказуемый результат при сложной анимации камеры.
Внутри движка вычисление происходит через цепочку функций преобразования слоя:
Каждый кадр пересчитывает всю цепочку заново, что делает точность вычислений критически важной для синхронизации анимации.
Если в After Effects используются выражения, влияющие на 3D-параметры, они экспортируются в виде уже вычисленных значений. Lottie не интерпретирует expressions, а получает результат их выполнения.
Это означает, что:
3D-трансформации формируют промежуточный слой между реальной 3D-геометрией и классической 2D-анимацией. Система основана на матричных преобразованиях, расширенных параметрами глубины и камеры, но ограничена плоским рендерингом и отсутствием трёхмерного движка.