В библиотеке Lottie Web режимы смешивания (blend modes), экспортируемые из After Effects, транслируются в механизмы композитинга браузера. В зависимости от выбранного рендерера — SVG или Canvas — поведение и стоимость вычислений существенно различаются.
В Canvas-рендерере каждый слой с blend mode отображается через
globalCompositeOperation, что переводит смешивание в
пиксельную операцию на уровне растрового буфера. В SVG-рендерере
аналогичный эффект достигается через фильтры и режимы смешивания SVG,
которые часто оказываются более затратными из-за участия layout и filter
pipeline браузера.
Каждый кадр Lottie-анимации формируется как последовательность слоёв, где порядок отрисовки строго соответствует структуре композиции. При наличии blend modes процесс усложняется:
При большом количестве слоёв возникает цепочка зависимых операций, исключающая эффективную параллелизацию.
Canvas-движок браузера реализует blend modes через растровый композитинг. Основные режимы, такие как multiply, screen, overlay, требуют пост-пиксельной обработки:
Каждая операция выполняется для каждого пикселя пересечения слоёв, что формирует зависимость стоимости от площади перекрытия, а не от количества объектов.
При высокой плотности слоёв возникает рост fill-rate нагрузки, где узким местом становится не CPU-логика Lottie, а GPU/CPU композитинг.
SVG-режим использует фильтры (feBlend,
feComposite), что переносит часть работы в графический
pipeline браузера. Однако:
В результате SVG при активных blend modes часто становится менее предсказуемым по производительности, чем Canvas.
Основной фактор деградации производительности — overdraw. Blend modes фактически увеличивают стоимость каждого перекрытия слоёв.
Если сцена содержит N слоёв с пересечениями, итоговая нагрузка приближается к:
При этом прозрачность и сложные маски увеличивают количество операций чтения и записи в буфер кадра.
Особенно критичны:
Комбинация масок и режимов смешивания формирует многослойный композитинг:
Такой порядок исключает возможность оптимизации слоя как единого bitmap cache. Каждое изменение маски приводит к пересчёту всего стекa.
Precomposition в Lottie может частично снизить нагрузку, но при наличии blend modes эффект неоднозначен.
Если blend mode находится внутри precomp:
Если blend mode применяется между precomps:
Таким образом, вложенные композиции не гарантируют снижение стоимости при активных режимах смешивания.
Lottie Web использует несколько уровней кэширования:
Blend modes часто инвалидируют эти кэши, поскольку результат слоя зависит от контекста нижележащих пикселей. Это приводит к повторной отрисовке даже статических элементов.
Особенно критично:
Несмотря на использование GPU в canvas pipeline, доступ к нему косвенный. Blend modes не всегда полностью аппаратно ускорены:
На мобильных устройствах это проявляется особенно резко из-за ограниченной памяти видеобуфера.
Основные паттерны, приводящие к падению производительности:
Порядок отрисовки напрямую влияет на стоимость композитинга. Более дешёвые слои должны располагаться выше или ниже так, чтобы минимизировать площадь пересечения с blend layers.
Эффективный порядок снижает:
Некоторые режимы имеют значительно более высокую стоимость:
Снижение количества уникальных blend modes в одной сцене уменьшает фрагментацию pipeline.
Фиксация сложных групп слоёв в bitmap-кэш снижает нагрузку:
Однако это увеличивает потребление памяти и снижает гибкость анимации.
При масштабировании canvas или SVG сцены с blend modes происходят дополнительные пересчёты:
При 60 FPS каждая операция blend mode выполняется в рамках жёсткого временного бюджета ~16 мс. При превышении этого бюджета:
Суммарная стоимость сцены с blend modes определяется не количеством слоёв как таковых, а следующими факторами: