Grafika i renderowanie w rozwoju mobilnym: co to jest, jak działa proces i jak to działa

Grafika i renderowanie: podstawy CPU i GPU

Renderowanie to proces przekształcania danych (wierzchołki, tekstury, shadery) w obraz na ekranie. W urządzeniach mobilnych renderowanie może być wykonywane na CPU (procesorze centralnym) lub GPU (procesorze graficznym). Wybór zależy od rodzaju grafiki i wymaganej wydajności.

CPU vs GPU Rendering

CPU Rendering — przetwarzanie sekwencyjne. Każda instrukcja jest wykonywana jedna po drugiej. CPU jest zoptymalizowany pod kątem logiki i rozgałęzień. Canvas (Android), Core Graphics (iOS) działają na CPU. Zaleta: precyzja, obsługa złożonych algorytmów. Wada: wolne przy dużej liczbie elementów graficznych. GPU Rendering — przetwarzanie równoległe. Tysiące rdzeni GPU przetwarzają wierzchołki i piksele jednocześnie. Metal (iOS), Vulkan (Android), OpenGL ES (obie platformy) używają GPU. GPU Rendering jest obowiązkowy dla 3D, animacji 60 FPS i złożonych efektów. Nowoczesne frameworki UI (SwiftUI, Jetpack Compose, Flutter) domyślnie używają GPU.

Shadery (Vertex, Fragment)

Shadery to programy wykonywane na GPU. Określają, jak każdy obiekt wygląda na ekranie. Potok graficzny składa się z kilku etapów, ale dwa główne shadery — Vertex Shader i Fragment Shader — są używane w 99% przypadków. Shadery są pisane w GLSL (OpenGL), MSL (Metal) lub HLSL (DirectX).

Vertex Shader — przetwarza wierzchołki modelu 3D. Wejście: pozycja wierzchołka, normalna, współrzędne UV. Wyjście: przekształcona pozycja (model → widok → projekcja). Vertex Shader nie może tworzyć ani usuwać wierzchołków — tylko je przekształcać. Fragment Shader — oblicza kolor każdego piksela (fragmentu) w zrasteryzowanym trójkącie. Wejście: interpolowane dane z Vertex Shader (UV, normalne). Wyjście: kolor RGBA. Fragment Shader odpowiada za teksturowanie, oświetlenie (Phong, PBR) i post-efekty. Nowoczesne silniki (Unity, Unreal) generują shadery automatycznie, ale zrozumienie potoku jest konieczne do optymalizacji.

Offscreen Rendering — renderowanie nie na ekran, ale do tymczasowego bufora. Używane do: 1) efektów (blur, shadow), 2) renderowania do tekstury, 3) wstępnego obliczania klatek. Offscreen Rendering jest kosztowny: przełączanie kontekstu i dodatkowe przejście renderowania. iOS automatycznie włącza Offscreen Rendering dla cieni i cornerRadius. Rasteryzacja — konwersja danych wektorowych (wierzchołki + shadery) na piksele. Rasteryzator określa, które fragmenty należą do trójkąta i wywołuje Fragment Shader. Compositing — składanie warstw w końcowy obraz. Core Animation komponuje CALayer, Android komponuje warstwy SurfaceFlinger.

CPU — do logiki i Canvas. GPU — do grafiki i animacji. IT Sectr zaleca używanie GPU renderowania dla ruchomych treści (animacje, przejścia, przewijanie) — to zapewnia stabilne 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — framework Apple do animowanego renderowania przyspieszanego przez GPU. Podstawowym elementem jest CALayer: prostokątny obszar z zawartością (obraz, kolor, tekst). CALayer zarządza: pozycją, rozmiarem, kolorem tła, obramowaniem, cieniem, cornerRadius i transformacjami (2D i 3D). Core Animation automatycznie komponuje warstwy na GPU — programista nie musi pisać kodu graficznego.

CALayer

CALayer — lekki obiekt (nie widok), który zawiera bitmapę zawartości. UIButton, UILabel, UIImageView — wszystkie wewnętrznie używają CALayer. Właściwości: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Animacja właściwości CALayer odbywa się na GPU — to główna zaleta Core Animation. CALayer.shouldRasterize — włącza rasteryzację warstwy do buforowania złożonej grafiki. CAShapeLayer — podklasa dla grafiki wektorowej: rysuje ścieżkę na GPU. Używana do pasków postępu, wykresów, masek i animacji kształtów. CAShapeLayer.path — animowalna właściwość (animacja morfingu kształtów).

Compositing w Core Animation — proces składania CALayer w końcową klatkę. Każdy CALayer to osobna tekstura na GPU. Compositing odbywa się w Render Server (oddzielny proces). Właściwości wymagające compositingu: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Im mniej warstw — tym szybszy compositing.

Optymalizacja (Overdraw, Offscreen Rendering)

Overdraw — sytuacja, w której ten sam piksel jest malowany kilka razy w jednej klatce. Przykład: czerwone tło → niebieski prostokąt → tekst. Centralny piksel jest rysowany 3 razy. Overdraw jest główną przyczyną opóźnień UI, szczególnie na starszych urządzeniach. iOS: Debug Color Blended Layers (Xcode) — czerwone obszary = mieszane (overdraw). Android: Debug GPU Overdraw (Opcje programisty) — kolory od niebieskiego (1x) do czerwonego (3x+).

Overdraw

Jak zmniejszyć Overdraw: 1) używaj opaque = true dla nieprzezroczystych widoków (iOS). 2) Android — używaj android:windowBackground tylko raz. 3) Usuwaj niewidoczne warstwy. 4) Używaj warstwowej architektury: tło (1 przejście) → treść (2 przejścia). 5) Unikaj niepotrzebnego clipChildren i clipToPadding. Offscreen Rendering — renderowanie do bufora przed ekranem. Wyzwalacze: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — żółte obszary = offscreen. Na Androidzie: profile GPU rendering — sprawdź długość słupków.

Grafika wektorowa (SVG, Vector Drawable)

Grafika wektorowa — obrazy opisane wzorami matematycznymi (ścieżki, krzywe, wypełnienia). Wektory nie tracą jakości przy skalowaniu — idealne do ikon i ilustracji w aplikacjach mobilnych.

SVG (Scalable Vector Graphics) — standard W3C. Nieobsługiwany bezpośrednio w mobilnych systemach operacyjnych. Konwertowany: na iOS — do PDF vector assets (Xcode 12+), na Android — do Vector Drawable XML. Vector Drawable — format Android. Definiowany w XML: <vector> z <path> i <group>. Obsługuje animację przez AnimatedVectorDrawable. PDF Vector Assets (iOS) — wektorowe PDF w Assets.xcassets. Xcode kompiluje je do tekstur zoptymalizowanych pod GPU. SVG i Vector Drawable nie obsługują złożonych efektów (blur, gradient mesh). Do zdjęć i gradientów używaj rastrowych PNG/WebP.