মোবাইল অ্যাপে 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()