Быстрый обзор преимуществ нового рендера Flutter в 2024 году

Исходная статья: https://tomicriedel.medium.com/understanding-impeller-a-deep-dive-into-flutters-rendering-engine-ba96db0c9614

Недавно в плане развития Flutter 2024 года было объявлено, что в этом году команда Flutter планирует прекратить поддержку Skia на iOS, завершая полную миграцию на Impeller, а на Android в этом году предполагается завершение поддержки Vulkan и OpenGL в Impeller. В текущей версии Flutter 3.19 уже реализовано предварительное использование OpenGL на Android.

Поэтому сейчас нам стоит понять, что такое Impeller и как он отличается от Skia.

Как новый рендеринг движок Flutter, основной задачей Impeller является отрисовка интерфейса приложения, включая вычисление компоновки, текстурное отображение и управление анимациями, он преобразует код в пиксели, цвета и формы, поэтому Impeller непосредственно влияет на производительность и качество рендера приложений. Это также одна из основных проблем, с которыми сталкиваются многие ранние разработчики Flutter при переходе от Skia к Impeller, такие как:- Неправильная загрузка шрифтов, изменения в форме и компоновке букв, например, #142974, #140475, #138670, #138386,

• Несоответствие рендеринга линий или вырезов, например, #141563, #137956,
• Блуждание или искажение некоторых текстурных синтезов, например, #143719, #142753, #142549, #141850,
• ...Как видно, при переходе с Skia на Impeller возникают многочисленные ошибки, некоторые из которых были исправлены в Skia, но требуют повторного исправления в Impeller. Однако почему команда Flutter всё же решила перейти с Skia на Impeller? Это значит, что Skia недостаточно хорош? Сначала стоит отметить, что Skia является отличной универсальной библиотекой для работы с 2D графикой; например, такие устройства, как Google Chrome, Android и Firefox, используют Skia. Однако из-за её «универсальности», она не оптимизирована специально для нужд Flutter. Многие функции, предоставляемые Skia, выходят за рамки требований Flutter и могут привести к ненужному усложнению и замедлению процесса отрисовки. В настоящее время можно сказать, что универсальность Skia создаёт производственные ограничения для Flutter.

Impeller был создан специально для Flutter, его основной задачей является оптимизация процесса рендера архитектуры Flutter. Методы рендера Impeller могут более эффективно использовать GPU по сравнению с Skia, что позволяет устройству выполнять рендеринг анимаций и сложных элементов пользовательского интерфейса с меньшими затратами, тем самым повышая скорость рендера.Кроме того, Impeller использует тесселяцию и компиляцию шейдеров для декомпозиции и предварительной оптимизации графического рендера, что позволяет ему снижать нагрузку на аппаратные средства устройства, обеспечивая более высокую частоту кадров и плавность анимации.> Shader'ы могут выполняться на GPU для управления графическим рендерингом. В отличие от Skia на Flutter, где Skia динамически компилирует shader'ы, что может привести к задержкам при рендере, Impeller предварительно компилирует большинство shader'ов. Это предварительное компилирование значительно снижает вероятность замедления анимации, так как GPU не обязан приостанавливаться для компиляции shader'ов во время рендера кадра.

Impeller также внедряет новую многослойную архитектуру для упрощения процесса рендера, позволяющую каждому компоненту движка работать максимально эффективно, тем самым уменьшая количество шагов, необходимых для преобразования Flutter widgets в пиксели экрана.

Поэтому, дизайн Impeller'a основан на многослойной структуре, где каждый слой выполняет специализированную функцию, строясь поверх нижележащего слоя. Такое проектирование делает движок более эффективным и легче поддерживать и обновлять, поскольку различные области внимания разделены.

На вершине архитектуры Impeller'a находится Aiks, этот уровень служит продвинутым интерфейсом для графических операций. Он принимает команды от фреймворка Flutter, такие как отрисовка пути или изображения, и преобразует эти команды в набор более детальных "entity", передаваемых следующему уровню.

Под уровнем Aiks следует Framework Entities, который является центральным компонентом архитектуры импеллера. Когда Aiks завершает обработку команд и генерирует Entities, каждый Entity представляет собой независимый модуль команд рендера, содержащий всю необходимую информацию для отрисовки конкретного элемента.

Каждый Entity имеет матрицу преобразования (которая кодирует положение, поворот и масштабирование) и объект содержимого, хранящий инструкции GPU для рендера. Эти объекты содержимого очень гибкие и могут управлять множеством эффектов пользовательского интерфейса, таких как однородные цвета, изображения, градиенты и текст. Однако в настоящее время Entities ещё не могут напрямую взаимодействовать с GPU, поскольку движок должен общаться с Metal или Vulkan.

Так появился HAL (Hardware Abstraction Layer), который составляет основу архитектуры Impeller, предоставляя унифицированный интерфейс для нижележащего графического оборудования и абстрагирующий детали различных графических API. Этот слой обеспечивает многоплатформенную способность Impeller, преобразуя высокоуровневые команды рендера в низкоуровневые команды GPU и выступая в роли моста между логикой рендера Impeller и аппаратной частью графики устройства.

Как известно, самым затратным по времени процессом в движке рендера являются рендеринговая трубка и компиляция шейдеров, где рендеринговая трубка представляет собой последовательность шагов, выполняемых GPU при рендере графики, управляемых HAL. Поэтому HAL играет важную роль и с точки зрения производительности.

Для тех, кто интересуется рендеринговой трубкой, можно также ознакомиться здесь: https://juejin.cn/post/7282245376424345656

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

Обычно предварительная компиляция шейдеров приводит к увеличению времени старта приложения и размера приложения, но поскольку Impeller создан специально для Flutter, его предварительная компиляция шейдеров может использовать более простые шейдеры по сравнению со Skia, что позволяет сохранять короткое время старта приложения и общую небольшую величину приложения.Наконец, если вы используете Flutter некоторое время, то вам должно быть известно, что антиалиасинг (anti-aliasing) и вырезание (clipping) — это довольно дорогостоящие операции, которые были оптимизированы на уровне железа в Impeller.В Impeller антиалиасинг осуществляется через множественное отверстное антиалиасинг (MSAA), которое работает путём выполнения нескольких выборок каждого пикселя в различных местах внутри него. Затем среднее значение этих выборок используется для определения окончательного цвета, что позволяет гладко объединить границы объектов с фоном и уменьшить их зазубренность.

Что касается операции вырезания, Impeller использует буфер маски (stencil buffer) GPU для управления процессом вырезания. Когда Impeller рендерит UI, он сначала заставляет GPU использовать буфер маски, который служит фильтром, определяющим, какие пиксели должны быть отображены согласно маске вырезания. Оптимизация этого буфера позволяет Impeller гарантировать быстрое выполнение операции вырезания. Так что теперь вы понимаете преимущества Impeller?

Хотя переход с Skia на Impeller требует ещё некоторых деталей для оптимизации, но в 2024 году Impeller, вероятнее всего, станет основным движком Flutter для Android и iOS, а Skia, скорее всего, покинет нас в том же году. Готовы ли вы встретить эпоху Impeller?