Skia: essentie, architectuur en rol in de grafische motor van Flutter

Wat is Skia?

Skia — is een cross-platform 2D-grafische bibliotheek ontwikkeld door Google en beschikbaar onder de BSD-licentie. Het biedt een uniforme API voor het tekenen van geometrische vormen, tekst, afbeeldingen en schaduwen, waarbij het abstraheert van de onderliggende grafische backend. Skia is geschreven in C++ en geoptimaliseerd voor een breed scala aan apparaten — van mobiele telefoons tot servers.

De geschiedenis van Skia begon in 2005 als een gesloten bibliotheek van het bedrijf Skia Inc. In 2007 werd het overgenomen door Google, dat de broncode opende en het in zijn producten begon te gebruiken. Vandaag is Skia de primaire grafische motor van Google Chrome (inclusief Chrome OS), Android (vanaf versie 4.0) en natuurlijk Flutter. De bibliotheek wordt ondersteund door het Google-team en wordt voortdurend verbeterd: er worden nieuwe backends, prestatie-optimalisaties en ondersteuning voor moderne grafische API's toegevoegd.

Het belangrijkste kenmerk van Skia is dat het niet slechts een verzameling functies is voor het tekenen van primitieven. Het is een volledige grafische pijplijn die rasterisatie van curven (paden), anti-aliasing, maskering, transparantieverwerking en kleurcorrectie omvat. Skia ondersteunt de beeldformaten PNG, JPEG, WebP en GIF en kan tekst weergeven via de HarfBuzz-motor voor glyph-vormgeving.

Skia vs andere grafische bibliotheken

In tegenstelling tot Cairo (gebruikt in GTK) of Quartz 2D (gebruikt in macOS), is Skia vanaf het begin ontworpen om op meerdere platforms met verschillende grafische API's te werken. Dit geeft het een voordeel in cross-platform frameworks zoals Flutter. Cairo is gericht op softwareweergave, terwijl Skia vanaf het begin GPU-versnelling ondersteunde, wat cruciaal is voor interface-animaties.

Architectuur van Skia

De architectuur van Skia is opgebouwd als een gelaagde pijplijn, waarbij elke laag verantwoordelijk is voor een specifieke fase van het omzetten van grafische opdrachten naar pixels. Deze structuur maakt hergebruik van de bovenste lagen mogelijk, onafhankelijk van de onderliggende grafische API.

De bovenste laag — Canvas API — biedt de ontwikkelaar een abstractie voor het tekenen. De methoden drawRect, drawCircle, drawPath, drawText accepteren geometrische parameters en stijlen (kleur, transparantie, transformaties). Canvas zet deze opdrachten om in een reeks bewerkingen die worden doorgegeven aan de Skia Pipeline — een interne opdrachtengraaf die vóór uitvoering wordt geoptimaliseerd.

De middelste laag — Surface en Device — beheert de doelbuffer waarin de weergave plaatsvindt. Surface wordt aangemaakt met specificatie van grootte, kleurruimte en backendtype. Device implementeert een specifieke weergave-backend: CPU-rasterizer (Raster), OpenGL (GL), Vulkan (Vk) of Metal (Mt). Device bevat geoptimaliseerde implementaties van elke tekenbewerking voor de specifieke backend.

De onderste laag — Ganesha (GPU-backend) — implementeert hardwareversnelde weergave. Ganesha gebruikt de GPU voor rasterisatie van paden, het vullen van verloopkleuren en het toepassen van effecten. Het verzamelt opdrachten in batches en minimaliseert het schakelen van GPU-status. Voor elke grafische API bestaat er een eigen Ganesha-implementatie: Skia GL voor OpenGL, Skia Vulkan voor Vulkan, Skia Metal voor Metal.

Tussenvertegenwoordiging — SkSL

Skia gebruikt zijn eigen shader-taal SkSL (Skia Shading Language) voor het beschrijven van effecten. SkSL-code wordt gecompileerd naar SPIR-V (tussenvertegenwoordiging), die vervolgens wordt vertaald naar het voor de backend specifieke shader-formaat (GLSL, HLSL, MSL). Dit zorgt voor een uniforme manier om grafische effecten te beschrijven, onafhankelijk van het platform.

Hoe Skia werkt in Flutter

Flutter gebruikt Skia als primaire weergavemotor op alle platforms: Android, iOS, Web, Windows, macOS en Linux. Wanneer een Flutter-app een frame weergeeft, worden widgets omgezet in een RenderObject-boom, die vervolgens wordt doorgegeven aan de Engine-laag (in C++), en Engine gebruikt Skia voor de uiteindelijke weergave.

Het weergaveproces van een frame omvat verschillende fasen. Eerst bouwt Flutter Engine een bewerkingslijst (Display List) — een reeks Canvas API-aanroepen die beschrijven wat en hoe getekend moet worden. Vervolgens wordt deze lijst doorgegeven aan Skia, die de bewerkingen in partities (schermgebieden) verdeelt, ze sorteert op diepte en doorgeeft aan de juiste weergave-backend. GPU-versnelling wordt automatisch ingeschakeld als Skia een beschikbare grafische API detecteert.

Een van de belangrijkste voordelen van Skia in Flutter is Flutter Impeller Preview — de mogelijkheid om shaders te bekijken. Skia compileert shaders op het moment van eerste gebruik, wat vertragingen kan veroorzaken (shader jank). Om dit probleem op te lossen, stapt Flutter over op Impeller — een nieuwe weergavemotor, maar Skia blijft de primaire keuze voor stabiele versies van Flutter.

Layer Tree en Paint

Flutter gebruikt het concept van Layer Tree — een boom van lagen, die elk een deel van de UI vertegenwoordigen. Skia ontvangt tekenopdrachten voor elke laag en bepaalt of meerdere lagen kunnen worden gecombineerd in één weergavepassage. Laagcompositie (layer compositing) is een complexe taak, omdat voor elke pixel rekening moet worden gehouden met transparantie en overvloeimodi (blend modes), die Skia implementeert via GPU-shaders.

Tekstweergave via Skia

Skia geeft tekst weer via integratie met de bibliotheken HarfBuzz (vormgeving) en icu (unicode). In Flutter maakt elk tekstwidget een Paragraph-object aan dat de tekst omzet in een reeks Skia-opdrachten voor het tekenen van glyphs. Skia ondersteunt subpixel-anti-aliasing, font-hinting en het werken met emoji via de SkUnicode-bibliotheek.

Prestaties van Skia

De prestaties van Skia zijn het resultaat van jarenlange optimalisatie en een combinatie van verschillende technieken: het bundelen van opdrachten, het cachen van texturen en het minimaliseren van GPU-contextwisselingen. Voor Flutter is dit van cruciaal belang, omdat elk frame binnen 16 ms (60 FPS) of 8 ms (120 FPS) moet worden weergegeven.

Volgens benchmarks van het Flutter Team zorgt het gebruik van Skia met GPU-versnelling op middenklasse apparaten (Qualcomm Snapdragon 700 series) voor stabiele 60 FPS bij het weergeven van complexe interfaces met 30+ widgets op het scherm. Bij softwareweergave (CPU) dalen de prestaties met 40–60%, maar blijven acceptabel voor eenvoudige schermen.

Shader Jank — het belangrijkste probleem van Skia

Het belangrijkste prestatieprobleem van Skia in Flutter is shader jank (shader-vertragingen). Wanneer er een nieuw visueel element met een onbekende combinatie van effecten op het scherm verschijnt, compileert Skia een nieuwe shader ter plekke. Compilatie kan 50–200 ms duren, gedurende welke de applicatie frames overslaat. Dit is vooral merkbaar bij het scrollen van lange lijsten met aangepaste decoraties. Google lost dit probleem op in Impeller, een nieuwe weergavemotor die shaders vooraf compileert.

Skia op verschillende platforms

Skia ondersteunt een breed scala aan platforms, die elk hun eigen weergave-backend gebruiken. De keuze van de backend wordt bepaald tijdens het bouwen van Flutter Engine op basis van het doelplatform en de beschikbare grafische API's.

Android

Op Android werkt Skia via OpenGL ES (op alle apparaten) en Vulkan (op apparaten met Android 7.0+ en Vulkan-ondersteuning). De backend-keuze vindt automatisch plaats: Vulkan heeft de voorkeur omdat het een lagere driverlatentie biedt. Android gebruikt Skia ook voor de weergave van de systeem-UI via HWUI (Hardware Accelerated UI), waardoor Skia deel uitmaakt van het besturingssysteem, niet alleen van Flutter.

iOS

Op iOS gebruikt Skia Metal — de eigen grafische API van Apple. Metal biedt toegang op laag niveau tot de GPU en minimale overhead. Vóór de komst van Metal (2014) gebruikte Skia op iOS OpenGL ES, maar in de huidige versies van Flutter is Metal de enige GPU-backend voor iOS, wat een prestatieverbetering tot 30% oplevert in vergelijking met OpenGL.

Desktop (Windows, macOS, Linux)

Op de desktop gebruikt Skia OpenGL (macOS, Linux) en Direct3D 12 (Windows). Ondersteuning voor Direct3D 12 voor Windows werd toegevoegd in Flutter 3.13 en biedt een aanzienlijke prestatieverbetering in vergelijking met OpenGL op Windows. Skia ondersteunt ook softwareweergave via ANGLE (OpenGL bovenop Direct3D) op Windows voor achterwaartse compatibiliteit met oude grafische stuurprogramma's.

Web

In Flutter for Web wordt Skia gecompileerd naar WebAssembly (via Emscripten) en weergegeven via WebGL. In deze modus werkt Skia volledig in de browser, zonder gebruik van native code. De prestaties van de WebGL-versie van Skia zijn lager dan die van native backends, maar voor de meeste webapplicaties wordt 60 FPS bereikt op moderne browsers met hardwareversnelling voor WebGL.