Skia: Wesen, Architektur und Rolle in der Flutter-Grafikengine

Was ist Skia?

Skia ist eine plattformübergreifende 2D-Grafikbibliothek, die von Google entwickelt wurde und unter der BSD-Lizenz verfügbar ist. Sie bietet eine einheitliche API zum Zeichnen von geometrischen Formen, Text, Bildern und Schatten und abstrahiert vom darunterliegenden Grafik-Backend. Skia ist in C++ geschrieben und für den Einsatz auf einer breiten Palette von Geräten optimiert – von Mobiltelefonen bis hin zu Servern.

Die Geschichte von Skia begann 2005 als proprietäre Bibliothek der Firma Skia Inc. 2007 wurde sie von Google übernommen, der Quellcode geöffnet und in den eigenen Produkten eingesetzt. Heute ist Skia die primäre Grafik-Engine von Google Chrome (einschließlich Chrome OS), Android (ab Version 4.0) und natürlich Flutter. Die Bibliothek wird vom Google-Team gewartet und ständig verbessert: Neue Backends, Leistungsoptimierungen und Unterstützung für moderne Grafik-APIs werden hinzugefügt.

Das Hauptmerkmal von Skia ist, dass es nicht nur eine Sammlung von Funktionen zum Zeichnen von Primitiven ist. Es ist eine vollständige Grafik-Pipeline, die Kurvenrasterung (Pfade), Anti-Aliasing, Maskenüberlagerung, Transparenzverarbeitung und Farbkorrektur umfasst. Skia unterstützt die Bildformate PNG, JPEG, WebP und GIF und kann Text über die HarfBuzz-Engine zur Glyphenformung rendern.

Skia vs. andere Grafikbibliotheken

Im Gegensatz zu Cairo (verwendet in GTK) oder Quartz 2D (verwendet in macOS) wurde Skia von Grund auf für mehrere Plattformen mit unterschiedlichen Grafik-APIs konzipiert. Dies verschafft ihr einen Vorteil in plattformübergreifenden Frameworks wie Flutter. Cairo ist auf Software-Rendering ausgerichtet, während Skia von Anfang an GPU-Beschleunigung unterstützte, was für UI-Animationen kritisch ist.

Skia-Architektur

Die Skia-Architektur ist als mehrschichtige Pipeline aufgebaut, wobei jede Schicht für eine bestimmte Phase der Umwandlung von Grafikbefehlen in Pixel verantwortlich ist. Diese Struktur ermöglicht die Wiederverwendung der oberen Schichten unabhängig von der darunterliegenden Grafik-API.

Die oberste Schicht – Canvas API – bietet dem Entwickler eine Abstraktion zum Zeichnen. Die Methoden drawRect, drawCircle, drawPath, drawText nehmen geometrische Parameter und Stile (Farbe, Transparenz, Transformationen) entgegen. Canvas wandelt diese Befehle in eine Sequenz von Operationen um, die an die Skia-Pipeline übergeben werden – einen internen Befehlsgraphen, der vor der Ausführung optimiert wird.

Die mittlere Schicht – Surface und Device – verwaltet den Zielpuffer, in den gerendert wird. Surface wird mit der angegebenen Größe, dem Farbraum und dem Backend-Typ erstellt. Device implementiert ein bestimmtes Rendering-Backend: CPU-Rasterizer (Raster), OpenGL (GL), Vulkan (Vk) oder Metal (Mt). Device enthält optimierte Implementierungen jeder Zeichenoperation für ein bestimmtes Backend.

Die unterste Schicht – Ganesha (GPU-Backend) – implementiert hardwarebeschleunigtes Rendering. Ganesha verwendet die GPU zur Pfadrasterung, Verlaufsfüllungen und Effektüberlagerungen. Es sammelt Befehle in Batches und minimiert den GPU-Zustandswechsel. Jede Grafik-API hat ihre eigene Ganesha-Implementierung: Skia GL für OpenGL, Skia Vulkan für Vulkan, Skia Metal für Metal.

Zwischendarstellung – SkSL

Skia verwendet eine eigene Shader-Sprache SkSL (Skia Shading Language) zur Beschreibung von Effekten. SkSL-Code wird in SPIR-V (Zwischendarstellung) kompiliert, das dann in ein backend-spezifisches Shader-Format (GLSL, HLSL, MSL) übersetzt wird. Dies bietet eine einheitliche Möglichkeit zur Beschreibung von Grafikeffekten unabhängig von der Plattform.

Wie Skia in Flutter arbeitet

Flutter verwendet Skia als primäre Rendering-Engine auf allen Plattformen: Android, iOS, Web, Windows, macOS und Linux. Wenn eine Flutter-Anwendung einen Frame rendert, werden Widgets in einen RenderObject-Baum umgewandelt, der dann an die Engine-Ebene (in C++) übergeben wird, und die Engine verwendet Skia für das finale Rendering.

Der Frame-Rendering-Prozess umfasst mehrere Phasen. Zunächst erstellt die Flutter Engine eine Display List – eine Sequenz von Canvas-API-Aufrufen, die beschreiben, was und wie gezeichnet wird. Diese Liste wird dann an Skia übergeben, das die Operationen in Partitionen (Bildschirmbereiche) aufteilt, nach Tiefe sortiert und an das entsprechende Rendering-Backend weiterleitet. Die GPU-Beschleunigung wird automatisch aktiviert, wenn Skia eine verfügbare Grafik-API erkennt.

Einer der Hauptvorteile von Skia in Flutter ist die Flutter Impeller Preview – die Möglichkeit, Shader vorab zu betrachten. Skia kompiliert Shader beim ersten Gebrauch, was Verzögerungen (Shader Jank) verursachen kann. Um dieses Problem zu lösen, migriert Flutter zu Impeller – einer neuen Rendering-Engine, aber Skia bleibt die erste Wahl für stabile Flutter-Versionen.

Layer Tree und Paint

Flutter verwendet das Konzept eines Layer Tree – eines Baums von Ebenen, von denen jede einen Teil der UI repräsentiert. Skia erhält Zeichenbefehle für jede Ebene und bestimmt, ob mehrere Ebenen in einem einzigen Rendering-Durchgang zusammengefasst werden können. Layer-Compositing ist eine komplexe Aufgabe, da für jedes Pixel Transparenz und Mischmodi (Blend Modes) berücksichtigt werden müssen, die Skia über GPU-Shader implementiert.

Text-Rendering über Skia

Skia rendert Text durch Integration mit den Bibliotheken HarfBuzz (Shape) und ICU (Unicode). In Flutter erstellt jedes Text-Widget ein Paragraph-Objekt, das Text in eine Serie von Skia-Befehlen zum Zeichnen von Glyphen umwandelt. Skia unterstützt Subpixel-Antialiasing, Font-Hinting und die Arbeit mit Emojis über die SkUnicode-Bibliothek.

Skia-Leistung

Die Leistung von Skia ist das Ergebnis jahrelanger Optimierung und der Kombination mehrerer Techniken: Batching von Befehlen, Texture-Caching und Minimierung des GPU-Kontextwechsels. Dies ist für Flutter von entscheidender Bedeutung, da jeder Frame in 16 ms (60 FPS) oder 8 ms (120 FPS) gerendert werden muss.

Laut Benchmarks des Flutter-Teams liefert die Verwendung von Skia mit GPU-Beschleunigung auf Geräten der Mittelklasse (Qualcomm Snapdragon 700 series) stabile 60 FPS beim Rendern komplexer Oberflächen mit über 30 Widgets auf dem Bildschirm. Bei Software-Rendering (CPU) sinkt die Leistung um 40–60%, bleibt aber für einfache Bildschirme akzeptabel.

Shader Jank – Skias Hauptproblem

Das Hauptleistungsproblem von Skia in Flutter ist Shader Jank. Wenn ein neues visuelles Element mit einer bisher unbekannten Kombination von Effekten auf dem Bildschirm erscheint, kompiliert Skia einen neuen Shader spontan. Die Kompilierung kann 50–200 ms dauern, während der die Anwendung Frames auslässt. Dies ist besonders beim Scrollen langer Listen mit benutzerdefinierten Dekorationen spürbar. Google löst dieses Problem mit Impeller, einer neuen Rendering-Engine, die Shader vorab kompiliert.

Skia auf verschiedenen Plattformen

Skia unterstützt eine breite Palette von Plattformen, die jeweils ihr eigenes Rendering-Backend verwenden. Die Backend-Wahl wird während des Flutter-Engine-Builds basierend auf der Zielplattform und den verfügbaren Grafik-APIs bestimmt.

Android

Unter Android arbeitet Skia über OpenGL ES (auf allen Geräten) und Vulkan (auf Android 7.0+-Geräten mit Vulkan-Unterstützung). Die Backend-Auswahl erfolgt automatisch: Vulkan wird bevorzugt, da es eine geringere Treiberlatenz bietet. Android verwendet Skia auch für das System-UI-Rendering über HWUI (Hardware Accelerated UI), was Skia zu einem Teil des Betriebssystems macht, nicht nur von Flutter.

iOS

Unter iOS verwendet Skia Metal – Apples proprietäre Grafik-API. Metal bietet Low-Level-Zugriff auf die GPU mit minimalem Overhead. Vor der Einführung von Metal (2014) verwendete Skia unter iOS OpenGL ES, aber in aktuellen Flutter-Versionen ist Metal der einzige GPU-Backend für iOS, was eine Leistungssteigerung von bis zu 30% im Vergleich zu OpenGL bietet.

Desktop (Windows, macOS, Linux)

Auf dem Desktop verwendet Skia OpenGL (macOS, Linux) und Direct3D 12 (Windows). Direct3D 12-Unterstützung wurde in Flutter 3.13 für Windows hinzugefügt und bietet eine signifikante Leistungsverbesserung gegenüber OpenGL unter Windows. Skia unterstützt auch Software-Rendering über ANGLE (OpenGL über Direct3D) unter Windows für Abwärtskompatibilität mit älteren Grafiktreibern.

Web

In Flutter for Web wird Skia in WebAssembly (via Emscripten) kompiliert und rendert über WebGL. In diesem Modus arbeitet Skia vollständig im Browser ohne nativen Code. Die Leistung der WebGL-Version von Skia ist geringer als die nativer Backends, aber für die meisten Webanwendungen werden auf modernen Browsern mit WebGL-Hardwarebeschleunigung 60 FPS erreicht.