Skia: podstata, architektura a role v grafickém enginu Flutter

Co je Skia?

Skia — je multiplatformní 2D grafická knihovna vyvinutá společností Google a dostupná pod licencí BSD. Poskytuje jednotné API pro kreslení geometrických tvarů, textu, obrázků a stínů, přičemž abstrahuje od základního grafického backendu. Skia je napsána v C++ a optimalizována pro práci na široké škále zařízení — od mobilních telefonů po servery.

Historie Skia začala v roce 2005 jako uzavřená knihovna společnosti Skia Inc. V roce 2007 ji koupila společnost Google, otevřela zdrojový kód a začala ho používat ve svých produktech. Dnes je Skia hlavním grafickým enginem Google Chrome (včetně Chrome OS), Androidu (od verze 4.0) a samozřejmě Flutter. Knihovna je podporována týmem Google a neustále se zlepšuje: přidávají se nové backendy, optimalizace výkonu a podpora moderních grafických API.

Klíčovou vlastností Skia je, že není jen sadou funkcí pro kreslení primitiv. Je to plnohodnotný grafický pipeline zahrnující rasterizaci křivek (cest), vyhlazování (anti-aliasing), aplikaci masek, zpracování průhlednosti a korekci barev. Skia podporuje formáty obrázků PNG, JPEG, WebP a GIF a také umí vykreslovat text přes engine HarfBuzz pro tvarování glyfů.

Skia vs ostatní grafické knihovny

Na rozdíl od Cairo (používaného v GTK) nebo Quartz 2D (používaného v macOS) byla Skia od začátku navržena pro práci na více platformách s různými grafickými API. To jí dává výhodu v multiplatformních frameworkch jako je Flutter. Cairo je zaměřeno na softwarové vykreslování, zatímco Skia od začátku podporovala akceleraci GPU, což je kritické pro animace rozhraní.

Architektura Skia

Architektura Skia je postavena jako vícevrstvý pipeline, kde každá vrstva odpovídá za určitou fázi převodu grafických příkazů na pixely. Tato struktura umožňuje opětovné použití horních vrstev nezávisle na základním grafickém API.

Horní vrstva — Canvas API — poskytuje vývojáři abstrakci pro kreslení. Metody drawRect, drawCircle, drawPath, drawText přijímají geometrické parametry a styly (barva, průhlednost, transformace). Canvas převádí tyto příkazy na sekvenci operací, které jsou předány vrstvě Skia Pipeline — internímu grafu příkazů optimalizovanému před provedením.

Střední vrstva — Surface a Device — spravuje cílový buffer, do kterého se vykresluje. Surface se vytváří s uvedením velikosti, barevného prostoru a typu backendu. Device implementuje konkrétní vykreslovací backend: CPU rasterizér (Raster), OpenGL (GL), Vulkan (Vk) nebo Metal (Mt). Device obsahuje optimalizované implementace každé operace kreslení pro konkrétní backend.

Spodní vrstva — Ganesha (GPU backend) — implementuje hardwarově akcelerované vykreslování. Ganesha používá GPU pro rasterizaci cest, vyplňování gradientů a aplikaci efektů. Shromažďuje příkazy do dávek a minimalizuje přepínání stavu GPU. Pro každé grafické API existuje vlastní implementace Ganesha: Skia GL pro OpenGL, Skia Vulkan pro Vulkan, Skia Metal pro Metal.

Mezilehlá reprezentace — SkSL

Skia používá vlastní jazyk shaderů SkSL (Skia Shading Language) pro popis efektů. Kód SkSL je kompilován do SPIR-V (mezilehlá reprezentace), který je poté přeložen do formátu shaderů specifického pro backend (GLSL, HLSL, MSL). To zajišťuje jednotný způsob popisu grafických efektů nezávisle na platformě.

Jak Skia funguje ve Flutter

Flutter používá Skia jako hlavní vykreslovací engine na všech platformách: Android, iOS, Web, Windows, macOS a Linux. Když aplikace Flutter vykresluje snímek, widgety jsou převedeny do stromu RenderObject, který je poté předán vrstvě Engine (v C++), a Engine používá Skia pro finální vykreslení.

Proces vykreslování snímku zahrnuje několik fází. Nejprve Flutter Engine sestaví seznam operací (Display List) — sekvenci volání Canvas API popisujících co a jak kreslit. Poté je tento seznam předán Skia, která rozdělí operace na partice (oblasti obrazovky), seřadí je podle hloubky a předá odpovídajícímu vykreslovacímu backendu. Akcelerace GPU se automaticky zapne, pokud Skia detekuje dostupné grafické API.

Jednou z klíčových výhod Skia ve Flutter je Flutter Impeller Preview — možnost náhledu shaderů. Skia kompiluje shadery v okamžiku prvního použití, což může způsobovat zpoždění (shader jank). Pro vyřešení tohoto problému Flutter přechází na Impeller — nový vykreslovací engine, ale Skia zůstává hlavní volbou pro stabilní verze Flutter.

Layer Tree a Paint

Flutter používá koncept Layer Tree — stromu vrstev, z nichž každá představuje část UI. Skia dostává příkazy k kreslení pro každou vrstvu a určuje, zda lze několik vrstev spojit do jednoho vykreslovacího průchodu. Míchání vrstev (layer compositing) je složitý úkol, protože pro každý pixel je třeba zohlednit průhlednost a režimy míchání (blend modes), které Skia implementuje přes GPU shadery.

Vykreslování textu přes Skia

Skia vykresluje text prostřednictvím integrace s knihovnami HarfBuzz (tvarování) a icu (unicode). Ve Flutter každý textový widget vytváří objekt Paragraph, který převádí text na sérii příkazů Skia pro kreslení glyfů. Skia podporuje subpixelové vyhlazování (subpixel anti-aliasing), hintování písma a práci s emoji přes knihovnu SkUnicode.

Výkon Skia

Výkon Skia je výsledkem letité optimalizace a kombinace několika technik: dávkování příkazů, cache textur a minimalizace přepínání kontextu GPU. Pro Flutter je to kriticky důležité, protože každý snímek musí být vykreslen za 16 ms (60 FPS) nebo 8 ms (120 FPS).

Podle benchmarků Flutter Team zajišťuje použití Skia s akcelerací GPU na zařízeních střední třídy (Qualcomm Snapdragon 700 series) stabilních 60 FPS při vykreslování složitých rozhraní s 30+ widgety na obrazovce. Při softwarovém vykreslování (CPU) výkon klesá o 40–60 %, ale zůstává přijatelný pro jednoduché obrazovky.

Shader Jank — hlavní problém Skia

Hlavním problémem výkonu Skia ve Flutter je shader jank (zpoždění shaderů). Když se na obrazovce objeví nový vizuální prvek s neznámou kombinací efektů, Skia kompiluje nový shader za běhu. Kompilace může trvat 50–200 ms, během kterých aplikace přeskakuje snímky. To je zvláště patrné při posouvání dlouhých seznamů s vlastními dekoracemi. Google tento problém řeší v Impeller, novém vykreslovacím enginu, který kompiluje shadery předem.

Skia na různých platformách

Skia podporuje širokou škálu platforem, z nichž každá používá svůj vlastní vykreslovací backend. Výběr backendu je určen ve fázi sestavení Flutter Engine na základě cílové platformy a dostupných grafických API.

Android

Na Androidu Skia funguje přes OpenGL ES (na všech zařízeních) a Vulkan (na zařízeních s Androidem 7.0+ s podporou Vulkan). Výběr backendu probíhá automaticky: Vulkan je preferován, protože poskytuje nižší latenci ovladače. Android také používá Skia pro vykreslování systémového UI přes HWUI (Hardware Accelerated UI), čímž se Skia stává součástí operačního systému, nejen Flutter.

iOS

Na iOS Skia používá Metal — proprietární grafické API společnosti Apple. Metal poskytuje nízkoúrovňový přístup k GPU a minimální režii. Před příchodem Metal (2014) Skia na iOS používala OpenGL ES, ale v současných verzích Flutter je Metal jediným GPU backendem pro iOS, což poskytuje nárůst výkonu až o 30 % ve srovnání s OpenGL.

Desktop (Windows, macOS, Linux)

Na desktopu Skia používá OpenGL (macOS, Linux) a Direct3D 12 (Windows). Podpora Direct3D 12 pro Windows byla přidána ve Flutter 3.13 a přináší významné zlepšení výkonu ve srovnání s OpenGL na Windows. Skia také podporuje softwarové vykreslování přes ANGLE (OpenGL nad Direct3D) na Windows pro zpětnou kompatibilitu se starými grafickými ovladači.

Web

Ve Flutter for Web je Skia kompilována do WebAssembly (přes Emscripten) a vykresluje přes WebGL. V tomto režimu Skia pracuje zcela v prohlížeči, bez použití nativního kódu. Výkon verze WebGL je nižší než nativních backendů, ale pro většinu webových aplikací je 60 FPS dosažitelných na moderních prohlížečích s hardwarovou akcelerací WebGL.