Overdraw mobil tətbiqlərdə: bu nədir, səbəbləri və optimallaşdırma

Mobil qrafikada Overdraw nədir?

Overdraw — eyni ekran pikselinin bir render kadrı ərzində bir neçə dəfə yenidən çəkildiyi vəziyyətdir. İdeal ssenaridə hər piksel dəqiq bir dəfə yazılmalıdır, lakin real interfeyslərdə iç-içə View-lər, fon şəkilləri və şəffaf təbəqələr səbəbindən GPU təkrar yazmalar həyata keçirir.

Hər əlavə yenidən çəkmə kadr render vaxtını artırır. Standart 60 FPS tezliyində bir kadrın emalına təxminən 16.6 ms ayrılır. Overdraw bu limiti aşarsa, kadr tezliyi 30 FPS və ya daha aşağı düşür ki, bu da interfeysin hamarlığını nəzərəçarpacaq dərəcədə pisləşdirir.

Android Performance Patterns məlumatına görə, overdraw əmsalı 3x olan tətbiq fraqment şaderinə overdraw 1x olan tətbiqdən üç dəfə çox vaxt sərf edir. Aşağı GPU performansı olan cihazlarda bu, sürüşdürmə və animasiya zamanı hiss olunan ləngimələrə səbəb olur.

Mobil tərtibatçılar üçün overdrawı anlamaq kritik əhəmiyyət daşıyır: məhz bu amil çoxlu iç-içə elementləri olan, zahirən sadə ekranlarda ən çox sürüşdürmə əyintilərinə və aşağı kadr tezliyinə səbəb olur.

Overdraw GPU performansına necə təsir edir

GPU konveyeri bir neçə mərhələdən ibarətdir: təpə şaderi, rasterləşdirmə və fraqment şaderi. Fraqment şaderi — ən bahalı hissədir, çünki hər primitivin hər pikseli üçün icra olunur. Overdraw x2-də fraqment şaderi iki dəfə çox piksel emal edir ki, bu da birbaşa kadr vaxtını artırır.

Qualcomm Adreno və Apple GPU kimi müasir mobil GPU-lar Early-Z Test və Hidden Surface Removal mexanizmlərinə malikdir ki, bunlar da overdrawı qismən kompensasiya edir. Lakin bu optimallaşdırmalar yalnız müəyyən şərtlərdə işləyir və yalnız aparat sürətləndirilməsinə güvənmək olmaz.

Məsələn, yarı-şəffaf elementlərin render edilməsi zamanı aparat Early-Z səmərəsizdir və hər piksel tam emal olunur — belə ssenarilərdə overdraw 5x və daha çox ola bilər.

Həddindən artıq yenidən çəkmənin əsas səbəbləri

Çoxqatlı fonlar — mobil tətbiqlərdə overdrawın əsas səbəblərindən biridir. Activity və ya ViewController fon rəngi təyin etdikdə, hər iç-içə View öz fonunu əlavə edə bilər və piksel iyerarxiyanın hər səviyyəsində yenidən çəkilir.

Uber Engineering tədqiqatı göstərdi ki, Android tətbiqində artıq fonların silinməsi overdrawı 32%, ekran render vaxtını isə 25% azaldıb. iOS-da da oxşar vəziyyət: qeyri-şəffaf View-lər üçün opaque = true təyini alfa qarışdırmanı aradan qaldırır və piksellərin təkrar yazılmasının qarşısını alır.

• Şəffaf örtüklər — digər elementlərin üzərində alfa kanalı olan elementlər həmişə overdrawa səbəb olur.
• ClipChildren=false — uşaq elementlərin kəsilməsinin söndürülməsi görünməyən sahələrin render edilməsinə gətirib çıxarır.
• ShapeDrawable istifadəsi sadə rənglər əvəzinə fraqment şaderinin yükünü artırır.
• Həddindən artıq iç-içəlik — View iyerarxiyasının hər səviyyəsi potensial yenidən çəkmə qatı əlavə edir.

iOS platformasında overdraw tez-tez şəffaf UIStackView, shouldRasterize ilə CALayer və üst-üstə düşən UIBlurEffect istifadəsi səbəbindən yaranır. Apple XCode-da Core Animation aləti ilə overdrawı yoxlamağı tövsiyə edir — o, yenidən çəkmə zonalarını qırmızı rəngli örtük şəklində göstərir.

Overdrawı necə diaqnoz etmək olar: alətlər və metodlar

Debug GPU Overdraw — Android-in daxili aləti olub, overdraw çoxluğundan asılı olaraq ekranı müxtəlif rənglərə boyayır. Bənövşəyi rəng 1x, mavi — 2x, yaşıl — 3x, çəhrayı — 4x, qırmızı — 5x və daha çox deməkdir. İdeal ekran əsasən bənövşəyi olmalıdır.

iOS-da oxşar diaqnostikanı XCode Instruments tərkibində Core Animation aləti yerinə yetirir. O, yenidən çəkmə zonalarını vizuallaşdırır və Color Blended Layers rejimində piksel başına yazmaların dəqiq sayını göstərir. Yaşıl təbəqələr — qeyri-şəffaf (optimal), qırmızı — şəffaflıq ehtiva edir və overdrawa səbəb olur.

• Profile GPU Rendering Android-də render vaxtının histoqramını göstərir. Hündür yaşıl sütunlar overdraw problemlərini göstərir.
• Renderscript — Android 10+ olan cihazlarda render konveyerinin təhlili üçün daha təkmil alətdir.
• Metal Debugger XCode-da hər render keçidini təhlil etməyə və fraqment şaderi çağırışlarının dəqiq sayını görməyə imkan verir.

Diaqnostikadan sonra optimallaşdırmadan əvvəl və sonra FPS-i ölçmək vacibdir. Overdrawın düzəldilməsi zamanı 10–15 FPS fərq siyahılar və animasiya olan mürəkkəb ekran üçün normal nəticədir.

Mobil tətbiqlərdə Overdraw optimallaşdırma üsulları

Artıq fonların silinməsi — ən sadə və effektiv üsuldur. Android-də android:windowBackground-ı yalnız Activity və ya tema üçün təyin etmək kifayətdir, hər View üçün yox. iOS-da bütün qeyri-şəffaf UIView-lər üçün opaque = true bu elementlər üçün overdrawı praktiki olaraq sıfıra endirir.

Google I/O 2019 məlumatına görə, Google Maps-də overdraw optimallaşdırması qatların birləşdirilməsi və çəkmə sahəsini məhdudlaşdırmaq üçün ClipRect istifadəsi hesabına kadr render vaxtını 40% azaltmağa imkan verdi. Google Android tərtibatçılarına aşağıdakı təcrübələri tövsiyə edir:

• ClipRect — Canvas çəkmə sahəsini məhdudlaşdırır. Görünən sahədən kənarda heç nə yoxdursa — GPU resurs sərf etmir.
• ViewStub — nadir istifadə olunan və ya yükləmə zamanı görünməyən elementlər üçün. Komponent yalnız inflate çağırışı zamanı render edilir.
• merge və include — View iyerarxiyasının dərinliyini azaldır ki, bu da render keçidlərinin sayını aşağı salır.
• Flat buffers — iç-içə Layout-ların bir ConstraintLayout və ya RelativeLayout ilə əvəz edilməsi.

iOS-da optimallaşdırma CALayer konfiqurasiyası vasitəsilə əldə edilir: masksToBounds = true təyini təbəqə sərhədlərindən kənar məzmunu kəsir, shouldRasterize isə statik təbəqələr üçün raster təsvirin keşləşdirilməsini aktivləşdirir.

Kod nümunələri: Android və iOS-da Overdrawın aradan qaldırılması

Kotlin və Swift-də overdrawın aradan qaldırılmasının tipik ssenarilərini nümayiş etdirən praktiki nümunələrə baxaq. Birinci nümunə Android-də ClipRect vasitəsilə optimallaşdırmanı göstərir:

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()
        )
        // Məzmunu yalnız kəsilmiş sahədə çəkin
        super.onDraw(canvas)
    }
}

İkinci nümunə — Swift-də, element yarı-şəffaf olmamalıdırsa, təbəqə üçün şəffaflığın söndürülməsini göstərir:

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

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

Üçüncü nümunə — Android-də xəritənin gec yüklənməsi üçün ViewStub istifadəsidir. ViewStub görünən olana qədər render edilmir ki, bu da ekranın inisializasiyası mərhələsində overdrawı aradan qaldırır:

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

// Tələb əsasında genişləndir
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()