موبائل ایپس میں Overdraw: یہ کیا ہے، وجوہات اور بہتری

موبائل گرافکس میں Overdraw کیا ہے؟

Overdraw ایک ایسی صورت حال ہے جہاں ایک ہی اسکرین پکسل کو ایک رینڈر فریم کے اندر کئی بار دوبارہ ڈرائیا جاتا ہے۔ ایک مثالی منظر نامے میں، ہر پکسل کو صرف ایک بار لکھا جانا چاہیے، لیکن حقیقی انٹرفیس میں nested Views، پس منظر کی تصاویر اور شفاف تہوں کی وجہ سے، GPU بار بار لکھتا ہے۔

ہر اضافی دوبارہ ڈرائینگ فریم رینڈر وقت کو بڑھاتی ہے۔ معیاری 60 FPS شرح پر، ہر فریم کو تقریباً 16.6 ms ملتا ہے۔ اگر overdraw اس حد سے تجاوز کرنے کا سبب بنتا ہے، تو فریم کی شرح 30 FPS یا اس سے کم ہو جاتی ہے، جو انٹرفیس کی ہمواری کو نمایاں طور پر کم کر دیتی ہے۔

Google کی Android Performance Patterns کے مطابق، 3x overdraw فیکٹر والی ایپ، 1x overdraw والی ایپ کے مقابلے میں فریگمنٹ شیڈر پر تین گنا زیادہ وقت صرف کرتی ہے۔ کم کارکردگی والے GPU آلات پر، یہ اسکرولنگ اور اینیمیشن کے دوران نمایاں وقفے کا سبب بنتا ہے۔

موبائل ڈویلپرز کے لیے، overdraw کو سمجھنا انتہائی اہم ہے: یہ عنصر اکثر بظاہر سادہ اسکرینوں پر بڑی تعداد میں nested عناصر کے ساتھ جھٹکے والی اسکرولنگ اور کم فریم ریٹ کا سبب بنتا ہے۔

Overdraw GPU کارکردگی کو کیسے متاثر کرتا ہے

GPU پائپ لائن کئی مراحل پر مشتمل ہے: ورٹیکس شیڈر، راسٹرائزیشن اور فریگمنٹ شیڈر۔ فریگمنٹ شیڈر سب سے مہنگا حصہ ہے کیونکہ یہ ہر پریمیٹو کے ہر پکسل کے لیے چلتا ہے۔ 2x overdraw پر، فریگمنٹ شیڈر دوگنا پکسلز پروسیس کرتا ہے، جو براہ راست فریم وقت بڑھاتا ہے۔

جدید موبائل GPUs جیسے Qualcomm Adreno اور Apple GPU میں Early-Z Test اور Hidden Surface Removal میکانزم ہیں جو جزوی طور پر overdraw کی تلافی کرتے ہیں۔ تاہم، یہ بہتری صرف مخصوص شرائط میں کام کرتی ہے، اور صرف ہارڈویئر ایکسلریشن پر انحصار نہیں کرنا چاہیے۔

مثال کے طور پر، نیم شفاف عناصر کو رینڈر کرتے وقت، ہارڈویئر Early-Z غیر مؤثر ہے، اور ہر پکسل مکمل طور پر پروسیس ہوتا ہے — ایسے منظرناموں میں overdraw 5x یا اس سے زیادہ تک پہنچ سکتا ہے۔

ضرورت سے زیادہ دوبارہ ڈرائینگ کی اہم وجوہات

کثیر پرتوں والے پس منظر موبائل ایپس میں overdraw کی اہم وجوہات میں سے ایک ہیں۔ جب کوئی Activity یا ViewController پس منظر کا رنگ سیٹ کرتا ہے، تو ہر nested View اپنا پس منظر شامل کر سکتی ہے، اور پکسل ہر درجہ بندی کی سطح پر دوبارہ ڈرائیا جاتا ہے۔

Uber Engineering کے ایک مطالعے سے پتہ چلا کہ ان کی Android ایپ میں ضرورت سے زیادہ پس منظر ہٹانے سے overdraw 32% اور اسکرین رینڈرنگ کا وقت 25% کم ہوا۔ iOS میں بھی ایسی ہی صورت حال ہے: غیر شفاف Views کے لیے opaque = true سیٹ کرنا الفا بیلنڈنگ کو ختم کرتا ہے اور ایک سے زیادہ پکسل لکھنے سے روکتا ہے۔

• شفاف اوورلے — دوسرے عناصر کے اوپر الفا چینل والے عناصر ہمیشہ overdraw کا سبب بنتے ہیں۔
• ClipChildren=false — چائلڈ عناصر کی کلپنگ غیر فعال کرنا پوشیدہ علاقوں کے رینڈرنگ کا سبب بنتا ہے۔
• ShapeDrawable کا استعمال سادہ رنگوں کے بجائے فریگمنٹ شیڈر پر بوجھ بڑھاتا ہے۔
• ضرورت سے زیادہ nesting — 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 میں، ہر View کے لیے نہیں، بلکہ صرف Activity یا تھیم کے لیے android:windowBackground سیٹ کریں۔ iOS میں، تمام غیر شفاف UIView کے لیے opaque = true ان عناصر کے لیے overdraw کو تقریباً صفر کر دیتا ہے۔

Google I/O 2019 کے مطابق، Google Maps میں overdraw کی بہتری نے پرتوں کے انضمام اور ڈرائینگ ایریا کو محدود کرنے کے لیے ClipRect کے استعمال کے ذریعے فریم رینڈرنگ کا وقت 40% کم کیا۔ Android ڈویلپرز کے لیے، Google درج ذیل طریقوں کی سفارش کرتا ہے:

• ClipRect — Canvas ڈرائینگ ایریا کو محدود کرتا ہے۔ اگر نظر آنے والے علاقے سے باہر کچھ نہیں ہے، تو GPU وسائل ضائع نہیں کرتا۔
• ViewStub — شاذ و نادر ہی استعمال ہونے والے یا ابتدائی لوڈ پر پوشیدہ عناصر کے لیے۔ جزو صرف اس وقت رینڈر ہوتا ہے جب inflate کو کال کیا جائے۔
• merge اور include — View کے درجہ بندی کی گہرائی کو کم کرتے ہیں، جس سے رینڈر پاس کی تعداد کم ہوتی ہے۔
• فلیٹ بفر — nested Layouts کو ایک 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()