Compositing: what it is, layers and working principle
Compositing is the process of combining multiple visual layers into a single final image. According to Apple Core Animation Documentation, 2025, in mobile development compositing is used for overlaying UI layers, merging 3D renders with the interface, and creating animations. Compositing controls the drawing order, transparency, and color blending between layers.
Key Takeaways
- Compositing — combining separate visual layers into a final image.
- Alpha blending — the primary blending algorithm that accounts for layer transparency.
- GPU compositing — performed on the GPU via ROP block blending operations.
- Core Animation (iOS) and HWUI (Android) — compositing systems in mobile OSes.
- Optimization of compositing is critical for smooth UI and animations at 60 FPS.
What is Compositing?
Compositing is the final stage of the graphics pipeline where all separately rendered layers (3D scenes, UI elements, video, system interface) are combined into a single image for display on screen. Each layer can have its own color, transparency (alpha), position, and stacking order.
In the context of mobile development, compositing is important for the user interface: windows, buttons, text, icons — all these elements are composited into a single scene. The compositing system manages the drawing order (z-order), correct overlapping of semi-transparent elements, and transition animation between UI states.
Compositing in the Graphics Pipeline
In the graphics pipeline, compositing occurs after all shader passes and rasterization are complete. The GPU takes finished layers from framebuffers, applies blending operations, and writes the result to the main framebuffer (front buffer) for display output.
How Does Compositing Work?
Compositing uses per-pixel blending of colors from different layers. Each output image pixel is calculated based on pixel colors from the overlaid layers, taking into account transparency (alpha channel) and the selected blending mode.
Alpha Channel and Transparency
Each layer contains an alpha channel (the fourth RGBA color component) that determines its opacity. Alpha = 1.0 — fully opaque, alpha = 0.0 — fully transparent. Alpha blending computes the pixel color as a weighted sum of the foreground (source) and background (destination) layer colors: result = source * alpha + dest * (1 - alpha).
Drawing Order (Painter's Algorithm)
Compositing is performed from the farthest layer to the nearest (back-to-front). First, the background layer is rendered, then each subsequent layer is overlaid on top of the previous one with its transparency taken into account. Z-order determines which layer is above and will cover the ones below.
Compositing Algorithms
Compositing supports various blend modes that determine how layer colors are combined. Each mode produces a different visual effect and has its own computational cost.
| Mode | Formula | Application |
|---|---|---|
| Normal (Alpha) | src * a + dst * (1 - a) | Standard overlay with transparency |
| Additive | src + dst | Glow effects, particles |
| Multiply | src * dst | Shading, shadows |
| Screen | 1 - (1 - src) * (1 - dst) | Lightening, highlights |
| Premultiplied Alpha | (src.rgb * a) + dst * (1 - a) | Performance (no runtime multiplication) |
Premultiplied Alpha
In premultiplied alpha mode, color channels are stored already multiplied by the alpha channel (RGB × A). This eliminates the need for multiplication on each blending operation, speeding up compositing. Premultiplied alpha is the standard format for GPU compositing in iOS Core Animation and Android HWUI.
Compositing in Mobile OSes
Each mobile operating system has its own compositing system optimized for its hardware platforms. Compositing in mobile OSes is responsible for rendering the entire user interface.
iOS: Core Animation + Metal
On iOS, compositing is managed by Core Animation — a high-level system running on top of Metal or OpenGL ES. Core Animation creates a layer tree that is then composited into the final image. Core Animation automatically determines which layers have changed and redraws only those (incremental compositing), minimizing GPU load.
Android: SurfaceFlinger + HWUI
On Android, compositing is performed by SurfaceFlinger — a system service that combines surfaces from various applications and the system UI. SurfaceFlinger uses HWC (Hardware Composer) to offload part of the compositing work to dedicated hardware on the display controller.
Compositing Performance
Compositing performance is a common bottleneck in mobile applications, especially with complex animations and many semi-transparent layers. Each additional layer requires reading, blending, and writing pixels to memory.
Factors Affecting Performance
- Number of layers — each layer requires a separate blending pass. Reducing the number of layers speeds up compositing linearly.
- Layer resolution — high-resolution layers increase the number of pixels processed. Use the smallest possible offscreen buffer size.
- Transparency and overdraw — semi-transparent layers require reading underlying pixels, increasing bandwidth.
- CPU compositing — if compositing is done on the CPU (software rendering), performance drops dramatically. GPU compositing is always preferable.
GPU Compositing vs CPU Compositing
Modern mobile devices perform compositing on the GPU through specialized blending units. GPU compositing uses parallel ROP units and texture filters for fast pixel blending. CPU compositing is used only in rare cases (old devices, testing).
Compositing Optimization
Compositing optimization is one of the key tasks in mobile interface development. UI smoothness (60 FPS) directly depends on the efficiency of layer combination.
Main Optimization Methods
- Layer minimization — combining static layers into one (layer flattening) through pre-rendering.
- Opaque layers — opaque layers do not require alpha blending, significantly speeding up compositing.
- Incremental compositing — redrawing only changed layers rather than the entire scene (used by Core Animation).
- Hardware Composer — using HWC for hardware compositing without GPU involvement.
Profiling Tools
For compositing performance analysis, use: Core Animation Profiler (Xcode Instruments) — shows layer count and compositing frequency; GPU Debugger (Android Studio) — displays GPU load and overdraw; Overdraw Visualization — a debugging tool that shows areas of repeated pixel redraw.
Frequently Asked Questions
What is compositing in simple terms?
Compositing is like stacking several transparent sheets with drawings into one picture. Each sheet is a layer (button, background, text), and transparency determines how layers show through each other.
What is the difference between rendering and compositing?
Rendering — creating the content of each layer (drawing a button, texturing a 3D model). Compositing — combining finished layers into the final image considering transparency and stacking order.
How does compositing affect iOS performance?
Core Animation composites layers on the GPU via Metal. Problems arise with a large number of semi-transparent layers (overdraw) or with CPU compositing (off-screen rendering). Use Core Animation Profiler for diagnostics.
What is Hardware Composer in Android?
Hardware Composer (HWC) is a hardware module of the display controller that performs compositing without loading the GPU. HWC can combine up to 4-8 layers in hardware, reducing power consumption and freeing the GPU for other tasks.
How to reduce compositing load?
Combine static layers (layer flattening), use opaque colors where possible, reduce offscreen buffer sizes, and avoid unnecessary animations that cause recompositing of the entire scene.
Summary
- Compositing — the final stage of combining all visual layers into the final screen image.
- Alpha blending — the primary color blending algorithm considering transparency (RGBA).
- Premultiplied alpha — the standard GPU compositing format that eliminates extra multiplications.
- Core Animation (iOS) and SurfaceFlinger (Android) — mobile OS compositing systems.
- Number of semi-transparent layers — the main factor affecting compositing performance.
- Hardware Composer — Android hardware block for compositing without GPU.
- Optimization includes layer flattening, using opaque layers, and incremental compositing.
We will develop a mobile application turnkey
IT Sectr creates iOS and Android applications for startups and businesses since 2017. We will advise you and propose the best solution.
Read also