Skia: суть, архітектура та роль у графічному рушії Flutter

Що таке Skia?

Skia — це крос-платформна 2D-графічна бібліотека, розроблена Google і доступна під ліцензією BSD. Вона надає єдиний API для малювання геометричних фігур, тексту, зображень і тіней, абстрагуючись від графічного бекенду. Skia написана на C++ і оптимізована для роботи на широкому спектрі пристроїв — від мобільних телефонів до серверів.

Історія Skia почалася в 2005 році як закрита бібліотека компанії Skia Inc. У 2007 році її придбала Google, відкрила вихідний код і почала використовувати у своїх продуктах. Сьогодні Skia є основним графічним рушієм Google Chrome (включаючи Chrome OS), Android (починаючи з версії 4.0) і, звісно, Flutter. Бібліотека підтримується командою Google і постійно вдосконалюється: додаються нові бекенди, оптимізації продуктивності та підтримка сучасних графічних API.

Ключова особливість Skia — це не просто набір функцій для малювання примітивів. Це повноцінний графічний конвеєр, що включає растеризацію кривих (шляхів), згладжування (anti-aliasing), накладання масок, обробку прозорості та кольорокорекцію. Skia підтримує формати зображень PNG, JPEG, WebP та GIF, а також може рендерити текст через рушій HarfBuzz для шейпінгу гліфів.

Skia vs інші графічні бібліотеки

На відміну від Cairo (використовується в GTK) або Quartz 2D (використовується в macOS), Skia спочатку проєктувалася для роботи на кількох платформах з різними графічними API. Це дає їй перевагу в крос-платформних фреймворках, таких як Flutter. Cairo орієнтований на програмний рендеринг, а Skia з самого початку підтримувала GPU-прискорення, що критично для анімацій інтерфейсу.

Архітектура Skia

Архітектура Skia побудована як багатошаровий конвеєр, кожен рівень якого відповідає за певний етап перетворення графічних команд у пікселі. Така структура дозволяє перевикористовувати верхні рівні незалежно від графічного API.

Верхній рівень — Canvas API — надає розробнику абстракцію для малювання. Методи drawRect, drawCircle, drawPath, drawText приймають геометричні параметри та стилі (колір, прозорість, трансформації). Canvas перетворює ці команди в послідовність операцій, які передаються на рівень Skia Pipeline — внутрішній граф команд, що оптимізується перед виконанням.

Середній рівень — Surface і Device — керує цільовим буфером, у який відбувається рендеринг. Surface створюється із зазначенням розміру, колірного простору та типу бекенду. Device реалізує конкретний рендеринговий бекенд: CPU-растеризатор (Raster), OpenGL (GL), Vulkan (Vk) або Metal (Mt). Device містить оптимізовані реалізації кожної операції малювання для конкретного бекенду.

Нижній рівень — Ganesha (GPU-бекенд) — реалізує апаратно-прискорений рендеринг. Ganesha використовує GPU для растеризації шляхів, заливки градієнтів і накладання ефектів. Він збирає команди в батчі та мінімізує перемикання стану GPU. Для кожного графічного API існує своя реалізація Ganesha: Skia GL для OpenGL, Skia Vulkan для Vulkan, Skia Metal для Metal.

Проміжне представлення — SkSL

Skia використовує власну мову шейдерів SkSL (Skia Shading Language) для опису ефектів. Код SkSL компілюється в SPIR-V (проміжне представлення), який потім транслюється в специфічний для бекенду формат шейдерів (GLSL, HLSL, MSL). Це забезпечує єдиний спосіб опису графічних ефектів незалежно від платформи.

Як Skia працює у Flutter

Flutter використовує Skia як основний рендеринговий рушій на всіх платформах: Android, iOS, Web, Windows, macOS і Linux. Коли Flutter-застосунок рендерить кадр, віджети перетворюються в дерево RenderObject, яке потім передається шару Engine (на C++), і саме Engine використовує Skia для фінального рендерингу.

Процес рендерингу кадру включає кілька етапів. Спочатку Flutter Engine будує список операцій (Display List) — послідовність викликів Canvas API, що описують що і як малювати. Потім цей список передається в Skia, яка розбиває операції на партиції (області екрану), сортує їх за глибиною та передає у відповідний бекенд рендерингу. GPU-прискорення вмикається автоматично, якщо Skia виявляє доступний графічний API.

Однією з ключових переваг Skia у Flutter є Flutter Impeller Preview — можливість попереднього перегляду шейдерів. Skia компілює шейдери в момент першого використання, що може викликати затримки (shader jank). Для вирішення цієї проблеми Flutter переходить на Impeller — новий рушій рендерингу, але Skia залишається основним вибором для стабільних версій Flutter.

Layer Tree і Paint

Flutter використовує концепцію Layer Tree — дерева шарів, кожен з яких представляє частину UI. Skia отримує команди малювання для кожного шару та визначає, чи можна об'єднати кілька шарів в один прохід рендерингу. Змішування шарів (layer compositing) — складне завдання, оскільки для кожного пікселя потрібно враховувати прозорість і режими накладання (blend modes), які Skia реалізує через GPU-шейдери.

Рендеринг тексту через Skia

Skia рендерить текст через інтеграцію з бібліотеками HarfBuzz (шейпінг) та ICU (юнікод). У Flutter кожен текстовий віджет створює об'єкт Paragraph, який перетворює текст у серію команд Skia для малювання гліфів. Skia підтримує субпіксельне згладжування (subpixel anti-aliasing), хінтинг шрифтів та роботу з емодзі через бібліотеку SkUnicode.

Продуктивність Skia

Продуктивність Skia є результатом багаторічної оптимізації та комбінації кількох технік: батчингу команд, кешування текстур та мінімізації перемикання контексту GPU. Для Flutter це критично важливо, оскільки кожен кадр має бути відрендерений за 16 мс (60 FPS) або 8 мс (120 FPS).

За даними бенчмарків Flutter Team, використання Skia з GPU-прискоренням на пристроях середнього класу (Qualcomm Snapdragon 700 series) забезпечує стабільні 60 FPS при рендерингу складних інтерфейсів з 30+ віджетами на екрані. При програмному рендерингу (CPU) продуктивність падає на 40–60%, але залишається прийнятною для простих екранів.

Shader Jank — головна проблема Skia

Основна проблема продуктивності Skia у Flutter — це shader jank (шейдерні лаги). Коли на екрані з'являється новий візуальний елемент з невідомим раніше поєднанням ефектів, Skia компілює новий шейдер на льоту. Компіляція може зайняти 50–200 мс, протягом яких застосунок пропускає кадри. Це особливо помітно при скролі довгих списків з кастомними декораціями. Google вирішує цю проблему в Impeller, новому рушії рендерингу, який компілює шейдери заздалегідь.

Skia на різних платформах

Skia підтримує широкий спектр платформ, кожна з яких використовує свій рендеринговий бекенд. Вибір бекенду визначається на етапі збірки Flutter Engine на основі цільової платформи та доступних графічних API.

Android

На Android Skia працює через OpenGL ES (на всіх пристроях) і Vulkan (на пристроях Android 7.0+ з підтримкою Vulkan). Вибір бекенду відбувається автоматично: Vulkan є більш бажаним, оскільки дає нижчу затримку драйвера. Android також використовує Skia для рендерингу системного UI через HWUI (Hardware Accelerated UI), що робить Skia частиною операційної системи, а не тільки Flutter.

iOS

На iOS Skia використовує Metal — пропрієтарний графічний API Apple. Metal забезпечує низькорівневий доступ до GPU та мінімальні накладні витрати. До появи Metal (2014) Skia на iOS використовувала OpenGL ES, але в поточних версіях Flutter Metal є єдиним GPU-бекендом для iOS, що дає приріст продуктивності до 30% порівняно з OpenGL.

Десктоп (Windows, macOS, Linux)

На десктопі Skia використовує OpenGL (macOS, Linux) і Direct3D 12 (Windows). Для Windows підтримка Direct3D 12 була додана у Flutter 3.13 і дає значне покращення продуктивності порівняно з OpenGL на Windows. Skia також підтримує програмний рендеринг через ANGLE (OpenGL поверх Direct3D) на Windows для зворотної сумісності зі старими графічними драйверами.

Web

У Flutter for Web Skia компілюється у WebAssembly (via Emscripten) і рендерить через WebGL. У цьому режимі Skia працює повністю в браузері, не використовуючи нативний код. Продуктивність WebGL-версії Skia нижча, ніж нативних бекендів, але для більшості веб-застосунків 60 FPS досягаються на сучасних браузерах з апаратним прискоренням WebGL.