Skia: özü, mimarisi ve Flutter grafik motorundaki rolü

Skia Nedir?

Skia, Google tarafından geliştirilen ve BSD lisansı altında sunulan, platformlar arası bir 2D grafik kütüphanesidir. Geometrik şekiller, metin, resim ve gölgeler çizmek için birleşik bir API sağlar ve altta yatan grafik backend'inden soyutlama yapar. Skia C++ ile yazılmıştır ve mobil telefonlardan sunuculara kadar geniş bir cihaz yelpazesinde çalışmak üzere optimize edilmiştir.

Skia'nın tarihi 2005 yılında Skia Inc. şirketinin tescilli bir kütüphanesi olarak başladı. 2007'de Google tarafından satın alındı, kaynak kodu açıldı ve ürünlerinde kullanılmaya başlandı. Bugün Skia, Google Chrome (Chrome OS dahil), Android (sürüm 4.0'dan itibaren) ve tabii ki Flutter'ın birincil grafik motorudur. Kütüphane Google ekibi tarafından bakımı yapılır ve sürekli iyileştirilir: yeni backend'ler, performans optimizasyonları ve modern grafik API'leri için destek eklenir.

Skia'nın temel özelliği, yalnızca temel öğeleri çizmek için bir dizi işlev olmamasıdır. Eğri rasterleştirme (yollar), kenar yumuşatma (anti-aliasing), maske kaplama, şeffaflık işleme ve renk düzeltmeyi içeren eksiksiz bir grafik işlem hattıdır. Skia, PNG, JPEG, WebP ve GIF resim formatlarını destekler ve glif şekillendirme için HarfBuzz motoru aracılığıyla metin işleyebilir.

Skia vs Diğer Grafik Kütüphaneleri

Cairo (GTK'da kullanılır) veya Quartz 2D'nin (macOS'te kullanılır) aksine, Skia başlangıçtan itibaren farklı grafik API'lerine sahip birden çok platformda çalışmak üzere tasarlanmıştır. Bu, ona Flutter gibi platformlar arası framework'lerde avantaj sağlar. Cairo yazılım işlemeye yöneliktir, oysa Skia en başından beri GPU hızlandırmasını desteklemiştir ve bu, arayüz animasyonları için kritik öneme sahiptir.

Skia Mimarisi

Skia mimarisi, her katmanın grafik komutlarını piksellere dönüştürmenin belirli bir aşamasından sorumlu olduğu çok katmanlı bir işlem hattı olarak inşa edilmiştir. Bu yapı, altta yatan grafik API'sinden bağımsız olarak üst katmanların yeniden kullanılmasına olanak tanır.

En üst katman — Canvas API — geliştiriciye çizim için bir soyutlama sağlar. drawRect, drawCircle, drawPath, drawText yöntemleri geometrik parametreler ve stiller (renk, şeffaflık, dönüşümler) alır. Canvas bu komutları, yürütülmeden önce optimize edilen dahili bir komut grafiği olan Skia Pipeline'a iletilen bir dizi işleme dönüştürür.

Orta katman — Surface ve Device — işlemenin gerçekleştiği hedef arabelleği yönetir. Surface, belirtilen boyut, renk uzayı ve backend türü ile oluşturulur. Device, belirli bir işleme backend'ini uygular: CPU rasterleştirici (Raster), OpenGL (GL), Vulkan (Vk) veya Metal (Mt). Device, belirli bir backend için her çizim işleminin optimize edilmiş uygulamalarını içerir.

En alt katman — Ganesha (GPU backend) — donanım hızlandırmalı işlemeyi uygular. Ganesha, yol rasterleştirme, gradyan dolgular ve efekt kaplamaları için GPU'yu kullanır. Komutları toplu olarak toplar ve GPU durum geçişini en aza indirir. Her grafik API'sinin kendi Ganesha uygulaması vardır: OpenGL için Skia GL, Vulkan için Skia Vulkan, Metal için Skia Metal.

Ara Temsil — SkSL

Skia, efektleri tanımlamak için kendi gölgelendirici dili SkSL'yi (Skia Shading Language) kullanır. SkSL kodu, SPIR-V'ye (ara temsil) derlenir ve daha sonra backend'e özgü gölgelendirici formatına (GLSL, HLSL, MSL) çevrilir. Bu, platformdan bağımsız olarak grafik efektlerini tanımlamak için birleşik bir yol sağlar.

Skia Flutter'da Nasıl Çalışır

Flutter, tüm platformlarda birincil işleme motoru olarak Skia'yı kullanır: Android, iOS, Web, Windows, macOS ve Linux. Bir Flutter uygulaması bir kare işlediğinde, widget'lar bir RenderObject ağacına dönüştürülür, ardından Engine katmanına (C++ ile) iletilir ve Engine, son işleme için Skia'yı kullanır.

Kare işleme süreci birkaç aşamadan oluşur. İlk olarak, Flutter Engine bir Display List — neyin ve nasıl çizileceğini açıklayan bir dizi Canvas API çağrısı — oluşturur. Bu liste daha sonra Skia'ya iletilir; Skia işlemleri bölümlere (ekran alanları) ayırır, derinliğe göre sıralar ve ilgili işleme backend'ine iletir. Skia kullanılabilir bir grafik API'si algılarsa GPU hızlandırması otomatik olarak etkinleştirilir.

Skia'nın Flutter'daki temel avantajlarından biri, Flutter Impeller Preview — gölgelendiricileri önceden önizleme yeteneğidir. Skia, gölgelendiricileri ilk kullanım anında derler ve bu da gecikmelere (shader jank) neden olabilir. Bu sorunu çözmek için Flutter, Impeller'a — yeni bir işleme motoruna — geçiş yapmaktadır, ancak Skia, kararlı Flutter sürümleri için ana seçim olmaya devam etmektedir.

Layer Tree ve Paint

Flutter, Layer Tree kavramını kullanır — her biri UI'nın bir bölümünü temsil eden katmanlardan oluşan bir ağaç. Skia, her katman için çizim komutları alır ve birden çok katmanın tek bir işleme geçişinde birleştirilip birleştirilemeyeceğini belirler. Katman birleştirme, her piksel için şeffaflık ve karışım modlarının (blend modes) dikkate alınması gerektiğinden karmaşık bir iştir ve Skia bunları GPU gölgelendiricileri aracılığıyla uygular.

Skia ile Metin İşleme

Skia, HarfBuzz (şekillendirme) ve ICU (unicode) kütüphaneleriyle entegrasyon yoluyla metin işler. Flutter'da, her metin widget'ı, metni glif çizmek için bir dizi Skia komutuna dönüştüren bir Paragraph nesnesi oluşturur. Skia, alt piksel kenar yumuşatma (subpixel anti-aliasing), yazı tipi ipucu (font hinting) ve SkUnicode kütüphanesi aracılığıyla emoji ile çalışmayı destekler.

Skia Performansı

Skia'nın performansı, yıllar süren optimizasyonun ve çeşitli tekniklerin birleşiminin sonucudur: komut toplama, doku önbelleğe alma ve GPU bağlam geçişini en aza indirme. Bu, Flutter için kritik öneme sahiptir çünkü her kare 16 ms (60 FPS) veya 8 ms (120 FPS) içinde işlenmelidir.

Flutter Ekibi kıyaslamalarına göre, orta sınıf cihazlarda (Qualcomm Snapdragon 700 series) GPU hızlandırmalı Skia kullanımı, ekranda 30'dan fazla widget içeren karmaşık arayüzleri işlerken kararlı 60 FPS sağlar. Yazılım işleme (CPU) ile performans %40–60 oranında düşer, ancak basit ekranlar için kabul edilebilir düzeyde kalır.

Shader Jank — Skia'nın Ana Sorunu

Flutter'da Skia'nın ana performans sorunu shader jank'tır (gölgelendirici takılmaları). Ekranda daha önce bilinmeyen bir efekt kombinasyonuna sahip yeni bir görsel öğe göründüğünde, Skia anında yeni bir gölgelendirici derler. Derleme 50–200 ms sürebilir ve bu süre zarfında uygulama kare atlar. Bu, özel süslemelere sahip uzun listelerde kaydırma yaparken özellikle belirgindir. Google bu sorunu, gölgelendiricileri önceden derleyen yeni bir işleme motoru olan Impeller ile çözmektedir.

Farklı Platformlarda Skia

Skia, her biri kendi işleme backend'ini kullanan geniş bir platform yelpazesini destekler. Backend seçimi, hedef platforma ve mevcut grafik API'lerine göre Flutter Engine derlemesi sırasında belirlenir.

Android

Android'de Skia, OpenGL ES (tüm cihazlarda) ve Vulkan (Android 7.0+ Vulkan destekli cihazlarda) aracılığıyla çalışır. Backend seçimi otomatiktir: Vulkan tercih edilir çünkü daha düşük sürücü gecikmesi sağlar. Android, sistem UI işlemesi için HWUI (Hardware Accelerated UI) aracılığıyla da Skia'yı kullanır ve bu da Skia'yı yalnızca Flutter'ın değil, işletim sisteminin bir parçası haline getirir.

iOS

iOS'ta Skia, Apple'ın tescilli grafik API'si olan Metal'i kullanır. Metal, minimum ek yük ile GPU'ya düşük seviyeli erişim sağlar. Metal'in (2014) tanıtılmasından önce iOS'ta Skia OpenGL ES kullanıyordu, ancak mevcut Flutter sürümlerinde Metal, iOS için tek GPU backend'idir ve OpenGL'e kıyasla %30'a varan performans iyileştirmesi sağlar.

Masaüstü (Windows, macOS, Linux)

Masaüstünde Skia, OpenGL (macOS, Linux) ve Direct3D 12 (Windows) kullanır. Direct3D 12 desteği, Windows için Flutter 3.13'te eklenmiştir ve Windows'ta OpenGL'e kıyasla önemli bir performans iyileştirmesi sağlar. Skia, eski grafik sürücüleriyle geriye dönük uyumluluk için Windows'ta ANGLE (Direct3D üzerinde OpenGL) aracılığıyla yazılım işlemeyi de destekler.

Web

Flutter for Web'de Skia, WebAssembly'ye (Emscripten aracılığıyla) derlenir ve WebGL aracılığıyla işleme yapar. Bu modda Skia, yerel kod kullanmadan tamamen tarayıcıda çalışır. Skia'nın WebGL sürümünün performansı yerel backend'lerden daha düşüktür, ancak çoğu web uygulaması için modern tarayıcılarda WebGL donanım hızlandırması ile 60 FPS elde edilir.