Grafik und Rendering in der mobilen Entwicklung: Was es ist, wie der Prozess funktioniert und wie es arbeitet

Grafik und Rendering: Grundlagen von CPU und GPU

Rendering ist der Prozess der Umwandlung von Daten (Vertices, Texturen, Shader) in ein Bild auf dem Bildschirm. In mobilen Geräten kann das Rendering auf der CPU (Hauptprozessor) oder GPU (Grafikprozessor) durchgeführt werden. Die Wahl hängt von der Art der Grafik und der erforderlichen Leistung ab.

CPU vs GPU Rendering

CPU Rendering — sequentielle Verarbeitung. Jede Anweisung wird nacheinander ausgeführt. Die CPU ist für Logik und Verzweigungen optimiert. Canvas (Android), Core Graphics (iOS) arbeiten auf der CPU. Vorteil: Präzision, Unterstützung komplexer Algorithmen. Nachteil: langsam bei vielen grafischen Elementen. GPU Rendering — parallele Verarbeitung. Tausende GPU-Kerne verarbeiten Vertices und Pixel gleichzeitig. Metal (iOS), Vulkan (Android), OpenGL ES (beide Plattformen) nutzen die GPU. GPU Rendering ist für 3D, 60 FPS-Animationen und komplexe Effekte obligatorisch. Moderne UI-Frameworks (SwiftUI, Jetpack Compose, Flutter) verwenden standardmäßig die GPU.

Shader (Vertex, Fragment)

Shader sind auf der GPU ausgeführte Programme. Sie bestimmen, wie jedes Objekt auf dem Bildschirm aussieht. Die Grafikpipeline besteht aus mehreren Stufen, aber zwei Haupt-Shader — Vertex Shader und Fragment Shader — werden in 99% der Fälle verwendet. Shader werden in GLSL (OpenGL), MSL (Metal) oder HLSL (DirectX) geschrieben.

Vertex Shader — verarbeitet Vertices eines 3D-Modells. Eingabe: Vertex-Position, Normale, UV-Koordinaten. Ausgabe: transformierte Position (Modell → Ansicht → Projektion). Vertex Shader kann keine Vertices erstellen oder löschen — nur transformieren. Fragment Shader — berechnet die Farbe jedes Pixels (Fragments) in einem rasterisierten Dreieck. Eingabe: interpolierte Daten vom Vertex Shader (UV, Normalen). Ausgabe: RGBA-Farbe. Fragment Shader ist verantwortlich für Texturierung, Beleuchtung (Phong, PBR) und Post-Effekte. Moderne Engines (Unity, Unreal) generieren Shader automatisch, aber das Verständnis der Pipeline ist für die Optimierung notwendig.

Offscreen Rendering — Rendering nicht auf den Bildschirm, sondern in einen temporären Puffer. Verwendet für: 1) Effekte (Blur, Shadow), 2) Render-to-Texture, 3) Vorberechnung von Frames. Offscreen Rendering ist teuer: Kontextwechsel und ein zusätzlicher Rendering-Durchlauf. iOS aktiviert automatisch Offscreen Rendering für Schatten und cornerRadius. Rasterisierung — Umwandlung von Vektordaten (Vertices + Shader) in Pixel. Der Rasterizer bestimmt, welche Fragmente zu einem Dreieck gehören und ruft den Fragment Shader auf. Compositing — Zusammenfügen von Ebenen zum endgültigen Bild. Core Animation komponiert CALayer, Android komponiert SurfaceFlinger-Ebenen.

CPU — für Logik und Canvas. GPU — für Grafik und Animationen. IT Sectr empfiehlt die Verwendung von GPU-Rendering für bewegte Inhalte (Animationen, Übergänge, Scroll) — dies gewährleistet stabile 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apples Framework für GPU-beschleunigtes animiertes Rendering. Das Basiselement ist CALayer: ein rechteckiger Bereich mit Inhalt (Bild, Farbe, Text). CALayer verwaltet: Position, Größe, Hintergrundfarbe, Rand, Schatten, cornerRadius und Transformationen (2D und 3D). Core Animation komponiert Ebenen automatisch auf der GPU — der Entwickler muss keinen Grafikcode schreiben.

CALayer

CALayer — ein leichtgewichtiges Objekt (keine View), das eine Inhalts-Bitmap enthält. UIButton, UILabel, UIImageView — alle verwenden intern CALayer. Eigenschaften: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Die Animation von CALayer-Eigenschaften erfolgt auf der GPU — das ist der Hauptvorteil von Core Animation. CALayer.shouldRasterize — aktiviert die Rasterisierung der Ebene zum Zwischenspeichern komplexer Grafiken. CAShapeLayer — eine Unterklasse für Vektorgrafiken: zeichnet einen Pfad auf der GPU. Verwendet für Fortschrittsbalken, Diagramme, Masken und Formanimationen. CAShapeLayer.path — eine animierbare Eigenschaft (Form-Morphing-Animation).

Compositing in Core Animation — der Prozess der Zusammenstellung von CALayern zum endgültigen Frame. Jeder CALayer ist eine separate Textur auf der GPU. Compositing erfolgt im Render Server (einem separaten Prozess). Eigenschaften, die Compositing erfordern: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. Je weniger Ebenen — desto schneller das Compositing.

Optimierung (Overdraw, Offscreen Rendering)

Overdraw — eine Situation, in der dasselbe Pixel in einem Frame mehrmals gefärbt wird. Beispiel: roter Hintergrund → blaues Rechteck → Text. Das zentrale Pixel wird 3 Mal gezeichnet. Overdraw ist die Hauptursache für UI-Verzögerungen, insbesondere auf älteren Geräten. iOS: Debug Color Blended Layers (Xcode) — rote Bereiche = gemischt (Overdraw). Android: Debug GPU Overdraw (Entwickleroptionen) — Farben von Blau (1x) bis Rot (3x+).

Overdraw

Wie man Overdraw reduziert: 1) Verwenden Sie opaque = true für undurchsichtige Views (iOS). 2) Android — verwenden Sie android:windowBackground nur einmal. 3) Entfernen Sie unsichtbare Ebenen. 4) Verwenden Sie eine geschichtete Architektur: Hintergrund (1 Durchlauf) → Inhalt (2 Durchläufe). 5) Vermeiden Sie unnötig clipChildren und clipToPadding. Offscreen Rendering — Rendering in einen Puffer vor dem Bildschirm. Auslöser: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — gelbe Bereiche = offscreen. Auf Android: profile GPU rendering — überprüfen Sie die Balkenlänge.

Vektorgrafik (SVG, Vector Drawable)

Vektorgrafik — Bilder, die durch mathematische Formeln (Pfade, Kurven, Füllungen) beschrieben werden. Vektoren verlieren beim Skalieren keine Qualität — ideal für Symbole und Illustrationen in mobilen Anwendungen.

SVG (Scalable Vector Graphics) — W3C-Standard. Wird in mobilen Betriebssystemen nicht direkt unterstützt. Konvertierung: auf iOS — in PDF-Vektor-Assets (Xcode 12+), auf Android — in Vector Drawable XML. Vector Drawable — Android-Format. Definiert in XML: <vector> mit <path> und <group>. Unterstützt Animation über AnimatedVectorDrawable. PDF Vector Assets (iOS) — Vektor-PDFs in Assets.xcassets. Xcode kompiliert sie in GPU-optimierte Texturen. SVG und Vector Drawable unterstützen keine komplexen Effekte (Blur, Gradient Mesh). Verwenden Sie für Fotos und Verläufe Raster-PNG/WebP.