Skia: mahiyyəti, arxitekturası və Flutter qrafik mühərrikində rolu

Skia nədir?

Skia — Google tərəfindən hazırlanmış və BSD lisenziyası altında mövcud olan çoxplatformalı 2D qrafik kitabxanasıdır. O, həndəsi fiqurların, mətnin, şəkillərin və kölgələrin çəkilməsi üçün vahid API təmin edir, alt qrafik backenddən abstraksiya edir. Skia C++ dilində yazılıb və mobil telefonlardan serverlərə qədər geniş cihaz spektrində işləmək üçün optimallaşdırılıb.

Skia-nın tarixi 2005-ci ildə Skia Inc. şirkətinin qapalı kitabxanası kimi başlamışdır. 2007-ci ildə Google onu satın aldı, mənbə kodunu açdı və öz məhsullarında istifadə etməyə başladı. Bu gün Skia Google Chrome (Chrome OS daxil olmaqla), Android (versiya 4.0-dan etibarən) və əlbəttə ki, Flutter-in əsas qrafik mühərrikidir. Kitabxana Google komandası tərəfindən dəstəklənir və daim təkmilləşdirilir: yeni backendlər, performans optimallaşdırmaları və müasir qrafik API-lərin dəstəyi əlavə olunur.

Skia-nın əsas xüsusiyyəti onun sadəcə primitivləri çəkmək üçün funksiyalar dəsti olmamasıdır. Bu, əyrilərin (yolların) rastrlaşdırılması, hamarlaşdırma (anti-aliasing), maskaların tətbiqi, şəffaflığın emalı və rəng korreksiyasını əhatə edən tam hüquqlu qrafik konveyerdir. Skia PNG, JPEG, WebP və GIF şəkil formatlarını dəstəkləyir, həmçinin gliflərin formalanması üçün HarfBuzz mühərriki vasitəsilə mətn render edə bilər.

Skia vs digər qrafik kitabxanalar

Cairo (GTK-da istifadə olunur) və ya Quartz 2D-dən (macOS-da istifadə olunur) fərqli olaraq, Skia əvvəldən müxtəlif qrafik API-ləri olan bir neçə platformada işləmək üçün layihələndirilmişdir. Bu, ona Flutter kimi çoxplatformalı freymvorklarda üstünlük verir. Cairo proqram renderləməsinə yönəlib, Skia isə əvvəldən GPU sürətləndirilməsini dəstəkləyirdi ki, bu da interfeys animasiyaları üçün kritikdir.

Skia arxitekturası

Skia arxitekturası çoxqatlı konveyer kimi qurulmuşdur, hər təbəqə qrafik əmrlərinin piksellərə çevrilməsinin müəyyən mərhələsinə cavabdehdir. Belə bir struktur yuxarı təbəqələrin alt qrafik API-dən asılı olmayaraq təkrar istifadəsinə imkan verir.

Üst təbəqə — Canvas API — tərtibatçıya çəkmək üçün abstraksiya təmin edir. drawRect, drawCircle, drawPath, drawText metodları həndəsi parametrləri və üslubları (rəng, şəffaflıq, transformasiyalar) qəbul edir. Canvas bu əmrləri icradan əvvəl optimallaşdırılan daxili əmrlər qrafiki olan Skia Pipeline təbəqəsinə ötürülən əməliyyatlar ardıcıllığına çevirir.

Orta təbəqə — Surface və Device — renderləmənin baş verdiyi hədəf buferi idarə edir. Surface ölçü, rəng məkanı və backend növü göstərilərək yaradılır. Device konkret renderləmə backendini həyata keçirir: CPU rastrlaşdırıcısı (Raster), OpenGL (GL), Vulkan (Vk) və ya Metal (Mt). Device konkret backend üçün hər bir çəkmə əməliyyatının optimallaşdırılmış tətbiqlərini ehtiva edir.

Alt təbəqə — Ganesha (GPU backend) — aparat sürətləndirilmiş renderləməni həyata keçirir. Ganesha yolların rastrlaşdırılması, gradientlərin doldurulması və effektlərin tətbiqi üçün GPU-dan istifadə edir. O, əmrləri toplayır və GPU vəziyyətinin dəyişdirilməsini minimuma endirir. Hər qrafik API üçün Ganesha-nın öz tətbiqi mövcuddur: OpenGL üçün Skia GL, Vulkan üçün Skia Vulkan, Metal üçün Skia Metal.

Aralıq təmsil — SkSL

Skia effektləri təsvir etmək üçün öz şeyder dili SkSL-dən (Skia Shading Language) istifadə edir. SkSL kodu SPIR-V-yə (aralıq təmsil) kompilyasiya olunur, sonra isə backend üçün spesifik şeyder formatına (GLSL, HLSL, MSL) tərcümə olunur. Bu, platformadan asılı olmayaraq qrafik effektləri təsvir etməyin vahid yolunu təmin edir.

Skia Flutter-də necə işləyir

Flutter Skia-dan bütün platformalarda əsas renderləmə mühərriki kimi istifadə edir: Android, iOS, Web, Windows, macOS və Linux. Flutter tətbiqi kadr render edərkən, vidjetlər RenderObject ağacına çevrilir, sonra isə Engine təbəqəsinə (C++ dilində) ötürülür və Engine son renderləmə üçün Skia-dan istifadə edir.

Kadrın renderləmə prosesi bir neçə mərhələni əhatə edir. Əvvəlcə Flutter Engine əməliyyatlar siyahısını (Display List) qurur — nəyi və necə çəkməyi təsvir edən Canvas API çağırışlarının ardıcıllığı. Sonra bu siyahı Skia-ya ötürülür, o, əməliyyatları hissələrə (ekran sahələri) bölür, dərinliyə görə sıralayır və müvafiq renderləmə backendinə ötürür. GPU sürətləndirilməsi Skia mövcud qrafik API aşkar edərsə avtomatik olaraq işə düşür.

Skia-nın Flutter-də əsas üstünlüklərindən biri Flutter Impeller Preview — şeyderlərə önbaxış imkanıdır. Skia şeyderləri ilk istifadə anında kompilyasiya edir ki, bu da gecikmələrə səbəb ola bilər (shader jank). Bu problemi həll etmək üçün Flutter Impeller-ə keçir — yeni renderləmə mühərriki, lakin Skia Flutter-in stabil versiyaları üçün əsas seçim olaraq qalır.

Layer Tree və Paint

Flutter Layer Tree konsepsiyasından istifadə edir — hər biri UI-nin bir hissəsini təmsil edən təbəqələr ağacı. Skia hər təbəqə üçün çəkmə əmrlərini alır və bir neçə təbəqənin bir renderləmə keçidində birləşdirilə biləcəyini müəyyən edir. Təbəqələrin qarışdırılması (layer compositing) mürəkkəb tapşırıqdır, çünki hər piksel üçün Skia-nın GPU şeyderləri vasitəsilə həyata keçirdiyi şəffaflıq və qarışdırma rejimləri (blend modes) nəzərə alınmalıdır.

Skia vasitəsilə mətn renderləməsi

Skia mətni HarfBuzz (formalama) və icu (unicode) kitabxanaları ilə inteqrasiya vasitəsilə render edir. Flutter-də hər mətn vidjeti mətni gliflərin çəkilməsi üçün Skia əmrləri seriyasına çevirən Paragraph obyekti yaradır. Skia subpiksel hamarlaşdırma (subpixel anti-aliasing), şrift hintingi və SkUnicode kitabxanası vasitəsilə emoji ilə işləməyi dəstəkləyir.

Skia performansı

Skia performansı uzun illər davam edən optimallaşdırma və bir neçə texnikanın kombinasiyasının nəticəsidir: əmrlərin toplanması, teksturların keşləşdirilməsi və GPU kontekstinin dəyişdirilməsinin minimuma endirilməsi. Flutter üçün bu kritik əhəmiyyətlidir, çünki hər kadr 16 ms (60 FPS) və ya 8 ms (120 FPS) ərzində render edilməlidir.

Flutter Team benchmarklərinə görə, orta sinif cihazlarda (Qualcomm Snapdragon 700 series) GPU sürətləndirilməsi ilə Skia istifadəsi ekranda 30+ vidjet ilə mürəkkəb interfeyslərin renderlənməsində sabit 60 FPS təmin edir. Proqram renderləməsində (CPU) performans 40–60% aşağı düşür, lakin sadə ekranlar üçün məqbul qalır.

Shader Jank — Skia-nın əsas problemi

Skia-nın Flutter-də əsas performans problemi shader jank-dır (şeyder gecikmələri). Ekranda əvvəllər məlum olmayan effekt kombinasiyasına malik yeni vizual element görünəndə, Skia yeni şeyderi yerindəcə kompilyasiya edir. Kompilyasiya 50–200 ms çəkə bilər, bu müddət ərzində tətbiq kadrları buraxır. Bu, xüsusilə fərdi dekorasiyalı uzun siyahıların sürüşdürülməsi zamanı nəzərə çarpır. Google bu problemi şeyderləri əvvəlcədən kompilyasiya edən yeni renderləmə mühərriki Impeller-də həll edir.

Skia müxtəlif platformalarda

Skia geniş platforma spektrini dəstəkləyir, hər biri öz renderləmə backendindən istifadə edir. Backend seçimi Flutter Engine-in qurulması mərhələsində hədəf platforma və mövcud qrafik API-lər əsasında müəyyən edilir.

Android

Android-də Skia OpenGL ES (bütün cihazlarda) və Vulkan (Android 7.0+ Vulkan dəstəyi olan cihazlarda) vasitəsilə işləyir. Backend seçimi avtomatik olaraq baş verir: Vulkan üstünlük təşkil edir, çünki daha aşağı sürücü gecikməsi verir. Android həmçinin sistem UI-nin HWUI (Hardware Accelerated UI) vasitəsilə renderlənməsi üçün Skia-dan istifadə edir ki, bu da Skia-nı təkcə Flutter-in deyil, əməliyyat sisteminin bir hissəsi edir.

iOS

iOS-da Skia Apple-ın mülkiyyət qrafik API-i Metal-dan istifadə edir. Metal GPU-ya aşağı səviyyəli giriş və minimal əlavə yük təmin edir. Metal-in meydana gəlməsindən əvvəl (2014) iOS-da Skia OpenGL ES istifadə edirdi, lakin Flutter-in cari versiyalarında Metal iOS üçün yeganə GPU backendidir ki, bu da OpenGL ilə müqayisədə performansda 30% artım verir.

Desktop (Windows, macOS, Linux)

Desktopda Skia OpenGL (macOS, Linux) və Direct3D 12 (Windows) istifadə edir. Windows üçün Direct3D 12 dəstəyi Flutter 3.13-də əlavə edilmişdir və Windows-da OpenGL ilə müqayisədə əhəmiyyətli performans yaxşılaşması verir. Skia həmçinin Windows-da köhnə qrafik drayverlərlə geriyə uyğunluq üçün ANGLE (Direct3D üzərində OpenGL) vasitəsilə proqram renderləməsini dəstəkləyir.

Web

Flutter for Web-də Skia WebAssembly-yə (Emscripten vasitəsilə) kompilyasiya olunur və WebGL vasitəsilə render edir. Bu rejimdə Skia tamamilə brauzerdə işləyir, yerli koddan istifadə etmir. WebGL versiyasının performansı yerli backendlərdən aşağıdır, lakin əksər veb tətbiqlər üçün müasir brauzerlərdə WebGL aparat sürətləndirilməsi ilə 60 FPS əldə edilə bilər.