Graphics and Rendering in Mobile Development: What It Is, How the Process Works and How It Works

Graphics and Rendering: CPU and GPU Basics

Rendering is the process of converting data (vertices, textures, shaders) into an image on the screen. In mobile devices, rendering can be performed on the CPU (central processor) or GPU (graphics processor). The choice depends on the type of graphics and the required performance.

CPU vs GPU Rendering

CPU Rendering — sequential processing. Each instruction is executed one after another. The CPU is optimized for logic and branching. Canvas (Android), Core Graphics (iOS) work on the CPU. Advantage: precision, support for complex algorithms. Disadvantage: slow with a large number of graphical elements. GPU Rendering — parallel processing. Thousands of GPU cores process vertices and pixels simultaneously. Metal (iOS), Vulkan (Android), OpenGL ES (both platforms) use the GPU. GPU Rendering is mandatory for 3D, 60 FPS animations and complex effects. Modern UI frameworks (SwiftUI, Jetpack Compose, Flutter) use the GPU by default.

Shaders (Vertex, Fragment)

Shaders are programs executed on the GPU. They determine how each object looks on the screen. The graphics pipeline consists of several stages, but two main shaders — Vertex Shader and Fragment Shader — are used in 99% of cases. Shaders are written in GLSL (OpenGL), MSL (Metal) or HLSL (DirectX).

Vertex Shader — processes vertices of a 3D model. Input: vertex position, normal, UV coordinates. Output: transformed position (model → view → projection). Vertex Shader cannot create or delete vertices — only transform them. Fragment Shader — calculates the color of each pixel (fragment) in a rasterized triangle. Input: interpolated data from Vertex Shader (UV, normals). Output: RGBA color. Fragment Shader is responsible for texturing, lighting (Phong, PBR) and post-effects. Modern engines (Unity, Unreal) generate shaders automatically, but understanding the pipeline is necessary for optimization.

Offscreen Rendering — rendering not to the screen but to a temporary buffer. Used for: 1) effects (blur, shadow), 2) render to texture, 3) pre-computing frames. Offscreen Rendering is expensive: context switching and an additional rendering pass. iOS automatically enables Offscreen Rendering for shadows and cornerRadius. Rasterization — converting vector data (vertices + shaders) into pixels. The Rasterizer determines which fragments belong to a triangle and invokes the Fragment Shader. Compositing — assembling layers into the final image. Core Animation composites CALayers, Android composites SurfaceFlinger layers.

CPU — for logic and Canvas. GPU — for graphics and animations. IT Sectr recommends using GPU rendering for any moving content (animations, transitions, scroll) — this ensures stable 60 FPS.

Core Animation (CALayer, CAShapeLayer)

Core Animation — Apple's framework for GPU-accelerated animated rendering. The basic element is CALayer: a rectangular area with content (image, color, text). CALayer manages: position, size, background color, border, shadow, cornerRadius and transformations (2D and 3D). Core Animation automatically composites layers on the GPU — the developer does not need to write graphics code.

CALayer

CALayer — a lightweight object (not a view) that contains a content bitmap. UIButton, UILabel, UIImageView — all use CALayer internally. Properties: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds. Animating CALayer properties happens on the GPU — this is the main advantage of Core Animation. CALayer.shouldRasterize — enables rasterization of the layer for caching complex graphics. CAShapeLayer — a subclass for vector graphics: draws a path on the GPU. Used for progress bars, charts, masks and shape animation. CAShapeLayer.path — an animatable property (shape morphing animation).

Compositing in Core Animation — the process of assembling CALayers into the final frame. Each CALayer is a separate texture on the GPU. Compositing happens in the Render Server (a separate process). Properties requiring compositing: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize. The fewer layers — the faster the compositing.

Optimization (Overdraw, Offscreen Rendering)

Overdraw — a situation where the same pixel is painted multiple times in one frame. Example: red background → blue rectangle → text. The center pixel is drawn 3 times. Overdraw is the main cause of UI lag, especially on older devices. iOS: Debug Color Blended Layers (Xcode) — red areas = blended (overdraw). Android: Debug GPU Overdraw (Developer Options) — colors from blue (1x) to red (3x+).

Overdraw

How to reduce Overdraw: 1) use opaque = true for non-transparent views (iOS). 2) Android — use android:windowBackground only once. 3) Remove invisible layers. 4) Use a layered architecture: background (1 pass) → content (2 passes). 5) Avoid clipChildren and clipToPadding unnecessarily. Offscreen Rendering — rendering to a buffer before the screen. Triggers: shadow (CALayer.shadow*), cornerRadius + masksToBounds, group opacity, shouldRasterize. Xcode: Debug Offscreen Renderer — yellow areas = offscreen. On Android: profile GPU rendering — check bar length.

Vector Graphics (SVG, Vector Drawable)

Vector Graphics — images described by mathematical formulas (paths, curves, fills). Vectors do not lose quality when scaled — ideal for icons and illustrations in mobile applications.

SVG (Scalable Vector Graphics) — W3C standard. Not directly supported in mobile OS. Converted: on iOS — to PDF vector assets (Xcode 12+), on Android — to Vector Drawable XML. Vector Drawable — Android format. Defined in XML: <vector> with <path> and <group>. Supports animation via AnimatedVectorDrawable. PDF Vector Assets (iOS) — vector PDFs in Assets.xcassets. Xcode compiles them into GPU-optimized textures. SVG and Vector Drawable do not support complex effects (blur, gradient mesh). For photos and gradients, use raster PNG/WebP.