Overdraw în aplicațiile mobile: ce este, cauze și optimizare

Ce este Overdraw în grafica mobilă?

Overdraw — este situația în care același pixel al ecranului este redat de mai multe ori în timpul unui singur cadru de randare. În scenariul ideal, fiecare pixel ar trebui scris o singură dată, dar în interfețele reale, din cauza View-urilor imbricate, imaginilor de fundal și straturilor transparente, GPU-ul execută scrieri repetate.

Fiecare redare suplimentară crește timpul de randare al cadrului. La o rată standard de 60 FPS, procesarea unui cadru are aproximativ 16.6 ms. Dacă overdraw duce la depășirea acestei limite, rata de cadre scade la 30 FPS sau mai puțin, ceea ce înrăutățește vizibil fluiditatea interfeței.

Conform Android Performance Patterns de la Google, o aplicație cu un coeficient de overdraw de 3x pierde de trei ori mai mult timp pe shader-ul de fragmente decât o aplicație cu overdraw 1x. Pe dispozitivele cu performanță scăzută a GPU-ului, aceasta duce la întârzieri sesizabile la derulare și animații.

Pentru dezvoltatorii mobili, înțelegerea overdraw este critică: tocmai acest factor cauzează cel mai frecvent derularea sacadată și rata scăzută de cadre pe ecrane aparent simple cu un număr mare de elemente imbricate.

Cum afectează Overdraw performanța GPU-ului

Conducta GPU-ului constă din mai multe etape: shader de vârf, rasterizare și shader de fragmente. Shader-ul de fragmente — cea mai costisitoare parte, deoarece este executat pentru fiecare pixel al fiecărui primitiv. La overdraw x2, shader-ul de fragmente procesează de două ori mai mulți pixeli, ceea ce crește direct timpul cadrului.

GPU-urile mobile moderne, precum Qualcomm Adreno și Apple GPU, au mecanisme Early-Z Test și Hidden Surface Removal care compensează parțial overdraw. Cu toate acestea, aceste optimizări funcționează doar în anumite condiții și nu trebuie să te bazezi exclusiv pe accelerarea hardware.

De exemplu, la randarea elementelor semitransparente, Early-Z hardware este ineficient, iar fiecare pixel este procesat complet — overdraw în astfel de scenarii poate atinge 5x și mai mult.

Principalele cauze ale redării excesive

Fundalurile multistrat — una dintre principalele cauze ale overdraw în aplicațiile mobile. Când Activity sau ViewController setează o culoare de fundal, fiecare View imbricat poate adăuga propriul fundal, iar pixelul este redat la fiecare nivel al ierarhiei.

Cercetarea Uber Engineering a arătat că eliminarea fundalurilor excedentare în aplicația lor Android a redus overdraw cu 32%, iar timpul de randare a ecranului — cu 25%. Situație similară în iOS: setarea opaque = true pentru View-urile opace elimină amestecarea alfa și previne scrierea multiplă a pixelilor.

• Suprapunerile transparente — elementele cu canal alfa peste alte elemente provoacă întotdeauna overdraw.
• ClipChildren=false — dezactivarea decupării elementelor copil duce la randarea zonelor invizibile.
• Utilizarea ShapeDrawable în locul culorilor simple crește încărcarea shader-ului de fragmente.
• Imbricarea excesivă — fiecare nivel al ierarhiei View adaugă un potențial strat de redare.

Pe platforma iOS, overdraw apare adesea din cauza utilizării UIStackView transparente, CALayer cu shouldRasterize și UIBlurEffect suprapuse. Apple recomandă verificarea overdraw prin instrumentul Core Animation din XCode — acesta arată zonele de redare ca o suprapunere de culoare roșie.

Cum să diagnostichezi Overdraw: instrumente și metode

Debug GPU Overdraw — instrumentul încorporat Android care colorează ecranul în diferite culori în funcție de multiplicitatea overdraw. Culoarea violetă înseamnă 1x, albastru — 2x, verde — 3x, roz — 4x, roșu — 5x și mai mult. Ecranul ideal ar trebui să fie preponderent violet.

În iOS, o diagnosticare similară este efectuată de instrumentul Core Animation din cadrul XCode Instruments. Acesta vizualizează zonele de redare și arată numărul exact de scrieri per pixel în modul Color Blended Layers. Straturile verzi — opace (optimale), roșii — conțin transparență și provoacă overdraw.

• Profile GPU Rendering în Android arată histograma timpului de randare. Coloanele verzi înalte indică probleme cu overdraw.
• Renderscript — un instrument mai avansat pentru analiza conductei de randare pe dispozitivele cu Android 10+.
• Metal Debugger în XCode permite analizarea fiecărei treceri de randare și vizualizarea numărului exact de apeluri ale shader-ului de fragmente.

După diagnosticare, este important să măsori FPS-ul înainte și după optimizare. O diferență de 10–15 FPS la corectarea overdraw este un rezultat normal pentru un ecran complex cu liste și animații.

Tehnici de optimizare Overdraw în aplicațiile mobile

Eliminarea fundalurilor excedentare — cea mai simplă și eficientă metodă. În Android, este suficient să setezi android:windowBackground doar pentru Activity sau temă, nu pentru fiecare View. În iOS, opaque = true pentru toate UIView-urile opace reduce overdraw practic la zero pentru aceste elemente.

Conform Google I/O 2019, optimizarea overdraw în Google Maps a permis reducerea timpului de randare a cadrului cu 40% prin combinarea straturilor și utilizarea ClipRect pentru limitarea zonei de desenare. Google recomandă dezvoltatorilor Android următoarele practici:

• ClipRect — limitează zona de desenare a Canvas-ului. Dacă în afara zonei vizibile nu există nimic — GPU-ul nu consumă resurse.
• ViewStub — pentru elementele rar utilizate sau invizibile la încărcare. Componentul este randat doar la apelarea inflate.
• merge și include — reduc adâncimea ierarhiei View, ceea ce scade numărul de treceri de randare.
• Flat buffers — înlocuirea Layout-urilor imbricate cu un singur ConstraintLayout sau RelativeLayout.

În iOS, optimizarea se realizează prin configurarea CALayer: setarea masksToBounds = true decupează conținutul în afara limitelor stratului, iar shouldRasterize activează memorarea în cache a reprezentării raster pentru straturile statice.

Exemple de cod: eliminarea Overdraw în Android și iOS

Să examinăm exemple practice în Kotlin și Swift, care demonstrează scenarii tipice de eliminare a overdraw. Primul exemplu arată optimizarea prin ClipRect în Android:

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()
        )
        // Desenează conținutul doar în zona decupată
        super.onDraw(canvas)
    }
}

Al doilea exemplu — în Swift, arată dezactivarea transparenței pentru strat, dacă elementul nu trebuie să fie semitransparent:

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

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

Al treilea exemplu — utilizarea ViewStub pentru încărcarea întârziată a hărții în Android. ViewStub nu este randat până când nu devine vizibil, ceea ce elimină overdraw în etapa de inițializare a ecranului:

<!-- 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" />

// Inflatează la cerere
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()