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 срещу други графични библиотеки

За разлика от 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 ms (60 FPS) или 8 ms (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 ms, през които приложението пропуска кадри. Това е особено забележимо при скролване на дълги списъци с персонализирани декорации. 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.

Desktop (Windows, macOS, Linux)

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

Web

Във Flutter for Web Skia се компилира до WebAssembly (чрез Emscripten) и рендира чрез WebGL. В този режим Skia работи изцяло в браузъра, без да използва native код. Производителността на WebGL версията на Skia е по-ниска от native бекендите, но за повечето уеб приложения 60 FPS се постигат на съвременни браузъри с хардуерно ускорение на WebGL.