Overdraw v mobilních aplikacích: co to je, příčiny a optimalizace

Co je Overdraw v mobilní grafice?

Overdraw — je situace, kdy je stejný pixel obrazovky překreslován několikrát během jednoho vykreslovacího snímku. V ideálním scénáři by měl být každý pixel zapsán přesně jednou, ale v reálných rozhraních kvůli vnořeným View, obrázkům na pozadí a průhledným vrstvám GPU provádí opakované zápisy.

Každé další překreslení zvyšuje čas vykreslení snímku. Při standardní frekvenci 60 FPS je na zpracování jednoho snímku vyhrazeno přibližně 16.6 ms. Pokud overdraw způsobí překročení tohoto limitu, snímková frekvence klesne na 30 FPS nebo níže, což znatelně zhoršuje plynulost rozhraní.

Podle Android Performance Patterns od Google, aplikace s koeficientem overdraw 3x tráví třikrát více času na fragment shaderu než aplikace s overdraw 1x. Na zařízeních s nízkým výkonem GPU to vede k znatelným lagům při rolování a animacích.

Pro mobilní vývojáře je pochopení overdraw kriticky důležité: právě tento faktor nejčastěji způsobuje trhavé rolování a nízkou snímkovou frekvenci na zdánlivě jednoduchých obrazovkách s velkým počtem vnořených prvků.

Jak Overdraw ovlivňuje výkon GPU

Potrubí GPU se skládá z několika fází: vertex shader, rasterizace a fragment shader. Fragment shader — nejnákladnější část, protože se provádí pro každý pixel každého primitiva. Při overdraw x2 fragment shader zpracovává dvakrát více pixelů, což přímo zvyšuje čas snímku.

Moderní mobilní GPU, jako Qualcomm Adreno a Apple GPU, mají mechanismy Early-Z Test a Hidden Surface Removal, které částečně kompenzují overdraw. Tyto optimalizace však fungují pouze za určitých podmínek a neměli byste se spoléhat výhradně na hardwarovou akceleraci.

Například při vykreslování poloprůhledných prvků je hardwarový Early-Z neúčinný a každý pixel je zpracován zcela — overdraw v takových scénářích může dosáhnout 5x a více.

Hlavní příčiny nadměrného překreslování

Vícevrstvá pozadí — jedna z hlavních příčin overdraw v mobilních aplikacích. Když Activity nebo ViewController nastaví barvu pozadí, každé vnořené View může přidat vlastní pozadí a pixel je překreslován na každé úrovni hierarchie.

Výzkum Uber Engineering ukázal, že odstranění nadbytečných pozadí v jejich Android aplikaci snížilo overdraw o 32% a čas vykreslení obrazovky — o 25%. Podobná situace v iOS: nastavení opaque = true pro neprůhledná View eliminuje alfa míchání a zabraňuje vícenásobnému zápisu pixelů.

• Průhledné překryvy — prvky s alfa kanálem nad jinými prvky vždy způsobují overdraw.
• ClipChildren=false — vypnutí ořezávání podřízených prvků vede k vykreslování neviditelných oblastí.
• Použití ShapeDrawable místo jednoduchých barev zvyšuje zatížení fragment shaderu.
• Nadměrné vnořování — každá úroveň hierarchie View přidává potenciální vrstvu překreslení.

Na platformě iOS overdraw často vzniká kvůli použití průhledných UIStackView, CALayer s shouldRasterize a překrývajících se UIBlurEffect. Apple doporučuje kontrolovat overdraw pomocí nástroje Core Animation v XCode — zobrazuje zóny překreslení jako červený překryv.

Jak diagnostikovat Overdraw: nástroje a metody

Debug GPU Overdraw — vestavěný nástroj Androidu, který barví obrazovku do různých barev v závislosti na násobnosti overdraw. Fialová barva znamená 1x, modrá — 2x, zelená — 3x, růžová — 4x, červená — 5x a více. Ideální obrazovka by měla být převážně fialová.

V iOS provádí podobnou diagnostiku nástroj Core Animation v rámci XCode Instruments. Vizualizuje zóny překreslení a ukazuje přesný počet zápisů na pixel v režimu Color Blended Layers. Zelené vrstvy — neprůhledné (optimální), červené — obsahují průhlednost a způsobují overdraw.

• Profile GPU Rendering v Androidu zobrazuje histogram času vykreslování. Vysoké zelené sloupce naznačují problémy s overdraw.
• Renderscript — pokročilejší nástroj pro analýzu potrubí vykreslování na zařízeních s Android 10+.
• Metal Debugger v XCode umožňuje analyzovat každý průchod vykreslování a vidět přesný počet volání fragment shaderu.

Po diagnostice je důležité změřit FPS před a po optimalizaci. Rozdíl 10–15 FPS při opravě overdraw je normální výsledek pro složitou obrazovku se seznamy a animacemi.

Techniky optimalizace Overdraw v mobilních aplikacích

Odstranění nadbytečných pozadí — nejjednodušší a nejúčinnější metoda. V Androidu stačí nastavit android:windowBackground pouze pro Activity nebo téma, ne pro každé View. V iOS opaque = true pro všechna neprůhledná UIView snižuje overdraw prakticky na nulu pro tyto prvky.

Podle Google I/O 2019 umožnila optimalizace overdraw v Google Maps snížit čas vykreslení snímku o 40% díky sloučení vrstev a použití ClipRect pro omezení oblasti kreslení. Google doporučuje vývojářům Androidu následující postupy:

• ClipRect — omezuje oblast kreslení Canvas. Pokud mimo viditelnou oblast nic není — GPU neplýtvá prostředky.
• ViewStub — pro zřídka používané nebo při načítání neviditelné prvky. Komponenta se vykresluje pouze při volání inflate.
• merge a include — snižují hloubku hierarchie View, což snižuje počet průchodů vykreslování.
• Flat buffers — nahrazení vnořených Layout jedním ConstraintLayout nebo RelativeLayout.

V iOS je optimalizace dosažena konfigurací CALayer: nastavení masksToBounds = true ořezává obsah mimo hranice vrstvy a shouldRasterize zapíná ukládání rastrové reprezentace do mezipaměti pro statické vrstvy.

Příklady kódu: odstranění Overdraw v Android a iOS

Podívejme se na praktické příklady v Kotlin a Swift, které demonstrují typické scénáře odstranění overdraw. První příklad ukazuje optimalizaci pomocí ClipRect v Androidu:

class OptimizedView@JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : View(context, attrs) {

    override fun onDraw(canvas: Canvas) {
        canvas.clipRect(
            paddingLeft.toFloat(), paddingTop.toFloat(),
            width - paddingRight.toFloat(), height - paddingBottom.toFloat()
        )
        // Kreslit obsah pouze v oříznuté oblasti
        super.onDraw(canvas)
    }
}

Druhý příklad — ve Swift, ukazuje vypnutí průhlednosti pro vrstvu, pokud prvek nemá být poloprůhledný:

class OpaqueLabel: UILabel {
    override var isOpaque: Bool {
        get { true }
        set { }
    }

    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        super.draw(rect)
    }
}

Třetí příklad — použití ViewStub pro odložené načtení mapy v Androidu. ViewStub se nevykresluje, dokud se nestane viditelným, což eliminuje overdraw ve fázi inicializace obrazovky:

<!-- layout/activity_main.xml -->
<ViewStub
    android:id="@+id/map_stub"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:inflatedId="@+id/map_container"
    android:layout="@layout/map_fragment" />

// Rozbalit na požádání
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()