Skia: ουσία, αρχιτεκτονική και ρόλος στη μηχανή γραφικών του Flutter

Τι είναι το Skia;

Skia — είναι μια cross-platform 2D γραφική βιβλιοθήκη που αναπτύχθηκε από την Google και είναι διαθέσιμη υπό την άδεια BSD. Παρέχει ένα ενιαίο API για τη σχεδίαση γεωμετρικών σχημάτων, κειμένου, εικόνων και σκιών, αφαιρώντας την υποκείμενη γραφική backend. Το Skia είναι γραμμένο σε C++ και βελτιστοποιημένο για λειτουργία σε ένα ευρύ φάσμα συσκευών — από κινητά τηλέφωνα έως διακομιστές.

Η ιστορία του Skia ξεκίνησε το 2005 ως κλειστή βιβλιοθήκη της εταιρείας Skia Inc. Το 2007, η Google την εξαγόρασε, άνοιξε τον πηγαίο κώδικα και άρχισε να τη χρησιμοποιεί στα προϊόντα της. Σήμερα, το Skia είναι η κύρια μηχανή γραφικών του Google Chrome (συμπεριλαμβανομένου του Chrome OS), του Android (από την έκδοση 4.0) και φυσικά του Flutter. Η βιβλιοθήκη υποστηρίζεται από την ομάδα της Google και βελτιώνεται συνεχώς: προστίθενται νέα backend, βελτιστοποιήσεις απόδοσης και υποστήριξη για σύγχρονα γραφικά API.

Το βασικό χαρακτηριστικό του Skia είναι ότι δεν είναι απλώς μια συλλογή συναρτήσεων για τη σχεδίαση βασικών στοιχείων. Είναι ένα πλήρες γραφικό pipeline που περιλαμβάνει ραστεροποίηση καμπυλών (μονοπατιών), anti-aliasing, εφαρμογή μασκών, επεξεργασία διαφάνειας και διόρθωση χρωμάτων. Το Skia υποστηρίζει τις μορφές εικόνας PNG, JPEG, WebP και GIF, και μπορεί επίσης να αποδώσει κείμενο μέσω της μηχανής HarfBuzz για τη μορφοποίηση γλυφών.

Skia vs άλλες γραφικές βιβλιοθήκες

Σε αντίθεση με το Cairo (χρησιμοποιείται στο GTK) ή το Quartz 2D (χρησιμοποιείται στο macOS), το Skia σχεδιάστηκε εξαρχής για να λειτουργεί σε πολλές πλατφόρμες με διαφορετικά γραφικά API. Αυτό του δίνει πλεονέκτημα σε cross-platform frameworks όπως το Flutter. Cairo επικεντρώνεται στην απόδοση λογισμικού, ενώ το Skia υποστήριζε επιτάχυνση GPU από την αρχή, κάτι που είναι κρίσιμο για κινούμενα σχέδια διεπαφής.

Αρχιτεκτονική Skia

Η αρχιτεκτονική του Skia είναι χτισμένη ως ένα πολυεπίπεδο pipeline, όπου κάθε επίπεδο είναι υπεύθυνο για ένα συγκεκριμένο στάδιο μετατροπής των γραφικών εντολών σε pixel. Αυτή η δομή επιτρέπει την επαναχρησιμοποίηση των ανώτερων επιπέδων ανεξάρτητα από το υποκείμενο γραφικό API.

Το ανώτερο επίπεδο — Canvas API — παρέχει στον προγραμματιστή μια αφαίρεση για τη σχεδίαση. Οι μέθοδοι drawRect, drawCircle, drawPath, drawText δέχονται γεωμετρικές παραμέτρους και στυλ (χρώμα, διαφάνεια, μετασχηματισμούς). Το Canvas μετατρέπει αυτές τις εντολές σε μια ακολουθία λειτουργιών που μεταφέρονται στο επίπεδο Skia Pipeline — ένα εσωτερικό γράφημα εντολών που βελτιστοποιείται πριν από την εκτέλεση.

Το μεσαίο επίπεδο — Surface και Device — διαχειρίζεται τον buffer προορισμού όπου γίνεται η απόδοση. Το Surface δημιουργείται με καθορισμό μεγέθους, χρωματικού χώρου και τύπου backend. Το Device υλοποιεί ένα συγκεκριμένο backend απόδοσης: ραστεροποιητή CPU (Raster), OpenGL (GL), Vulkan (Vk) ή Metal (Mt). Το Device περιέχει βελτιστοποιημένες υλοποιήσεις κάθε λειτουργίας σχεδίασης για το συγκεκριμένο backend.

Το κατώτερο επίπεδο — Ganesha (backend GPU) — υλοποιεί απόδοση με επιτάχυνση υλικού. Η Ganesha χρησιμοποιεί την GPU για ραστεροποίηση μονοπατιών, γέμισμα ντεγκραντέ και εφαρμογή εφέ. Συλλέγει εντολές σε παρτίδες και ελαχιστοποιεί την εναλλαγή κατάστασης της GPU. Για κάθε γραφικό API υπάρχει η δική της υλοποίηση Ganesha: Skia GL για OpenGL, Skia Vulkan για Vulkan, Skia Metal για Metal.

Ενδιάμεση αναπαράσταση — SkSL

Το Skia χρησιμοποιεί τη δική του γλώσσα shader SkSL (Skia Shading Language) για την περιγραφή εφέ. Ο κώδικας SkSL μεταγλωττίζεται σε SPIR-V (ενδιάμεση αναπαράσταση), η οποία στη συνέχεια μεταφράζεται σε μορφή shader ειδική για το backend (GLSL, HLSL, MSL). Αυτό παρέχει έναν ενιαίο τρόπο περιγραφής γραφικών εφέ ανεξάρτητα από την πλατφόρμα.

Πώς λειτουργεί το Skia στο Flutter

Το Flutter χρησιμοποιεί το Skia ως κύρια μηχανή απόδοσης σε όλες τις πλατφόρμες: Android, iOS, Web, Windows, macOS και Linux. Όταν μια εφαρμογή Flutter αποδίδει ένα καρέ, τα widget μετατρέπονται σε ένα δέντρο RenderObject, το οποίο στη συνέχεια μεταφέρεται στο επίπεδο Engine (σε C++), και το Engine χρησιμοποιεί το Skia για την τελική απόδοση.

Η διαδικασία απόδοσης ενός καρέ περιλαμβάνει διάφορα στάδια. Πρώτα, το Flutter Engine δημιουργεί μια λίστα λειτουργιών (Display List) — μια ακολουθία κλήσεων Canvas API που περιγράφουν τι και πώς να σχεδιαστεί. Στη συνέχεια, αυτή η λίστα μεταφέρεται στο Skia, το οποίο χωρίζει τις λειτουργίες σε διαμερίσματα (περιοχές οθόνης), τις ταξινομεί κατά βάθος και τις μεταφέρει στο κατάλληλο backend απόδοσης. Η επιτάχυνση GPU ενεργοποιείται αυτόματα αν το Skia ανιχνεύσει διαθέσιμο γραφικό API.

Ένα από τα βασικά πλεονεκτήματα του Skia στο Flutter είναι το Flutter Impeller Preview — η δυνατότητα προεπισκόπησης shader. Το Skia μεταγλωττίζει shader τη στιγμή της πρώτης χρήσης, κάτι που μπορεί να προκαλέσει καθυστερήσεις (shader jank). Για την επίλυση αυτού του προβλήματος, το Flutter μεταβαίνει στο Impeller — μια νέα μηχανή απόδοσης, αλλά το Skia παραμένει η κύρια επιλογή για σταθερές εκδόσεις του Flutter.

Layer Tree και Paint

Το Flutter χρησιμοποιεί την έννοια του Layer Tree — ένα δέντρο επιπέδων, όπου κάθε ένα αντιπροσωπεύει ένα μέρος του UI. Το Skia λαμβάνει εντολές σχεδίασης για κάθε επίπεδο και καθορίζει αν πολλαπλά επίπεδα μπορούν να συνδυαστούν σε ένα πέρασμα απόδοσης. Η σύνθεση επιπέδων (layer compositing) είναι μια περίπλοκη εργασία, καθώς για κάθε pixel πρέπει να ληφθεί υπόψη η διαφάνεια και οι λειτουργίες ανάμειξης (blend modes), τις οποίες το Skia υλοποιεί μέσω shader GPU.

Απόδοση κειμένου μέσω Skia

Το Skia αποδίδει κείμενο μέσω ενσωμάτωσης με τις βιβλιοθήκες HarfBuzz (μορφοποίηση) και icu (unicode). Στο Flutter, κάθε widget κειμένου δημιουργεί ένα αντικείμενο Paragraph που μετατρέπει το κείμενο σε μια σειρά εντολών Skia για τη σχεδίαση γλυφών. Skia υποστηρίζει anti-aliasing υπο-pixel (subpixel anti-aliasing), hinting γραμματοσειρών και εργασία με emoji μέσω της βιβλιοθήκης SkUnicode.

Απόδοση Skia

Η απόδοση του Skia είναι αποτέλεσμα πολυετούς βελτιστοποίησης και συνδυασμού πολλών τεχνικών: ομαδοποίησης εντολών, προσωρινής αποθήκευσης υφών και ελαχιστοποίησης εναλλαγής περιβάλλοντος GPU. Για το Flutter, αυτό είναι κρίσιμο, καθώς κάθε καρέ πρέπει να αποδοθεί σε 16 ms (60 FPS) ή 8 ms (120 FPS).

Σύμφωνα με τα benchmarks του Flutter Team, η χρήση του Skia με επιτάχυνση GPU σε συσκευές μεσαίας κατηγορίας (Qualcomm Snapdragon 700 series) εξασφαλίζει σταθερά 60 FPS κατά την απόδοση σύνθετων διεπαφών με 30+ widget στην οθόνη. Στην απόδοση λογισμικού (CPU), η απόδοση μειώνεται κατά 40–60%, αλλά παραμένει αποδεκτή για απλές οθόνες.

Shader Jank — το κύριο πρόβλημα του Skia

Το κύριο πρόβλημα απόδοσης του Skia στο Flutter είναι το shader jank (καθυστερήσεις shader). Όταν ένα νέο οπτικό στοιχείο με άγνωστο συνδυασμό εφέ εμφανίζεται στην οθόνη, το Skia μεταγλωττίζει ένα νέο shader επί τόπου. Η μεταγλώττιση μπορεί να διαρκέσει 50–200 ms, κατά τη διάρκεια των οποίων η εφαρμογή χάνει καρέ. Αυτό είναι ιδιαίτερα αισθητό κατά την κύλιση μεγάλων λιστών με προσαρμοσμένες διακοσμήσεις. Η Google λύνει αυτό το πρόβλημα στο Impeller, μια νέα μηχανή απόδοσης που μεταγλωττίζει shader εκ των προτέρων.

Skia σε διαφορετικές πλατφόρμες

Το Skia υποστηρίζει ένα ευρύ φάσμα πλατφορμών, καθεμία από τις οποίες χρησιμοποιεί το δικό της backend απόδοσης. Η επιλογή backend καθορίζεται στο στάδιο κατασκευής του Flutter Engine με βάση την πλατφόρμα-στόχο και τα διαθέσιμα γραφικά API.

Android

Στο Android, το Skia λειτουργεί μέσω OpenGL ES (σε όλες τις συσκευές) και Vulkan (σε συσκευές Android 7.0+ με υποστήριξη Vulkan). Η επιλογή backend γίνεται αυτόματα: το Vulkan είναι προτιμότερο καθώς παρέχει χαμηλότερη καθυστέρηση οδηγού. Android χρησιμοποιεί επίσης το Skia για την απόδοση του συστήματος UI μέσω HWUI (Hardware Accelerated UI), καθιστώντας το Skia μέρος του λειτουργικού συστήματος, όχι μόνο του Flutter.

iOS

Στο iOS, το Skia χρησιμοποιεί Metal — το ιδιόκτητο γραφικό API της Apple. Το Metal παρέχει πρόσβαση χαμηλού επιπέδου στην GPU με ελάχιστο κόστος. Πριν από την εμφάνιση του Metal (2014), το Skia στο iOS χρησιμοποιούσε OpenGL ES, αλλά στις τρέχουσες εκδόσεις του Flutter το Metal είναι το μοναδικό backend GPU για iOS, παρέχοντας αύξηση απόδοσης έως 30% σε σύγκριση με το OpenGL.

Desktop (Windows, macOS, Linux)

Στην επιφάνεια εργασίας, το Skia χρησιμοποιεί OpenGL (macOS, Linux) και Direct3D 12 (Windows). Η υποστήριξη για Direct3D 12 στα Windows προστέθηκε στο Flutter 3.13 και παρέχει σημαντική βελτίωση απόδοσης σε σύγκριση με το OpenGL στα Windows. Skia υποστηρίζει επίσης απόδοση λογισμικού μέσω ANGLE (OpenGL πάνω από Direct3D) στα Windows για συμβατότητα προς τα πίσω με παλιά προγράμματα οδήγησης γραφικών.

Web

Στο Flutter for Web, το Skia μεταγλωττίζεται σε WebAssembly (μέσω Emscripten) και αποδίδει μέσω WebGL. Σε αυτή τη λειτουργία, το Skia λειτουργεί πλήρως στο πρόγραμμα περιήγησης, χωρίς να χρησιμοποιεί εγγενή κώδικα. Η απόδοση της έκδοσης WebGL του Skia είναι χαμηλότερη από τα εγγενή backend, αλλά για τις περισσότερες εφαρμογές ιστού, 60 FPS επιτυγχάνονται σε σύγχρονα προγράμματα περιήγησης με επιτάχυνση υλικού WebGL.