Overdraw in mobiele apps: wat het is, oorzaken en optimalisatie

Wat is Overdraw in mobiele graphics?

Overdraw — is de situatie waarin dezelfde schermpixel meerdere keren wordt overgetekend tijdens één renderframe. In het ideale scenario zou elke pixel precies één keer moeten worden geschreven, maar in echte interfaces voert de GPU vanwege geneste Views, achtergrondafbeeldingen en transparante lagen herhaalde schrijfbewerkingen uit.

Elke extra overtekening verhoogt de renderframetijd. Bij een standaard frequentie van 60 FPS is ongeveer 16.6 ms beschikbaar voor de verwerking van één frame. Als overdraw deze limiet overschrijdt, daalt de framerate naar 30 FPS of lager, wat de vloeiendheid van de interface merkbaar verslechtert.

Volgens Android Performance Patterns van Google besteedt een app met een overdraw-coëfficiënt van 3x drie keer zoveel tijd aan de fragmentshader als een app met overdraw 1x. Op apparaten met lage GPU-prestaties leidt dit tot merkbare haperingen tijdens scrollen en animaties.

Voor mobiele ontwikkelaars is het begrijpen van overdraw van cruciaal belang: het is deze factor die het vaakst schokkerig scrollen en lage framerates veroorzaakt op ogenschijnlijk eenvoudige schermen met veel geneste elementen.

Hoe Overdraw de GPU-prestaties beïnvloedt

De GPU-pijplijn bestaat uit verschillende fasen: vertex shader, rasterisatie en fragment shader. Fragment shader — het duurste onderdeel, omdat het wordt uitgevoerd voor elke pixel van elk primitief. Bij overdraw x2 verwerkt de fragment shader twee keer zoveel pixels, wat de frametijd direct verhoogt.

Moderne mobiele GPU's zoals Qualcomm Adreno en Apple GPU hebben Early-Z Test en Hidden Surface Removal mechanismen die overdraw gedeeltelijk compenseren. Deze optimalisaties werken echter alleen onder bepaalde omstandigheden en men moet niet uitsluitend op hardwareversnelling vertrouwen.

Bij het renderen van halfdoorzichtige elementen is hardwarematige Early-Z bijvoorbeeld niet effectief en wordt elke pixel volledig verwerkt — overdraw kan in dergelijke scenario's 5x en meer bereiken.

Belangrijkste oorzaken van overmatig overtekenen

Meerlaagse achtergronden — een van de belangrijkste oorzaken van overdraw in mobiele apps. Wanneer een Activity of ViewController een achtergrondkleur instelt, kan elke geneste View een eigen achtergrond toevoegen en wordt de pixel op elk niveau van de hiërarchie overgetekend.

Onderzoek van Uber Engineering toonde aan dat het verwijderen van overbodige achtergronden in hun Android-app overdraw met 32% verminderde en de schermrendertijd met 25%. Een vergelijkbare situatie in iOS: het instellen van opaque = true voor ondoorzichtige Views elimineert alfa-menging en voorkomt meervoudig schrijven van pixels.

• Transparante overlays — elementen met een alfakanaal over andere elementen veroorzaken altijd overdraw.
• ClipChildren=false — het uitschakelen van het bijsnijden van onderliggende elementen leidt tot het renderen van onzichtbare gebieden.
• Gebruik van ShapeDrawable in plaats van eenvoudige kleuren verhoogt de belasting van de fragment shader.
• Overmatige nesting — elk niveau van de View-hiërarchie voegt een mogelijke overtekenlaag toe.

Op het iOS-platform ontstaat overdraw vaak door het gebruik van transparante UIStackView, CALayer met shouldRasterize en overlappende UIBlurEffect. Apple raadt aan om overdraw te controleren via het Core Animation-hulpmiddel in XCode — het toont overtekenzones als een rode overlay.

Overdraw diagnosticeren: hulpmiddelen en methoden

Debug GPU Overdraw — het ingebouwde Android-hulpmiddel dat het scherm in verschillende kleuren kleurt afhankelijk van de overdraw-multipliciteit. Paars betekent 1x, blauw — 2x, groen — 3x, roze — 4x, rood — 5x en meer. Het ideale scherm moet overwegend paars zijn.

In iOS wordt een vergelijkbare diagnose uitgevoerd door het Core Animation-hulpmiddel in XCode Instruments. Het visualiseert overtekenzones en toont het exacte aantal schrijfbewerkingen per pixel in de Color Blended Layers-modus. Groene lagen — ondoorzichtig (optimaal), rode — bevatten transparantie en veroorzaken overdraw.

• Profile GPU Rendering in Android toont een histogram van de rendertijd. Hoge groene balken wijzen op overdraw-problemen.
• Renderscript — een geavanceerder hulpmiddel voor analyse van de renderpijplijn op apparaten met Android 10+.
• Metal Debugger in XCode maakt het mogelijk om elke renderpass te analyseren en het exacte aantal fragment shader-aanroepen te zien.

Na diagnose is het belangrijk om de FPS voor en na optimalisatie te meten. Een verschil van 10–15 FPS bij het corrigeren van overdraw is een normaal resultaat voor een complex scherm met lijsten en animaties.

Overdraw-optimalisatietechnieken in mobiele apps

Overbodige achtergronden verwijderen — de eenvoudigste en meest effectieve methode. In Android volstaat het om android:windowBackground alleen voor de Activity of thema in te stellen, niet voor elke View. In iOS vermindert opaque = true voor alle ondoorzichtige UIView overdraw voor deze elementen tot vrijwel nul.

Volgens Google I/O 2019 maakte overdraw-optimalisatie in Google Maps het mogelijk om de renderframetijd met 40% te verminderen door lagen te combineren en ClipRect te gebruiken om het tekengebied te beperken. Google beveelt Android-ontwikkelaars de volgende praktijken aan:

• ClipRect — beperkt het tekengebied van Canvas. Als er buiten het zichtbare gebied niets is — verspilt de GPU geen resources.
• ViewStub — voor zelden gebruikte of bij het laden onzichtbare elementen. Het component wordt alleen gerenderd bij het aanroepen van inflate.
• merge en include — verminderen de diepte van de View-hiërarchie, wat het aantal renderpasses verlaagt.
• Flat buffers — het vervangen van geneste Layouts door één ConstraintLayout of RelativeLayout.

In iOS wordt optimalisatie bereikt via CALayer-configuratie: het instellen van masksToBounds = true snijdt inhoud buiten de laaggrenzen af, en shouldRasterize schakelt het cachen van de rasterweergave in voor statische lagen.

Codevoorbeelden: Overdraw verwijderen in Android en iOS

Laten we praktische voorbeelden in Kotlin en Swift bekijken die typische scenario's voor het verwijderen van overdraw demonstreren. Het eerste voorbeeld toont optimalisatie via ClipRect in 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()
        )
        // Teken inhoud alleen binnen het bijgesneden gebied
        super.onDraw(canvas)
    }
}

Het tweede voorbeeld — in Swift, toont het uitschakelen van transparantie voor een laag als het element niet halfdoorzichtig mag zijn:

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

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

Het derde voorbeeld — het gebruik van ViewStub voor het uitgesteld laden van een kaart in Android. ViewStub wordt pas gerenderd wanneer het zichtbaar wordt, wat overdraw elimineert in de initialisatiefase van het scherm:

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

// Op aanvraag uitvouwen
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()