Overdraw w aplikacjach mobilnych: co to jest, przyczyny i optymalizacja

Czym jest Overdraw w grafice mobilnej?

Overdraw — to sytuacja, w której ten sam piksel ekranu jest przerysowywany kilka razy w ciągu jednej klatki renderowania. W idealnym scenariuszu każdy piksel powinien być zapisywany dokładnie raz, ale w rzeczywistych interfejsach z powodu zagnieżdżonych View, obrazów tła i przezroczystych warstw GPU wykonuje wielokrotne zapisy.

Każde dodatkowe przerysowanie zwiększa czas renderowania klatki. Przy standardowej częstotliwości 60 FPS na przetworzenie jednej klatki przypada około 16.6 ms. Jeśli overdraw powoduje przekroczenie tego limitu, liczba klatek spada do 30 FPS lub niżej, co zauważalnie pogarsza płynność interfejsu.

Według Android Performance Patterns od Google, aplikacja ze współczynnikiem overdraw 3x traci trzy razy więcej czasu na shader fragmentów niż aplikacja z overdraw 1x. Na urządzeniach z niską wydajnością GPU prowadzi to do odczuwalnych opóźnień podczas przewijania i animacji.

Dla programistów mobilnych zrozumienie overdraw jest krytycznie ważne: właśnie ten czynnik najczęściej powoduje szarpanie przewijania i niską liczbę klatek na pozornie prostych ekranach z dużą liczbą zagnieżdżonych elementów.

Jak Overdraw wpływa na wydajność GPU

Potok GPU składa się z kilku etapów: shader wierzchołków, rasteryzacja i shader fragmentów. Shader fragmentów — najbardziej kosztowna część, ponieważ jest wykonywany dla każdego piksela każdego prymitywu. Przy overdraw x2 shader fragmentów przetwarza dwa razy więcej pikseli, co bezpośrednio zwiększa czas klatki.

Nowoczesne mobilne GPU, takie jak Qualcomm Adreno i Apple GPU, mają mechanizmy Early-Z Test i Hidden Surface Removal, które częściowo kompensują overdraw. Jednak te optymalizacje działają tylko w określonych warunkach i nie należy polegać wyłącznie na przyspieszeniu sprzętowym.

Na przykład podczas renderowania półprzezroczystych elementów sprzętowy Early-Z jest nieskuteczny, a każdy piksel jest przetwarzany w pełni — overdraw w takich scenariuszach może osiągać 5x i więcej.

Główne przyczyny nadmiernego przerysowywania

Wielowarstwowe tła — jedna z głównych przyczyn overdraw w aplikacjach mobilnych. Gdy Activity lub ViewController ustawia kolor tła, każdy zagnieżdżony View może dodawać własne tło, a piksel jest przerysowywany na każdym poziomie hierarchii.

Badanie Uber Engineering wykazało, że usunięcie nadmiarowych teł w swojej aplikacji na Androida zmniejszyło overdraw o 32%, a czas renderowania ekranu — o 25%. Podobna sytuacja w iOS: ustawienie opaque = true dla nieprzezroczystych View eliminuje mieszanie alfa i zapobiega wielokrotnemu zapisowi pikseli.

• Przezroczyste nakładki — elementy z kanałem alfa nad innymi elementami zawsze powodują overdraw.
• ClipChildren=false — wyłączenie przycinania dzieci prowadzi do renderowania niewidocznych obszarów.
• Używanie ShapeDrawable zamiast prostych kolorów zwiększa obciążenie shadera fragmentów.
• Nadmierne zagnieżdżanie — każdy poziom hierarchii View dodaje potencjalną warstwę przerysowania.

Na platformie iOS overdraw często powstaje z powodu używania przezroczystych UIStackView, CALayer z shouldRasterize i nakładających się UIBlurEffect. Apple zaleca sprawdzanie overdraw za pomocą narzędzia Core Animation w XCode — pokazuje ono strefy przerysowania jako nakładkę w kolorze czerwonym.

Jak diagnozować Overdraw: narzędzia i metody

Debug GPU Overdraw — wbudowane narzędzie Androida, które koloruje ekran w różne kolory w zależności od krotności overdraw. Kolor fioletowy oznacza 1x, niebieski — 2x, zielony — 3x, różowy — 4x, czerwony — 5x i więcej. Idealny ekran powinien być przeważnie fioletowy.

W iOS analogiczną diagnostykę wykonuje narzędzie Core Animation w ramach XCode Instruments. Wizualizuje ono strefy przerysowania i pokazuje dokładną liczbę zapisów na piksel w trybie Color Blended Layers. Zielone warstwy — nieprzezroczyste (optymalne), czerwone — zawierają przezroczystość i powodują overdraw.

• Profile GPU Rendering w Androidzie pokazuje histogram czasu renderowania. Wysokie zielone słupki wskazują problemy z overdraw.
• Renderscript — bardziej zaawansowane narzędzie do analizy potoku renderowania na urządzeniach z Android 10+.
• Metal Debugger w XCode pozwala przeanalizować każdy przebieg renderowania i zobaczyć dokładną liczbę wywołań shadera fragmentów.

Po diagnostyce ważne jest zmierzenie FPS przed i po optymalizacji. Różnica 10–15 FPS przy naprawianiu overdraw to normalny wynik dla złożonego ekranu z listami i animacją.

Techniki optymalizacji Overdraw w aplikacjach mobilnych

Usuwanie nadmiarowych teł — najprostsza i najskuteczniejsza metoda. W Androidzie wystarczy ustawić android:windowBackground tylko dla Activity lub motywu, a nie dla każdego View. W iOS opaque = true dla wszystkich nieprzezroczystych UIView zmniejsza overdraw praktycznie do zera dla tych elementów.

Według Google I/O 2019, optymalizacja overdraw w Google Maps pozwoliła zmniejszyć czas renderowania klatki o 40% poprzez łączenie warstw i używanie ClipRect do ograniczania obszaru rysowania. Google zaleca programistom Androida następujące praktyki:

• ClipRect — ogranicza obszar rysowania Canvas. Jeśli poza widocznym obszarem nic nie ma — GPU nie marnuje zasobów.
• ViewStub — dla rzadko używanych lub niewidocznych przy ładowaniu elementów. Komponent jest renderowany tylko przy wywołaniu inflate.
• merge i include — zmniejszają głębokość hierarchii View, co obniża liczbę przebiegów renderowania.
• Flat buffers — zastąpienie zagnieżdżonych Layout jednym ConstraintLayout lub RelativeLayout.

W iOS optymalizacja osiągana jest poprzez konfigurację CALayer: ustawienie masksToBounds = true przycina zawartość poza granicami warstwy, a shouldRasterize włącza buforowanie reprezentacji rastrowej dla statycznych warstw.

Przykłady kodu: eliminacja Overdraw w Android i iOS

Rozważmy praktyczne przykłady w Kotlin i Swift, demonstrujące typowe scenariusze eliminacji overdraw. Pierwszy przykład pokazuje optymalizację przez ClipRect w Androidzie:

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()
        )
        // Rysuj treść tylko w przyciętym obszarze
        super.onDraw(canvas)
    }
}

Drugi przykład — w Swift, pokazuje wyłączenie przezroczystości dla warstwy, jeśli element nie powinien być półprzezroczysty:

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

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

Trzeci przykład — użycie ViewStub do opóźnionego ładowania mapy w Androidzie. ViewStub nie jest renderowany dopóki nie stanie się widoczny, co eliminuje overdraw na etapie inicjalizacji ekranu:

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

// Rozwijaj na żądanie
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()