Γραφικά και Απόδοση στην Ανάπτυξη Κινητών: Τι Είναι, Πώς Λειτουργεί η Διαδικασία και Πώς Λειτουργεί

Γραφικά και Απόδοση: Βασικά CPU και GPU

Απόδοση είναι η διαδικασία μετατροπής δεδομένων (κορυφές, υφές, shaders) σε εικόνα στην οθόνη. Σε κινητές συσκευές, η απόδοση μπορεί να εκτελεστεί σε CPU (κεντρικό επεξεργαστή) ή GPU (επεξεργαστή γραφικών). Η επιλογή εξαρτάται από τον τύπο γραφικών και την απαιτούμενη απόδοση.

CPU vs GPU Rendering

CPU Rendering — σειριακή επεξεργασία. Κάθε εντολή εκτελείται η μία μετά την άλλη. Η CPU είναι βελτιστοποιημένη για λογική και διακλαδώσεις. Το Canvas (Android), Core Graphics (iOS) λειτουργούν σε CPU. Πλεονέκτημα: ακρίβεια, υποστήριξη πολύπλοκων αλγορίθμων. Μειονέκτημα: αργό με μεγάλο αριθμό γραφικών στοιχείων. GPU Rendering — παράλληλη επεξεργασία. Χιλιάδες πυρήνες GPU επεξεργάζονται κορυφές και pixel ταυτόχρονα. Το Metal (iOS), Vulkan (Android), OpenGL ES (και οι δύο πλατφόρμες) χρησιμοποιούν GPU. Το GPU Rendering είναι υποχρεωτικό για 3D, κινούμενα σχέδια 60 FPS και πολύπλοκα εφέ. Τα σύγχρονα πλαίσια UI (SwiftUI, Jetpack Compose, Flutter) χρησιμοποιούν GPU από προεπιλογή.

Shaders (Vertex, Fragment)

Shaders είναι προγράμματα που εκτελούνται στη GPU. Καθορίζουν πώς εμφανίζεται κάθε αντικείμενο στην οθόνη. Η γραφική αλυσίδα αποτελείται από διάφορα στάδια, αλλά δύο κύρια shaders — Vertex Shader και Fragment Shader — χρησιμοποιούνται στο 99% των περιπτώσεων. Τα shaders γράφονται σε GLSL (OpenGL), MSL (Metal) ή HLSL (DirectX).

Vertex Shader — επεξεργάζεται κορυφές ενός 3D μοντέλου. Είσοδος: θέση κορυφής, κάθετη, συντεταγμένες UV. Έξοδος: μετασχηματισμένη θέση (μοντέλο → προβολή → προβολή). Το Vertex Shader δεν μπορεί να δημιουργήσει ή να διαγράψει κορυφές — μόνο να τις μετασχηματίσει. Fragment Shader — υπολογίζει το χρώμα κάθε pixel (τμήματος) σε ένα ψηφιοποιημένο τρίγωνο. Είσοδος: παρεμβαλλόμενα δεδομένα από το Vertex Shader (UV, κάθετες). Έξοδος: χρώμα RGBA. Το Fragment Shader είναι υπεύθυνο για την υφή, τον φωτισμό (Phong, PBR) και τα εφέ μετά την επεξεργασία. Οι σύγχρονες μηχανές (Unity, Unreal) δημιουργούν shaders αυτόματα, αλλά η κατανόηση της αλυσίδας είναι απαραίτητη για βελτιστοποίηση.

Offscreen Rendering — απόδοση όχι στην οθόνη αλλά σε προσωρινή μνήμη. Χρησιμοποιείται για: 1) εφέ (blur, shadow), 2) απόδοση σε υφή, 3) προϋπολογισμό καρέ. Το Offscreen Rendering είναι ακριβό: εναλλαγή περιβάλλοντος και επιπλέον πέρασμα απόδοσης. Το iOS ενεργοποιεί αυτόματα το Offscreen Rendering για σκιές και cornerRadius. Ψηφιοποίηση — μετατροπή διανυσματικών δεδομένων (κορυφές + shaders) σε pixel. Ο ψηφιοποιητής καθορίζει ποια τμήματα ανήκουν σε ένα τρίγωνο και καλεί το Fragment Shader. Σύνθεση — συναρμολόγηση επιπέδων στην τελική εικόνα. Το Core Animation συνθέτει CALayer, το Android συνθέτει επίπεδα SurfaceFlinger.

CPU — για λογική και Canvas. GPU — για γραφικά και κινούμενα σχέδια. Η IT Sectr συνιστά τη χρήση GPU rendering για οποιοδήποτε κινούμενο περιεχόμενο (κινούμενα σχέδια, μεταβάσεις, κύλιση) — αυτό εξασφαλίζει σταθερά 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — το πλαίσιο της Apple για επιταχυνόμενη απόδοση κινούμενων σχεδίων με GPU. Το βασικό στοιχείο είναι το CALayer: μια ορθογώνια περιοχή με περιεχόμενο (εικόνα, χρώμα, κείμενο). Το CALayer διαχειρίζεται: θέση, μέγεθος, χρώμα φόντου, περίγραμμα, σκιά, cornerRadius και μετασχηματισμούς (2D και 3D). Το Core Animation συνθέτει αυτόματα επίπεδα στη GPU — ο προγραμματιστής δεν χρειάζεται να γράψει κώδικα γραφικών.

CALayer

CALayer — ένα ελαφρύ αντικείμενο (όχι προβολή) που περιέχει ένα bitmap περιεχομένου. UIButton, UILabel, UIImageView — όλα χρησιμοποιούν εσωτερικά CALayer. Ιδιότητες: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Η κίνηση των ιδιοτήτων CALayer συμβαίνει στη GPU — αυτό είναι το κύριο πλεονέκτημα του Core Animation. CALayer.shouldRasterize — ενεργοποιεί την ψηφιοποίηση του επιπέδου για προσωρινή αποθήκευση πολύπλοκων γραφικών. CAShapeLayer — μια υποκλάση για διανυσματικά γραφικά: σχεδιάζει διαδρομή στη GPU. Χρησιμοποιείται για γραμμές προόδου, γραφήματα, μάσκες και κίνηση σχημάτων. CAShapeLayer.path — μια ιδιότητα που μπορεί να κινηθεί (κίνηση μορφοποίησης σχήματος).

Σύνθεση στο Core Animation — η διαδικασία συναρμολόγησης CALayer στο τελικό καρέ. Κάθε CALayer είναι μια ξεχωριστή υφή στη GPU. Η σύνθεση συμβαίνει στο Render Server (μια ξεχωριστή διαδικασία). Ιδιότητες που απαιτούν σύνθεση: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Όσο λιγότερα επίπεδα — τόσο ταχύτερη η σύνθεση.

Βελτιστοποίηση (Overdraw, Offscreen Rendering)

Overdraw — μια κατάσταση όπου το ίδιο pixel βάφεται πολλές φορές σε ένα καρέ. Παράδειγμα: κόκκινο φόντο → μπλε ορθογώνιο → κείμενο. Το κεντρικό pixel σχεδιάζεται 3 φορές. Το Overdraw είναι η κύρια αιτία καθυστέρησης UI, ειδικά σε παλαιότερες συσκευές. iOS: Debug Color Blended Layers (Xcode) — κόκκινες περιοχές = ανάμειξη (overdraw). Android: Debug GPU Overdraw (Επιλογές Προγραμματιστή) — χρώματα από μπλε (1x) έως κόκκινο (3x+).

Overdraw

Πώς να μειώσετε το Overdraw: 1) χρησιμοποιήστε opaque = true για μη διαφανείς προβολές (iOS). 2) Android — χρησιμοποιήστε android:windowBackground μόνο μία φορά. 3) Αφαιρέστε αόρατα επίπεδα. 4) Χρησιμοποιήστε επίπεδη αρχιτεκτονική: φόντο (1 πέρασμα) → περιεχόμενο (2 περάσματα). 5) Αποφύγετε τα περιττά clipChildren και clipToPadding. Offscreen Rendering — απόδοση σε προσωρινή μνήμη πριν από την οθόνη. Ενεργοποιητές: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — κίτρινες περιοχές = offscreen. Στο Android: profile GPU rendering — ελέγξτε το μήκος των ράβδων.

Διανυσματικά Γραφικά (SVG, Vector Drawable)

Διανυσματικά Γραφικά — εικόνες που περιγράφονται από μαθηματικούς τύπους (διαδρομές, καμπύλες, γεμίσματα). Τα διανύσματα δεν χάνουν ποιότητα κατά την κλίμακα — ιδανικά για εικονίδια και εικονογραφήσεις σε εφαρμογές κινητών.

SVG (Scalable Vector Graphics) — πρότυπο W3C. Δεν υποστηρίζεται άμεσα σε κινητά λειτουργικά συστήματα. Μετατρέπεται: σε iOS — σε PDF vector assets (Xcode 12+), σε Android — σε Vector Drawable XML. Vector Drawable — μορφή Android. Ορίζεται σε XML: <vector> με <path> και <group>. Υποστηρίζει κίνηση μέσω AnimatedVectorDrawable. PDF Vector Assets (iOS) — διανυσματικά PDF στο Assets.xcassets. Το Xcode τα μεταγλωττίζει σε υφές βελτιστοποιημένες για GPU. Τα SVG και Vector Drawable δεν υποστηρίζουν πολύπλοκα εφέ (blur, gradient mesh). Για φωτογραφίες και διαβαθμίσεις, χρησιμοποιήστε ψηφιοποιημένα PNG/WebP.