मोबाइल ऐप्स में Overdraw: यह क्या है, कारण और ऑप्टिमाइज़ेशन

मोबाइल ग्राफ़िक्स में Overdraw क्या है?

Overdraw एक ऐसी स्थिति है जहाँ एक ही स्क्रीन पिक्सेल को एक रेंडर फ्रेम के भीतर कई बार रीड्रॉ किया जाता है। आदर्श परिदृश्य में, प्रत्येक पिक्सेल को ठीक एक बार लिखा जाना चाहिए, लेकिन वास्तविक इंटरफ़ेस में नेस्टेड Views, बैकग्राउंड इमेज और पारदर्शी लेयर्स के कारण, GPU बार-बार लिखता है।

प्रत्येक अतिरिक्त रीड्रॉ फ्रेम रेंडर समय बढ़ाता है। मानक 60 FPS दर पर, प्रत्येक फ्रेम को लगभग 16.6 ms मिलते हैं। यदि overdraw इस सीमा को पार करने का कारण बनता है, तो फ्रेम दर 30 FPS या उससे कम हो जाती है, जो इंटरफ़ेस की स्मूथनेस को काफी खराब कर देती है।

Google के Android Performance Patterns के अनुसार, 3x overdraw फैक्टर वाला ऐप, 1x overdraw वाले ऐप की तुलना में फ्रैगमेंट शेडर पर तीन गुना अधिक समय खर्च करता है। कम प्रदर्शन वाले GPU उपकरणों पर, यह स्क्रॉलिंग और एनिमेशन के दौरान ध्यान देने योग्य लैग का कारण बनता है।

मोबाइल डेवलपर्स के लिए, overdraw को समझना अत्यंत महत्वपूर्ण है: यह कारक अक्सर बड़ी संख्या में नेस्टेड एलिमेंट वाली सरल दिखने वाली स्क्रीन में जर्की स्क्रॉल और कम फ्रेम दर का कारण बनता है।

Overdraw GPU प्रदर्शन को कैसे प्रभावित करता है

GPU पाइपलाइन में कई चरण होते हैं: वर्टेक्स शेडर, रास्टराइज़ेशन और फ्रैगमेंट शेडर। फ्रैगमेंट शेडर सबसे महंगा हिस्सा है क्योंकि यह प्रत्येक प्रिमिटिव के हर पिक्सेल के लिए निष्पादित होता है। 2x overdraw पर, फ्रैगमेंट शेडर दोगुने पिक्सेल प्रोसेस करता है, जो सीधे फ्रेम समय बढ़ाता है।

आधुनिक मोबाइल GPU जैसे Qualcomm Adreno और Apple GPU में Early-Z Test और Hidden Surface Removal तंत्र हैं जो आंशिक रूप से overdraw की भरपाई करते हैं। हालाँकि, ये ऑप्टिमाइज़ेशन केवल कुछ शर्तों के तहत काम करते हैं, और केवल हार्डवेयर त्वरण पर निर्भर नहीं रहना चाहिए।

उदाहरण के लिए, अर्ध-पारदर्शी एलिमेंट रेंडर करते समय, हार्डवेयर Early-Z अप्रभावी होता है, और प्रत्येक पिक्सेल पूरी तरह से प्रोसेस होता है — ऐसे परिदृश्यों में overdraw 5x और उससे अधिक तक पहुँच सकता है।

अत्यधिक रीड्रॉइंग के मुख्य कारण

बहु-स्तरीय बैकग्राउंड मोबाइल ऐप्स में overdraw के मुख्य कारणों में से एक हैं। जब कोई Activity या ViewController बैकग्राउंड रंग सेट करता है, तो प्रत्येक नेस्टेड View अपना स्वयं का बैकग्राउंड जोड़ सकता है, और पिक्सेल हर पदानुक्रम स्तर पर रीड्रॉ होता है।

Uber Engineering के एक अध्ययन से पता चला कि अपने Android ऐप में अत्यधिक बैकग्राउंड हटाने से overdraw 32% और स्क्रीन रेंडरिंग समय 25% कम हुआ। iOS में भी ऐसी ही स्थिति है: अपारदर्शी Views के लिए opaque = true सेट करना अल्फ़ा ब्लेंडिंग को खत्म करता है और एकाधिक पिक्सेल लिखने से रोकता है।

• पारदर्शी ओवरले — अन्य एलिमेंट के ऊपर अल्फ़ा चैनल वाले एलिमेंट हमेशा overdraw का कारण बनते हैं।
• ClipChildren=false — चाइल्ड एलिमेंट की क्लिपिंग अक्षम करने से अदृश्य क्षेत्रों का रेंडरिंग होता है।
• ShapeDrawable का उपयोग सरल रंगों के बजाय फ्रैगमेंट शेडर पर लोड बढ़ाता है।
• अत्यधिक नेस्टिंग — प्रत्येक View पदानुक्रम स्तर एक संभावित रीड्रॉ लेयर जोड़ता है।

iOS प्लेटफ़ॉर्म पर, overdraw अक्सर पारदर्शी UIStackView, shouldRasterize के साथ CALayer और ओवरलैपिंग UIBlurEffect के उपयोग के कारण होता है। Apple XCode में Core Animation टूल के माध्यम से overdraw की जाँच करने की सलाह देता है — यह रीड्रॉ ज़ोन को लाल ओवरले के रूप में दिखाता है।

Overdraw का निदान कैसे करें: उपकरण और विधियाँ

Debug GPU Overdraw एक अंतर्निहित Android टूल है जो overdraw फैक्टर के आधार पर स्क्रीन को अलग-अलग रंगों में रंगता है। बैंगनी का मतलब 1x, नीला — 2x, हरा — 3x, गुलाबी — 4x, लाल — 5x या अधिक। एक आदर्श स्क्रीन अधिकतर बैंगनी होनी चाहिए।

iOS में, समान निदान XCode Instruments में Core Animation टूल द्वारा किया जाता है। यह रीड्रॉ ज़ोन को विज़ुअलाइज़ करता है और Color Blended Layers मोड में पिक्सेल लिखने की सटीक संख्या दिखाता है। हरी लेयर अपारदर्शी (इष्टतम) हैं, लाल वाली पारदर्शिता रखती हैं और overdraw का कारण बनती हैं।

• Profile GPU Rendering Android में रेंडर समय का हिस्टोग्राम दिखाता है। लंबे हरे कॉलम overdraw समस्याओं का संकेत देते हैं।
• Renderscript Android 10+ उपकरणों पर रेंडरिंग पाइपलाइन के विश्लेषण के लिए एक अधिक उन्नत टूल है।
• Metal Debugger XCode में प्रत्येक रेंडर पास का विश्लेषण करने और फ्रैगमेंट शेडर कॉल की सटीक संख्या देखने की अनुमति देता है।

निदान के बाद, ऑप्टिमाइज़ेशन से पहले और बाद में FPS मापना महत्वपूर्ण है। overdraw को ठीक करने पर 10–15 FPS का अंतर सूचियों और एनिमेशन वाली जटिल स्क्रीन के लिए एक सामान्य परिणाम है।

मोबाइल ऐप्स में Overdraw ऑप्टिमाइज़ेशन तकनीकें

अत्यधिक बैकग्राउंड हटाना सबसे सरल और प्रभावी तरीका है। Android में, केवल Activity या थीम के लिए android:windowBackground सेट करें, प्रत्येक View के लिए नहीं। iOS में, सभी अपारदर्शी UIView के लिए opaque = true उन एलिमेंट के लिए overdraw को लगभग शून्य तक कम कर देता है।

Google I/O 2019 के अनुसार, Google Maps में overdraw ऑप्टिमाइज़ेशन ने लेयर मर्जिंग और ड्रॉइंग क्षेत्र को सीमित करने के लिए ClipRect के उपयोग के माध्यम से फ्रेम रेंडर समय को 40% तक कम करने की अनुमति दी। Android डेवलपर्स के लिए, Google निम्नलिखित प्रथाओं की सिफारिश करता है:

• ClipRect — Canvas ड्रॉइंग क्षेत्र को सीमित करता है। यदि दृश्य क्षेत्र के बाहर कुछ भी नहीं है, तो GPU संसाधन बर्बाद नहीं करता।
• ViewStub — शायद ही कभी उपयोग किए जाने वाले या प्रारंभिक लोड पर अदृश्य एलिमेंट के लिए। कंपोनेंट केवल तब रेंडर होता है जब inflate कॉल किया जाता है।
• merge और include — View पदानुक्रम की गहराई कम करते हैं, जिससे रेंडर पास की संख्या घटती है।
• फ्लैट बफ़र — नेस्टेड Layout को एकल ConstraintLayout या RelativeLayout से बदलना।

iOS में, ऑप्टिमाइज़ेशन CALayer कॉन्फ़िगरेशन के माध्यम से प्राप्त होता है: masksToBounds = true सेट करना लेयर सीमा से परे सामग्री को क्रॉप करता है, और shouldRasterize स्थिर लेयर के लिए बिटमैप कैशिंग सक्षम करता है।

कोड उदाहरण: Android और iOS में Overdraw को खत्म करना

आइए Kotlin और Swift में व्यावहारिक उदाहरण देखें जो overdraw खत्म करने के विशिष्ट परिदृश्य दिखाते हैं। पहला उदाहरण Android में ClipRect के माध्यम से ऑप्टिमाइज़ेशन दिखाता है:

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 में दूसरा उदाहरण दिखाता है कि यदि एलिमेंट अर्ध-पारदर्शी नहीं होना चाहिए तो लेयर के लिए पारदर्शिता कैसे अक्षम करें:

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

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

तीसरा उदाहरण Android में विलंबित मैप लोडिंग के लिए ViewStub के उपयोग को दर्शाता है। ViewStub तब तक रेंडर नहीं होता जब तक यह दृश्यमान न हो जाए, जो स्क्रीन इनिशियलाइज़ेशन चरण में overdraw को खत्म करता है:

<!-- 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()