Overdraw dalam aplikasi mobile: apa itu, penyebab dan optimasi

Apa itu Overdraw dalam grafis mobile?

Overdraw — adalah situasi di mana piksel layar yang sama digambar ulang beberapa kali selama satu frame rendering. Dalam skenario ideal, setiap piksel harus ditulis tepat satu kali, tetapi dalam antarmuka nyata karena View yang bersarang, gambar latar belakang, dan lapisan transparan, GPU melakukan penulisan berulang.

Setiap penggambaran ulang tambahan meningkatkan waktu rendering frame. Pada frekuensi standar 60 FPS, sekitar 16.6 ms dialokasikan untuk memproses satu frame. Jika overdraw menyebabkan melebihi batas ini, frame rate turun menjadi 30 FPS atau lebih rendah, yang secara nyata memperburuk kehalusan antarmuka.

Menurut Android Performance Patterns dari Google, aplikasi dengan koefisien overdraw 3x menghabiskan tiga kali lebih banyak waktu pada fragment shader daripada aplikasi dengan overdraw 1x. Pada perangkat dengan kinerja GPU rendah, ini menyebabkan lag yang terasa saat scrolling dan animasi.

Bagi pengembang mobile, memahami overdraw sangat penting: justru faktor ini paling sering menyebabkan scrolling tersendat dan frame rate rendah pada layar yang tampaknya sederhana dengan banyak elemen bersarang.

Bagaimana Overdraw mempengaruhi kinerja GPU

Pipeline GPU terdiri dari beberapa tahap: vertex shader, rasterisasi, dan fragment shader. Fragment shader — bagian paling mahal, karena dijalankan untuk setiap piksel dari setiap primitif. Pada overdraw x2, fragment shader memproses dua kali lebih banyak piksel, yang secara langsung meningkatkan waktu frame.

GPU mobile modern seperti Qualcomm Adreno dan Apple GPU memiliki mekanisme Early-Z Test dan Hidden Surface Removal yang sebagian mengkompensasi overdraw. Namun, optimasi ini hanya bekerja dalam kondisi tertentu dan tidak boleh hanya mengandalkan akselerasi hardware.

Misalnya, saat merender elemen semi-transparan, Early-Z hardware tidak efektif dan setiap piksel diproses sepenuhnya — overdraw dalam skenario seperti itu bisa mencapai 5x dan lebih.

Penyebab utama penggambaran ulang berlebihan

Latar belakang multi-lapis — salah satu penyebab utama overdraw dalam aplikasi mobile. Ketika Activity atau ViewController mengatur warna latar belakang, setiap View bersarang dapat menambahkan latar belakangnya sendiri, dan piksel digambar ulang di setiap level hierarki.

Penelitian Uber Engineering menunjukkan bahwa menghapus latar belakang yang berlebihan di aplikasi Android mereka mengurangi overdraw sebesar 32%, dan waktu rendering layar — sebesar 25%. Situasi serupa di iOS: mengatur opaque = true untuk View yang tidak transparan menghilangkan pencampuran alfa dan mencegah penulisan piksel berulang.

• Lapisan transparan — elemen dengan saluran alfa di atas elemen lain selalu menyebabkan overdraw.
• ClipChildren=false — menonaktifkan pemotongan elemen anak menyebabkan rendering area yang tidak terlihat.
• Menggunakan ShapeDrawable sebagai ganti warna sederhana meningkatkan beban fragment shader.
• Bersarang berlebihan — setiap level hierarki View menambahkan lapisan penggambaran ulang potensial.

Di platform iOS, overdraw sering muncul karena penggunaan UIStackView transparan, CALayer dengan shouldRasterize, dan UIBlurEffect yang tumpang tindih. Apple merekomendasikan untuk memeriksa overdraw melalui alat Core Animation di XCode — ini menunjukkan zona penggambaran ulang sebagai overlay warna merah.

Cara mendiagnosis Overdraw: alat dan metode

Debug GPU Overdraw — alat bawaan Android yang mewarnai layar dalam berbagai warna tergantung pada multiplisitas overdraw. Warna ungu berarti 1x, biru — 2x, hijau — 3x, merah muda — 4x, merah — 5x dan lebih. Layar ideal harus didominasi ungu.

Di iOS, diagnosis serupa dilakukan oleh alat Core Animation dalam XCode Instruments. Ini memvisualisasikan zona penggambaran ulang dan menunjukkan jumlah penulisan yang tepat per piksel dalam mode Color Blended Layers. Lapisan hijau — tidak transparan (optimal), merah — mengandung transparansi dan menyebabkan overdraw.

• Profile GPU Rendering di Android menunjukkan histogram waktu rendering. Batang hijau tinggi menunjukkan masalah overdraw.
• Renderscript — alat yang lebih canggih untuk menganalisis pipeline rendering pada perangkat Android 10+.
• Metal Debugger di XCode memungkinkan menganalisis setiap lintasan rendering dan melihat jumlah persis panggilan fragment shader.

Setelah diagnosis, penting untuk mengukur FPS sebelum dan sesudah optimasi. Perbedaan 10–15 FPS saat memperbaiki overdraw adalah hasil normal untuk layar kompleks dengan daftar dan animasi.

Teknik optimasi Overdraw dalam aplikasi mobile

Menghapus latar belakang berlebihan — metode paling sederhana dan efektif. Di Android, cukup atur android:windowBackground hanya untuk Activity atau tema, bukan untuk setiap View. Di iOS, opaque = true untuk semua UIView yang tidak transparan mengurangi overdraw hingga hampir nol untuk elemen-elemen ini.

Menurut Google I/O 2019, optimasi overdraw di Google Maps memungkinkan pengurangan waktu rendering frame sebesar 40% dengan menggabungkan lapisan dan menggunakan ClipRect untuk membatasi area gambar. Google merekomendasikan praktik berikut untuk pengembang Android:

• ClipRect — membatasi area gambar Canvas. Jika tidak ada apa pun di luar area terlihat — GPU tidak membuang sumber daya.
• ViewStub — untuk elemen yang jarang digunakan atau tidak terlihat saat dimuat. Komponen hanya dirender saat inflate dipanggil.
• merge dan include — mengurangi kedalaman hierarki View, yang menurunkan jumlah lintasan rendering.
• Flat buffers — mengganti Layout bersarang dengan satu ConstraintLayout atau RelativeLayout.

Di iOS, optimasi dicapai melalui konfigurasi CALayer: mengatur masksToBounds = true memotong konten di luar batas lapisan, dan shouldRasterize mengaktifkan caching representasi raster untuk lapisan statis.

Contoh kode: menghilangkan Overdraw di Android dan iOS

Mari kita lihat contoh praktis dalam Kotlin dan Swift yang mendemonstrasikan skenario umum penghapusan overdraw. Contoh pertama menunjukkan optimasi melalui ClipRect di 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()
        )
        // Gambar konten hanya dalam area yang dipotong
        super.onDraw(canvas)
    }
}

Contoh kedua — dalam Swift, menunjukkan penonaktifan transparansi untuk lapisan jika elemen tidak boleh semi-transparan:

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

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

Contoh ketiga — penggunaan ViewStub untuk pemuatan tertunda peta di Android. ViewStub tidak dirender sampai menjadi terlihat, yang menghilangkan overdraw pada tahap inisialisasi layar:

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

// Kembangkan sesuai permintaan
ViewStub stub = findViewById(R.id.map_stub)
stub?.inflate()