Compositing: wat is het, lagen en werkingsprincipe

Wat is compositing?

Compositing — is de laatste fase van de grafische pijplijn, waarin alle afzonderlijk gerenderde lagen (3D-scènes, UI-elementen, video, systeeminterface) worden samengevoegd tot één beeld voor weergave op het scherm. Elke laag kan zijn eigen kleur, transparantie (alpha), positie en overvloeivolgorde hebben.

In de context van mobiele ontwikkeling is compositing belangrijk voor de gebruikersinterface: vensters, knoppen, tekst, pictogrammen — al deze elementen worden gecomposite tot één scène. Het compositiesysteem beheert de tekenvolgorde (z-order), correcte overvloeiing van semi-transparante elementen en de overgangsanimaties tussen UI-toestanden.

Compositing in de grafische pijplijn

In de grafische pijplijn vindt compositing plaats na voltooiing van alle shader-passages en rasterisatie. De GPU haalt de gereed zijnde lagen uit framebuffers, past blending-bewerkingen toe en schrijft het resultaat naar de hoofdframebuffer (front buffer) voor verzending naar het beeldscherm.

Hoe werkt compositing?

Compositing maakt gebruik van pixel-voor-pixel-menging (blending) van kleuren uit verschillende lagen. Elke pixel van de uitvoerafbeelding wordt berekend op basis van de kleuren van pixels uit de over elkaar gelegde lagen, rekening houdend met transparantie (alfa-kanaal) en de geselecteerde mengmodus.

Alfa-kanaal en transparantie

Elke laag bevat een alfa-kanaal (de vierde component van de RGBA-kleur) dat de dekking bepaalt. Alpha = 1.0 — volledig dekkend, alpha = 0.0 — volledig transparant. Alpha blending berekent de pixelkleur als een gewogen som van de kleuren van de voorste (source) en achterste (destination) laag: result = source * alpha + dest * (1 - alpha).

Tekenvolgorde (Schildersalgoritme)

Compositing wordt uitgevoerd van de verste laag naar de dichtstbijzijnde (back-to-front). Eerst wordt de achtergrondlaag gerenderd, daarna wordt elke volgende laag over de vorige heen gelegd, rekening houdend met zijn transparantie. Z-order bepaalt welke laag boven ligt en de onderliggende lagen zal bedekken.

Compositing-algoritmen

Compositing ondersteunt verschillende mengmodi (blend modes) die bepalen hoe kleuren van lagen worden gecombineerd. Elke modus geeft een ander visueel effect en heeft zijn eigen rekenkosten.

Premultiplied Alpha

In de premultiplied alpha-modus worden kleurkanalen al vermenigvuldigd met het alfa-kanaal opgeslagen (RGB × A). Dit elimineert de noodzaak van vermenigvuldiging bij elke blending-bewerking, wat compositing versnelt. Premultiplied alpha — de standaardindeling voor GPU-compositing in iOS Core Animation en Android HWUI.

Compositing in mobiele besturingssystemen

Elk mobiel besturingssysteem heeft zijn eigen compositiesysteem, geoptimaliseerd voor zijn hardwareplatform. Compositing in mobiele besturingssystemen is verantwoordelijk voor het renderen van de gehele gebruikersinterface.

iOS: Core Animation + Metal

In iOS wordt compositing beheerd door Core Animation — een hoogwaardig systeem dat werkt op Metal of OpenGL ES. Core Animation creëert een layer tree (lagenboom) die vervolgens wordt gecomposite tot het uiteindelijke beeld. Core Animation detecteert automatisch welke lagen zijn gewijzigd en hertekent alleen deze (incremental compositing), wat de belasting van de GPU minimaliseert.

Android: SurfaceFlinger + HWUI

In Android wordt compositing uitgevoerd door SurfaceFlinger — een systeemdienst die oppervlakken (surfaces) van verschillende applicaties en de systeeminterface combineert. SurfaceFlinger gebruikt HWC (Hardware Composer) om een deel van het compositiewerk over te dragen aan de speciale hardware van de beeldschermcontroller.

Prestaties van compositing

Prestaties van compositing — een veelvoorkomende bottleneck in mobiele applicaties, vooral bij complexe animaties en het over elkaar heen leggen van meerdere semi-transparante lagen. Elke extra laag vereist het lezen, mengen en schrijven van pixels in het geheugen.

Factoren die de prestaties beïnvloeden

• Aantal lagen — elke laag vereist een aparte blending-pass. Het verminderen van het aantal lagen versnelt compositing lineair.
• Resolutie van lagen — lagen met hoge resolutie verhogen het aantal te verwerken pixels. Gebruik de minimaal mogelijke grootte van offscreen-buffers.
• Transparantie en overdraw — semi-transparante lagen vereisen het lezen van onderliggende pixels, wat de bandbreedte verhoogt.
• CPU compositing — als compositing op de CPU wordt uitgevoerd (software rendering), dalen de prestaties drastisch. GPU-compositing heeft altijd de voorkeur.

GPU Compositing vs CPU Compositing

Moderne mobiele apparaten voeren compositing uit op de GPU via gespecialiseerde blending-blokken. GPU-compositing gebruikt parallelle ROP-blokken en textuurfilters voor snelle pixelmenging. CPU-compositing wordt alleen in zeldzame gevallen gebruikt (oude apparaten, testen).

Optimalisatie van compositing

Optimalisatie van compositing — een van de belangrijkste taken bij het ontwikkelen van mobiele interfaces. De vloeiendheid van de UI (60 FPS) hangt direct af van de efficiëntie van het combineren van lagen.

Belangrijkste optimalisatiemethoden

• Minimaliseren van lagen — het samenvoegen van statische lagen tot één (layer flattening) via vooraf renderen.
• Opaque layers — niet-transparante lagen vereisen geen alpha blending, wat compositing aanzienlijk versnelt.
• Incremental compositing — alleen gewijzigde lagen hertekenen, niet de hele scène (gebruikt door Core Animation).
• Hardware Composer — gebruik van HWC voor hardware-compositing zonder GPU.

Profileringstools

Voor het analyseren van compositing-prestaties gebruik je: Core Animation Profiler (Xcode Instruments) — toont het aantal lagen en de compositing-frequentie; GPU Debugger (Android Studio) — geeft GPU-belasting en overdraw weer; Overdraw Visualisation — een debugtool die gebieden met meerdere pixelhertekeningen toont.