Mobil İnkişafda Qrafika və Renderinq: Bu Nədir, Proses Necə İşləyir və Necə Fəaliyyət Göstərir

Qrafika və Renderinq: CPU və GPU Əsasları

Renderinq — məlumatların (təpələr, teksturlar, şeyderlər) ekranda təsvirə çevrilməsi prosesidir. Mobil cihazlarda renderinq CPU (mərkəzi prosessor) və ya GPU (qrafik prosessor) üzərində icra oluna bilər. Seçim qrafika növündən və tələb olunan performansdan asılıdır.

CPU vs GPU Rendering

CPU Rendering — ardıcıl emal. Hər bir təlimat bir-birinin ardınca icra olunur. CPU məntiq və budaqlanma üçün optimallaşdırılıb. Canvas (Android), Core Graphics (iOS) CPU-da işləyir. Üstünlük: dəqiqlik, mürəkkəb alqoritmlərə dəstək. Çatışmazlıq: çox sayda qrafik element olduqda yavaş. GPU Rendering — paralel emal. Minlərlə GPU nüvəsi eyni anda təpələri və pikselləri emal edir. Metal (iOS), Vulkan (Android), OpenGL ES (hər iki platforma) GPU-dan istifadə edir. GPU Rendering 3D, 60 FPS animasiyalar və mürəkkəb effektlər üçün məcburidir. Müasir UI çərçivələri (SwiftUI, Jetpack Compose, Flutter) defolt olaraq GPU-dan istifadə edir.

Şeyderlər (Vertex, Fragment)

Şeyderlər GPU-da icra olunan proqramlardır. Onlar ekranda hər bir obyektin necə göründüyünü müəyyən edir. Qrafik boru kəməri bir neçə mərhələdən ibarətdir, lakin iki əsas şeyder — Vertex Shader və Fragment Shader — 99% hallarda istifadə olunur. Şeyderlər GLSL (OpenGL), MSL (Metal) və ya HLSL (DirectX) dilində yazılır.

Vertex Shader — 3D modelin təpələrini emal edir. Giriş: təpə mövqeyi, normal, UV koordinatları. Çıxış: çevrilmiş mövqe (model → görünüş → proyeksiya). Vertex Shader təpələr yarada və ya silə bilməz — yalnız çevirə bilər. Fragment Shader — rastrlaşdırılmış üçbucaqda hər bir pikselin (fraqmentin) rəngini hesablayır. Giriş: Vertex Shader-dən interpolyasiya olunmuş məlumatlar (UV, normallar). Çıxış: RGBA rəngi. Fragment Shader teksturlama, işıqlandırma (Phong, PBR) və post-effektlərə cavabdehdir. Müasir mühərriklər (Unity, Unreal) şeyderləri avtomatik generasiya edir, lakin optimallaşdırma üçün boru kəmərini başa düşmək lazımdır.

Offscreen Rendering — ekrana deyil, müvəqqəti buferə renderinq. İstifadə olunur: 1) effektlər (blur, shadow), 2) tekstura daxilinə render, 3) kadrların öncədən hesablanması. Offscreen Rendering bahalıdır: kontekst dəyişmə və əlavə renderinq keçidi. iOS kölgələr və cornerRadius üçün avtomatik olaraq Offscreen Rendering-i aktivləşdirir. Rastrlaşdırma — vektor məlumatlarının (təpələr + şeyderlər) piksellərə çevrilməsi. Rastrlaşdırıcı hansı fraqmentlərin üçbucağa aid olduğunu müəyyən edir və Fragment Shader-i çağırır. Kompoziting — təbəqələrin son təsvirdə yığılması. Core Animation CALayer-ları kompozit edir, Android SurfaceFlinger təbəqələrini kompozit edir.

CPU — məntiq və Canvas üçün. GPU — qrafika və animasiyalar üçün. IT Sectr hərəkət edən məzmun (animasiyalar, keçidlər, sürüşdürmə) üçün GPU renderinqindən istifadə etməyi tövsiyə edir — bu sabit 60 FPS təmin edir.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apple-ın GPU sürətləndirməli animasiya renderinq çərçivəsi. Əsas element CALayer-dır: məzmun (şəkil, rəng, mətn) olan düzbucaqlı sahə. CALayer idarə edir: mövqe, ölçü, fon rəngi, haşiyə, kölgə, cornerRadius və çevrilmələr (2D və 3D). Core Animation avtomatik olaraq GPU-da təbəqələri kompozit edir — tərtibatçının qrafik kod yazmasına ehtiyac yoxdur.

CALayer

CALayer — məzmun bitmapı saxlayan yüngül obyekt (görünüş deyil). UIButton, UILabel, UIImageView — hamısı daxildə CALayer istifadə edir. Xüsusiyyətlər: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. CALayer xüsusiyyətlərinin animasiyası GPU-da baş verir — bu Core Animation-ın əsas üstünlüyüdür. CALayer.shouldRasterize — mürəkkəb qrafikanı keşləmək üçün təbəqənin rastrlaşdırılmasını aktivləşdirir. CAShapeLayer — vektor qrafika üçün alt sinif: GPU-da yol çəkir. Proqres çubuqları, qrafiklər, maskalar və forma animasiyası üçün istifadə olunur. CAShapeLayer.path — animasiya oluna bilən xüsusiyyət (forma morfing animasiyası).

Kompoziting Core Animation-da — CALayer-ların son kadrda yığılması prosesi. Hər CALayer GPU-da ayrıca teksturdur. Kompoziting Render Server-də (ayrıca proses) baş verir. Kompoziting tələb edən xüsusiyyətlər: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Nə qədər az təbəqə — bir o qədər sürətli kompoziting.

Optimallaşdırma (Overdraw, Offscreen Rendering)

Overdraw — eyni pikselin bir kadrda dəfələrlə rənglənməsi vəziyyəti. Nümunə: qırmızı fon → mavi düzbucaqlı → mətn. Mərkəzi piksel 3 dəfə çəkilir. Overdraw, xüsusilə köhnə cihazlarda UI ləngiməsinin əsas səbəbidir. iOS: Debug Color Blended Layers (Xcode) — qırmızı sahələr = qarışıq (overdraw). Android: Debug GPU Overdraw (Tərtibatçı Seçimləri) — mavi (1x) qırmızıya (3x+) qədər rənglər.

Overdraw

Overdraw-u necə azaltmaq olar: 1) qeyri-şəffaf görünüşlər üçün opaque = true istifadə edin (iOS). 2) Android — android:windowBackground-dan yalnız bir dəfə istifadə edin. 3) Görünməyən təbəqələri çıxarın. 4) Təbəqəli arxitektura istifadə edin: fon (1 keçid) → məzmun (2 keçid). 5) Lazımsız clipChildren və clipToPadding-dən çəkinin. Offscreen Rendering — ekrandan əvvəl buferə renderinq. Tetikleyicilər: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — sarı sahələr = offscreen. Android-də: profile GPU rendering — çubuq uzunluğunu yoxlayın.

Vektor Qrafika (SVG, Vector Drawable)

Vektor Qrafika — riyazi düsturlarla (yollar, əyrilər, dolgular) təsvir olunan şəkillər. Vektorlar miqyaslandıqda keyfiyyət itirmir — mobil tətbiqlərdə ikonlar və illüstrasiyalar üçün idealdır.

SVG (Scalable Vector Graphics) — W3C standartı. Mobil əməliyyat sistemlərində birbaşa dəstəklənmir. Çevrilir: iOS-da — PDF vektor aktivlərinə (Xcode 12+), Android-də — Vector Drawable XML-ə. Vector Drawable — Android formatı. XML-də təyin olunur: <vector> ilə <path> və <group>. AnimatedVectorDrawable vasitəsilə animasiyanı dəstəkləyir. PDF Vector Assets (iOS) — Assets.xcassets-də vektor PDF-lər. Xcode onları GPU-optimallaşdırılmış teksturlara çevirir. SVG və Vector Drawable mürəkkəb effektləri (blur, gradient mesh) dəstəkləmir. Fotoşəkillər və gradientlər üçün raster PNG/WebP istifadə edin.