Skia: lényeg, felépítés és szerep a Flutter grafikus motorjában

Mi az a Skia?

Skia — egy többplatformos 2D grafikus könyvtár, amelyet a Google fejlesztett és BSD licenc alatt érhető el. Egységes API-t biztosít geometriai alakzatok, szöveg, képek és árnyékok rajzolásához, elvonatkoztatva az alatta lévő grafikus backendtől. A Skia C++ nyelven íródott és optimalizálva van az eszközök széles skáláján való működésre — a mobiltelefonoktól a szerverekig.

A Skia története 2005-ben kezdődött, mint a Skia Inc. zárt könyvtára. 2007-ben a Google megvásárolta, megnyitotta a forráskódot, és elkezdte használni a termékeiben. Ma a Skia a Google Chrome (beleértve a Chrome OS-t), az Android (4.0 verziótól kezdve) és természetesen a Flutter elsődleges grafikus motorja. A könyvtárat a Google csapata támogatja és folyamatosan fejleszti: új backendek, teljesítmény-optimalizálások és modern grafikus API-k támogatása kerül hozzáadásra.

A Skia kulcsfontosságú jellemzője, hogy nem csupán primitívek rajzolására szolgáló függvénygyűjtemény. Ez egy teljes grafikus csővezeték, amely magában foglalja a görbék (útvonalak) raszterizálását, élsimítást (anti-aliasing), maszkok alkalmazását, átlátszóság feldolgozását és színkorrekciót. A Skia támogatja a PNG, JPEG, WebP és GIF képformátumokat, valamint képes szöveget megjeleníteni a HarfBuzz motoron keresztül a glifek alakításához.

Skia vs más grafikus könyvtárak

Ellentétben a Cairo-val (GTK-ban használatos) vagy a Quartz 2D-vel (macOS-ben használatos), a Skia a kezdetektől fogva több platformon, különböző grafikus API-kkal való működésre tervezték. Ez előnyt biztosít számára a Flutterhez hasonló többplatformos keretrendszerekben. Cairo a szoftveres megjelenítésre összpontosít, míg a Skia a kezdetektől támogatta a GPU-gyorsítást, ami kritikus fontosságú az interfész animációkhoz.

A Skia felépítése

A Skia felépítése többrétegű csővezetékként épül fel, ahol minden réteg egy adott szakaszért felelős a grafikus parancsok pixelekké alakításában. Ez a struktúra lehetővé teszi a felső rétegek újrafelhasználását az alatta lévő grafikus API-tól függetlenül.

A felső réteg — Canvas API — absztrakciót biztosít a fejlesztő számára a rajzoláshoz. A drawRect, drawCircle, drawPath, drawText metódusok geometriai paramétereket és stílusokat (szín, átlátszóság, transzformációk) fogadnak. A Canvas ezeket a parancsokat műveletek sorozatává alakítja, amelyek a Skia Pipeline rétegbe kerülnek továbbításra — egy belső parancsgráf, amely végrehajtás előtt optimalizálásra kerül.

A középső réteg — Surface és Device — kezeli a cél puffert, amelybe a megjelenítés történik. A Surface a méret, színtér és backend típus megadásával jön létre. A Device egy adott megjelenítő backendet valósít meg: CPU raszterizáló (Raster), OpenGL (GL), Vulkan (Vk) vagy Metal (Mt). A Device tartalmazza az egyes rajzolási műveletek optimalizált implementációit az adott backendhez.

Az alsó réteg — Ganesha (GPU backend) — hardveresen gyorsított megjelenítést valósít meg. A Ganesha a GPU-t használja útvonalak raszterizálásához, gradiensek kitöltéséhez és effektek alkalmazásához. Összegyűjti a parancsokat kötegekbe és minimalizálja a GPU állapotváltását. Minden grafikus API-hoz létezik saját Ganesha implementáció: Skia GL OpenGL-hez, Skia Vulkan Vulkan-hoz, Skia Metal Metal-hoz.

Köztes reprezentáció — SkSL

A Skia saját shader nyelvet, az SkSL-t (Skia Shading Language) használja az effektek leírásához. Az SkSL kód SPIR-V-be (köztes reprezentáció) fordul, amely aztán a backend-specifikus shader formátumba (GLSL, HLSL, MSL) kerül lefordításra. Ez egységes módszert biztosít a grafikus effektek leírására platformtól függetlenül.

Hogyan működik a Skia a Flutterben

A Flutter a Skia-t használja elsődleges megjelenítő motorként minden platformon: Android, iOS, Web, Windows, macOS és Linux. Amikor egy Flutter alkalmazás egy képkockát jelenít meg, a widgetek RenderObject fává alakulnak, amely aztán az Engine rétegbe (C++-ban) kerül továbbításra, és az Engine a Skia-t használja a végső megjelenítéshez.

A képkocka megjelenítésének folyamata több szakaszból áll. Először a Flutter Engine felépít egy műveleti listát (Display List) — a Canvas API hívások sorozatát, amely leírja, hogy mit és hogyan kell rajzolni. Ezután ez a lista továbbításra kerül a Skia-hoz, amely a műveleteket partíciókra (képernyő területekre) osztja, mélység szerint rendezi, és továbbítja a megfelelő megjelenítő backendhez. A GPU-gyorsítás automatikusan bekapcsol, ha a Skia elérhető grafikus API-t észlel.

A Skia egyik kulcsfontosságú előnye a Flutterben a Flutter Impeller Preview — a shaderek előnézetének lehetősége. A Skia a shadereket az első használat pillanatában fordítja le, ami késéseket okozhat (shader jank). A probléma megoldása érdekében a Flutter áttér az Impellerre — egy új megjelenítő motorra, de a Skia marad az elsődleges választás a Flutter stabil verzióihoz.

Layer Tree és Paint

A Flutter a Layer Tree koncepcióját használja — rétegek fáját, ahol minden réteg az UI egy részét képviseli. A Skia megkapja a rajzolási parancsokat minden réteghez, és meghatározza, hogy több réteg összevonható-e egyetlen megjelenítési menetbe. A rétegek összekeverése (layer compositing) összetett feladat, mivel minden pixelnél figyelembe kell venni az átlátszóságot és a keverési módokat (blend modes), amelyeket a Skia GPU-shadereken keresztül valósít meg.

Szöveg megjelenítése a Skia-n keresztül

A Skia a szöveget a HarfBuzz (alakítás) és icu (unicode) könyvtárakkal való integráción keresztül jeleníti meg. A Flutterben minden szöveges widget létrehoz egy Paragraph objektumot, amely a szöveget Skia parancsok sorozatává alakítja a glifek rajzolásához. A Skia támogatja a szubpixel élsimítást (subpixel anti-aliasing), a betűtípus hintinget és az emoji-kkal való munkát a SkUnicode könyvtáron keresztül.

A Skia teljesítménye

A Skia teljesítménye évekig tartó optimalizálás és több technika kombinációjának eredménye: parancsok kötegelt feldolgozása, textúrák gyorsítótárazása és a GPU kontextusváltás minimalizálása. A Flutter számára ez kritikus fontosságú, mivel minden képkockát 16 ms (60 FPS) vagy 8 ms (120 FPS) alatt kell megjeleníteni.

A Flutter Team benchmarkjai szerint a GPU-gyorsítással használt Skia középkategóriás eszközökön (Qualcomm Snapdragon 700 series) stabil 60 FPS-t biztosít összetett interfészek megjelenítésekor 30+ widgettel a képernyőn. Szoftveres megjelenítésnél (CPU) a teljesítmény 40–60%-kal csökken, de egyszerű képernyők esetén elfogadható marad.

Shader Jank — a Skia fő problémája

A Skia Flutterbeni teljesítményének fő problémája a shader jank (shader késleltetés). Amikor egy új vizuális elem ismeretlen effektkombinációval jelenik meg a képernyőn, a Skia egy új shadert fordít le menet közben. A fordítás 50–200 ms-ig tarthat, amely alatt az alkalmazás kihagyja a képkockákat. Ez különösen észrevehető egyéni dekorációkkal ellátott hosszú listák görgetésekor. A Google ezt a problémát az Impellerben oldja meg, egy új megjelenítő motorban, amely előre lefordítja a shadereket.

Skia különböző platformokon

A Skia a platformok széles skáláját támogatja, amelyek mindegyike saját megjelenítő backendet használ. A backend kiválasztása a Flutter Engine építési szakaszában történik a célplatform és az elérhető grafikus API-k alapján.

Android

Androidon a Skia OpenGL ES (minden eszközön) és Vulkan (Android 7.0+ Vulkan támogatással rendelkező eszközökön) keresztül működik. A backend kiválasztása automatikusan történik: a Vulkan előnyösebb, mivel alacsonyabb illesztőprogram késleltetést biztosít. Android a Skia-t használja a rendszer UI megjelenítéséhez is a HWUI (Hardware Accelerated UI) segítségével, ami a Skia-t az operációs rendszer részévé teszi, nem csak a Flutter-é.

iOS

iOS-en a Skia a Metal-t használja — az Apple saját grafikus API-ját. A Metal alacsony szintű hozzáférést biztosít a GPU-hoz és minimális többletterhelést. A Metal megjelenése előtt (2014) a Skia iOS-en OpenGL ES-t használt, de a Flutter jelenlegi verzióiban a Metal az egyetlen GPU backend iOS számára, ami akár 30%-os teljesítménynövekedést biztosít az OpenGL-hez képest.

Desktop (Windows, macOS, Linux)

Desktopon a Skia OpenGL-t (macOS, Linux) és Direct3D 12-t (Windows) használ. A Direct3D 12 támogatása Windows-hoz a Flutter 3.13-ban került hozzáadásra, és jelentős teljesítményjavulást biztosít az OpenGL-hez képest Windows-on. Skia támogatja a szoftveres megjelenítést is az ANGLE (OpenGL a Direct3D felett) segítségével Windows-on a régi grafikus illesztőprogramokkal való visszafelé kompatibilitás érdekében.

Web

A Flutter for Web-ben a Skia WebAssembly-be fordul (Emscripten segítségével) és WebGL-en keresztül jelenít meg. Ebben a módban a Skia teljesen a böngészőben működik, natív kód használata nélkül. A WebGL verzió teljesítménye alacsonyabb, mint a natív backendeké, de a legtöbb webalkalmazás esetében 60 FPS érhető el modern böngészőkön WebGL hardveres gyorsítással.