Skia: istota, architektura i rola w silniku graficznym Flutter

Czym jest Skia?

Skia — to wieloplatformowa biblioteka graficzna 2D opracowana przez Google i dostępna na licencji BSD. Udostępnia jednolity API do rysowania kształtów geometrycznych, tekstu, obrazów i cieni, abstrahując od leżącego poniżej backendu graficznego. Skia jest napisana w C++ i zoptymalizowana do pracy na szerokiej gamie urządzeń — od telefonów komórkowych po serwery.

Historia Skia rozpoczęła się w 2005 roku jako zamknięta biblioteka firmy Skia Inc. W 2007 roku została przejęta przez Google, która otworzyła kod źródłowy i zaczęła używać go w swoich produktach. Dziś Skia jest głównym silnikiem graficznym Google Chrome (w tym Chrome OS), Androida (od wersji 4.0) i oczywiście Flutter. Biblioteka jest wspierana przez zespół Google i stale ulepszana: dodawane są nowe backendy, optymalizacje wydajności i obsługa nowoczesnych API graficznych.

Kluczową cechą Skia jest to, że to nie tylko zestaw funkcji do rysowania prymitywów. To pełnoprawny potok graficzny obejmujący rasteryzację krzywych (ścieżek), wygładzanie (anti-aliasing), nakładanie masek, obsługę przezroczystości i korekcję kolorów. Skia obsługuje formaty obrazów PNG, JPEG, WebP i GIF, a także może renderować tekst przez silnik HarfBuzz do kształtowania glifów.

Skia vs inne biblioteki graficzne

W przeciwieństwie do Cairo (używanego w GTK) czy Quartz 2D (używanego w macOS), Skia od początku była projektowana do pracy na wielu platformach z różnymi API graficznymi. Daje jej to przewagę w wieloplatformowych frameworkach takich jak Flutter. Cairo jest ukierunkowany na programowe renderowanie, a Skia od samego początku wspierała akcelerację GPU, co jest krytyczne dla animacji interfejsu.

Architektura Skia

Architektura Skia jest zbudowana jako wielowarstwowy potok, gdzie każda warstwa odpowiada za określony etap przekształcania poleceń graficznych w piksele. Taka struktura pozwala na ponowne wykorzystanie górnych warstw niezależnie od leżącego poniżej API graficznego.

Górna warstwa — Canvas API — udostępnia programiście abstrakcję do rysowania. Metody drawRect, drawCircle, drawPath, drawText przyjmują parametry geometryczne i style (kolor, przezroczystość, transformacje). Canvas przekształca te polecenia w sekwencję operacji, które są przekazywane do warstwy Skia Pipeline — wewnętrznego grafu poleceń optymalizowanego przed wykonaniem.

Środkowa warstwa — Surface i Device — zarządza buforem docelowym, do którego odbywa się renderowanie. Surface jest tworzony z określeniem rozmiaru, przestrzeni kolorów i typu backendu. Device implementuje konkretny backend renderujący: rasteryzator CPU (Raster), OpenGL (GL), Vulkan (Vk) lub Metal (Mt). Device zawiera zoptymalizowane implementacje każdej operacji rysowania dla konkretnego backendu.

Dolna warstwa — Ganesha (backend GPU) — realizuje renderowanie z akceleracją sprzętową. Ganesha wykorzystuje GPU do rasteryzacji ścieżek, wypełniania gradientów i nakładania efektów. Zbiera polecenia w partie i minimalizuje przełączanie stanu GPU. Dla każdego API graficznego istnieje własna implementacja Ganesha: Skia GL dla OpenGL, Skia Vulkan dla Vulkan, Skia Metal dla Metal.

Reprezentacja pośrednia — SkSL

Skia używa własnego języka shaderów SkSL (Skia Shading Language) do opisywania efektów. Kod SkSL jest kompilowany do SPIR-V (reprezentacja pośrednia), który następnie jest tłumaczony na format shaderów specyficzny dla backendu (GLSL, HLSL, MSL). Zapewnia to jednolity sposób opisywania efektów graficznych niezależnie od platformy.

Jak Skia działa we Flutter

Flutter używa Skia jako głównego silnika renderującego na wszystkich platformach: Android, iOS, Web, Windows, macOS i Linux. Gdy aplikacja Flutter renderuje klatkę, widgety są przekształcane w drzewo RenderObject, które następnie jest przekazywane do warstwy Engine (w C++), a Engine używa Skia do finalnego renderowania.

Proces renderowania klatki obejmuje kilka etapów. Najpierw Flutter Engine buduje listę operacji (Display List) — sekwencję wywołań Canvas API opisującą co i jak rysować. Następnie lista ta jest przekazywana do Skia, która dzieli operacje na partycje (obszary ekranu), sortuje je według głębi i przekazuje do odpowiedniego backendu renderowania. Akceleracja GPU włącza się automatycznie, jeśli Skia wykryje dostępne API graficzne.

Jedną z kluczowych zalet Skia we Flutter jest Flutter Impeller Preview — możliwość podglądu shaderów. Skia kompiluje shadery w momencie pierwszego użycia, co może powodować opóźnienia (shader jank). Aby rozwiązać ten problem, Flutter przechodzi na Impeller — nowy silnik renderowania, ale Skia pozostaje głównym wyborem dla stabilnych wersji Flutter.

Layer Tree i Paint

Flutter używa koncepcji Layer Tree — drzewa warstw, z których każda reprezentuje część UI. Skia otrzymuje polecenia rysowania dla każdej warstwy i określa, czy można połączyć kilka warstw w jeden przebieg renderowania. Mieszanie warstw (layer compositing) to złożone zadanie, ponieważ dla każdego piksela trzeba uwzględnić przezroczystość i tryby mieszania (blend modes), które Skia implementuje przez shadery GPU.

Renderowanie tekstu przez Skia

Skia renderuje tekst poprzez integrację z bibliotekami HarfBuzz (kształtowanie) i icu (unicode). We Flutter każdy widget tekstowy tworzy obiekt Paragraph, który przekształca tekst w serię poleceń Skia do rysowania glifów. Skia obsługuje wygładzanie subpikselowe (subpixel anti-aliasing), hinting czcionek i pracę z emoji przez bibliotekę SkUnicode.

Wydajność Skia

Wydajność Skia jest wynikiem wieloletniej optymalizacji i kombinacji kilku technik: grupowania poleceń, buforowania tekstur i minimalizacji przełączania kontekstu GPU. Dla Flutter jest to krytycznie ważne, ponieważ każda klatka musi być renderowana w ciągu 16 ms (60 FPS) lub 8 ms (120 FPS).

Według benchmarków Flutter Team, użycie Skia z akceleracją GPU na urządzeniach średniej klasy (Qualcomm Snapdragon 700 series) zapewnia stabilne 60 FPS przy renderowaniu złożonych interfejsów z 30+ widgetami na ekranie. Przy programowym renderowaniu (CPU) wydajność spada o 40–60%, ale pozostaje akceptowalna dla prostych ekranów.

Shader Jank — główny problem Skia

Głównym problemem wydajności Skia we Flutter jest shader jank (opóźnienia shaderów). Gdy na ekranie pojawia się nowy element wizualny z nieznanym wcześniej połączeniem efektów, Skia kompiluje nowy shader na bieżąco. Kompilacja może zająć 50–200 ms, podczas których aplikacja pomija klatki. Jest to szczególnie zauważalne przy przewijaniu długich list z niestandardowymi dekoracjami. Google rozwiązuje ten problem w Impeller, nowym silniku renderowania, który kompiluje shadery z wyprzedzeniem.

Skia na różnych platformach

Skia obsługuje szeroki zakres platform, z których każda używa własnego backendu renderującego. Wybór backendu jest określany na etapie budowania Flutter Engine na podstawie platformy docelowej i dostępnych API graficznych.

Android

Na Androidzie Skia działa przez OpenGL ES (na wszystkich urządzeniach) i Vulkan (na urządzeniach z Androidem 7.0+ z obsługą Vulkan). Wybór backendu odbywa się automatycznie: Vulkan jest preferowany, ponieważ zapewnia mniejsze opóźnienie sterownika. Android używa również Skia do renderowania systemowego UI przez HWUI (Hardware Accelerated UI), co czyni Skia częścią systemu operacyjnego, a nie tylko Flutter.

iOS

Na iOS Skia używa Metal — autorskiego API graficznego Apple. Metal zapewnia niskopoziomowy dostęp do GPU i minimalne narzuty. Przed pojawieniem się Metal (2014) Skia na iOS używała OpenGL ES, ale w obecnych wersjach Flutter Metal jest jedynym backendem GPU dla iOS, co daje wzrost wydajności do 30% w porównaniu z OpenGL.

Desktop (Windows, macOS, Linux)

Na desktopie Skia używa OpenGL (macOS, Linux) i Direct3D 12 (Windows). Dla Windows obsługa Direct3D 12 została dodana we Flutter 3.13 i daje znaczną poprawę wydajności w porównaniu z OpenGL na Windows. Skia obsługuje również programowe renderowanie przez ANGLE (OpenGL na Direct3D) na Windows dla wstecznej kompatybilności ze starymi sterownikami graficznymi.

Web

We Flutter for Web Skia jest kompilowana do WebAssembly (przez Emscripten) i renderuje przez WebGL. W tym trybie Skia działa całkowicie w przeglądarce, nie używając natywnego kodu. Wydajność wersji WebGL Skia jest niższa niż natywnych backendów, ale dla większości aplikacji webowych 60 FPS jest osiągalne na nowoczesnych przeglądarkach z akceleracją sprzętową WebGL.