Mobil uygulamalarda Overdraw: nedir, nedenleri ve optimizasyon

Mobil Grafiklerde Overdraw Nedir?

Overdraw, aynı ekran pikselinin tek bir işleme karesi içinde birden çok kez yeniden çizildiği bir durumdur. İdeal bir senaryoda, her piksel tam olarak bir kez yazılmalıdır, ancak gerçek arayüzlerde iç içe geçmiş View'lar, arka plan görüntüleri ve şeffaf katmanlar nedeniyle GPU tekrarlanan yazmalar gerçekleştirir.

Her ek yeniden çizim, kare işleme süresini artırır. Standart 60 FPS hızında, her kare yaklaşık 16,6 ms alır. Overdraw bu sınırın aşılmasına neden olursa, kare hızı 30 FPS veya altına düşer ve arayüz akıcılığını belirgin şekilde bozar.

Google'ın Android Performance Patterns'ına göre, 3x overdraw faktörüne sahip bir uygulama, 1x overdraw'a sahip bir uygulamadan parça gölgelendiricide üç kat daha fazla zaman harcar. Düşük performanslı GPU cihazlarında bu, kaydırma ve animasyon sırasında fark edilir gecikmelere yol açar.

Mobil geliştiriciler için overdraw'ı anlamak kritik derecede önemlidir: bu faktör, çok sayıda iç içe öğeye sahip görünüşte basit ekranlarda en sık takılmalı kaydırma ve düşük kare hızlarına neden olur.

Overdraw GPU Performansını Nasıl Etkiler

GPU hattı birkaç aşamadan oluşur: köşe gölgelendirici, rasterleştirme ve parça gölgelendirici. Parça gölgelendirici en maliyetli kısımdır çünkü her ilkel öğenin her pikseli için çalıştırılır. 2x overdraw'da, parça gölgelendirici iki kat daha fazla piksel işler ve bu da kare süresini doğrudan artırır.

Qualcomm Adreno ve Apple GPU gibi modern mobil GPU'lar, overdraw'ı kısmen telafi eden Early-Z Testi ve Gizli Yüzey Kaldırma mekanizmalarına sahiptir. Ancak bu optimizasyonlar yalnızca belirli koşullar altında çalışır ve yalnızca donanım hızlandırmaya güvenilmemelidir.

Örneğin, yarı saydam öğeleri işlerken donanım Early-Z etkisizdir ve her piksel tamamen işlenir — bu tür senaryolarda overdraw 5x ve daha yükseğe ulaşabilir.

Aşırı Yeniden Çizimin Ana Nedenleri

Çok katmanlı arka planlar, mobil uygulamalarda overdraw'ın ana nedenlerinden biridir. Bir Activity veya ViewController bir arka plan rengi ayarladığında, her iç içe View kendi arka planını ekleyebilir ve piksel her hiyerarşi seviyesinde yeniden çizilir.

Uber Engineering tarafından yapılan bir araştırma, Android uygulamalarındaki aşırı arka planların kaldırılmasının overdraw'ı %32 ve ekran işleme süresini %25 azalttığını gösterdi. iOS'ta da benzer bir durum vardır: opak olmayan View'lar için opaque = true ayarlamak alfa karıştırmayı ortadan kaldırır ve birden çok piksel yazmayı önler.

• Şeffaf bindirmeler — diğer öğelerin üzerinde alfa kanalına sahip öğeler her zaman overdraw'a neden olur.
• ClipChildren=false — alt öğelerin kırpılmasını devre dışı bırakmak, görünmeyen alanların işlenmesine yol açar.
• ShapeDrawable Kullanımı basit renkler yerine parça gölgelendirici üzerindeki yükü artırır.
• Aşırı iç içe geçme — her View hiyerarşisi seviyesi potansiyel bir yeniden çizim katmanı ekler.

iOS platformunda, overdraw genellikle şeffaf UIStackView, shouldRasterize ile CALayer ve örtüşen UIBlurEffect kullanımı nedeniyle oluşur. Apple, XCode'daki Core Animation aracıyla overdraw'ın kontrol edilmesini önerir — yeniden çizim bölgelerini kırmızı bir bindirme olarak gösterir.

Overdraw Nasıl Teşhis Edilir: Araçlar ve Yöntemler

Debug GPU Overdraw, overdraw faktörüne bağlı olarak ekranı farklı renklere boyayan yerleşik bir Android aracıdır. Mor 1x, mavi — 2x, yeşil — 3x, pembe — 4x, kırmızı — 5x veya daha fazlası anlamına gelir. İdeal bir ekran çoğunlukla mor olmalıdır.

iOS'ta benzer teşhis, XCode Instruments'taki Core Animation aracı tarafından gerçekleştirilir. Yeniden çizim bölgelerini görselleştirir ve Color Blended Layers modunda piksel yazma sayısını tam olarak gösterir. Yeşil katmanlar opaktır (optimal), kırmızı olanlar şeffaflık içerir ve overdraw'a neden olur.

• Profile GPU Rendering, Android'de işleme süresinin histogramını gösterir. Uzun yeşil çubuklar overdraw sorunlarını gösterir.
• Renderscript, Android 10+ cihazlarda işleme hattını analiz etmek için daha gelişmiş bir araçtır.
• Metal Debugger, XCode'da her işleme geçişini analiz etmeye ve parça gölgelendirici çağrılarının tam sayısını görmeye olanak tanır.

Teşhisten sonra, optimizasyondan önce ve sonra FPS'yi ölçmek önemlidir. Overdraw'ı düzeltirken 10–15 FPS farkı, listeler ve animasyon içeren karmaşık bir ekran için normal bir sonuçtur.

Mobil Uygulamalarda Overdraw Optimizasyon Teknikleri

Aşırı arka planları kaldırmak en basit ve etkili yöntemdir. Android'de, her View için değil, yalnızca Activity veya tema için android:windowBackground ayarlayın. iOS'ta, tüm opak olmayan UIView için opaque = true, bu öğeler için overdraw'ı neredeyse sıfıra indirir.

Google I/O 2019'a göre, Google Haritalar'daki overdraw optimizasyonu, katman birleştirme ve çizim alanını sınırlamak için ClipRect kullanımı yoluyla kare işleme süresini %40 azalttı. Android geliştiricileri için Google aşağıdaki uygulamaları önerir:

• ClipRect — Canvas çizim alanını sınırlar. Görünür alanın dışında hiçbir şey yoksa, GPU kaynak israf etmez.
• ViewStub — nadiren kullanılan veya ilk yüklemede görünmeyen öğeler için. Bileşen yalnızca inflate çağrıldığında işlenir.
• merge ve include — View hiyerarşisinin derinliğini azaltır, bu da işleme geçiş sayısını düşürür.
• Düz tamponlar — iç içe Layout'ları tek bir ConstraintLayout veya RelativeLayout ile değiştirmek.

iOS'ta optimizasyon, CALayer yapılandırmasıyla elde edilir: masksToBounds = true ayarlamak, katman sınırlarının ötesindeki içeriği kırpar ve shouldRasterize, statik katmanlar için bitmap önbelleğe almayı etkinleştirir.

Kod Örnekleri: Android ve iOS'ta Overdraw'ı Ortadan Kaldırma

Kotlin ve Swift içinde, tipik overdraw giderme senaryolarını gösteren pratik örneklere bakalım. İlk örnek, Android'de ClipRect aracılığıyla optimizasyonu gösterir:

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()
        )
        // Draw content only within clipped area
        super.onDraw(canvas)
    }
}

Swift'teki ikinci örnek, öğe yarı saydam olmamalıysa bir katman için şeffaflığın nasıl devre dışı bırakılacağını gösterir:

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

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

Üçüncü örnek, Android'de ertelenmiş harita yüklemek için ViewStub kullanımını gösterir. ViewStub, görünür hale gelene kadar işlenmez, bu da ekran başlatma aşamasında overdraw'ı ortadan kaldı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" />

// Inflate on demand
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()