موبائل ڈیولپمنٹ میں گرافکس اور رینڈرنگ: یہ کیا ہے، عمل کیسے کام کرتا ہے اور یہ کیسے کام کرتا ہے
گرافکس اور رینڈرنگ موبائل ایپلیکیشن کی کارکردگی کے اہم پہلو ہیں۔ Apple OpenGL ES Guide کے مطابق، 90% سے زیادہ بصری نمونے غلط رینڈرنگ کی وجہ سے ہوتے ہیں۔ گرافکس پائپ لائن کو سمجھنا اینی میشن اور پیچیدہ UI کے ساتھ کام کرنے والے ہر ڈیولپر کے لیے ضروری ہے۔
اہم نکات
- CPU Rendering — مرکزی پروسیسر پر ڈرائنگ۔ سست لیکن لچکدار۔ Canvas, Core Graphics (Quartz 2D)۔ GPU Rendering — گرافکس پروسیسر پر متوازی پروسیسنگ۔ Metal, OpenGL ES, Vulkan۔
- Shader — GPU پر ایک پروگرام۔ Vertex Shader عمودی نقاط کو پروسیس کرتا ہے، Fragment Shader پکسلز کو پروسیس کرتا ہے۔ جدید رینڈرنگ شیڈر استعمال کرتی ہے۔
- Overdraw — ایک پکسل کو کئی بار دوبارہ کھینچنا۔ کارکردگی کا سب سے بڑا دشمن۔ ٹولز: Debug GPU Overdraw, Color Blended Layers۔
- CALayer (iOS) — Core Animation کا بنیادی عنصر۔ CAShapeLayer — GPU-تیز رفتار ویکٹر گرافکس۔ Vector Drawable — Android فارمیٹ۔
- Offscreen Rendering — ڈسپلے سے پہلے بفر میں رینڈر کرنا۔ شیڈو، گول کونوں اور ماسک کے لیے ضروری۔ کارکردگی کم کرتا ہے — اس سے بچیں۔
گرافکس اور رینڈرنگ: CPU اور GPU کی بنیادی باتیں
رینڈرنگ ڈیٹا (عمودی نقاط، ٹیکسچر، شیڈر) کو اسکرین پر تصویر میں تبدیل کرنے کا عمل ہے۔ موبائل آلات میں، رینڈرنگ CPU (مرکزی پروسیسر) یا GPU (گرافکس پروسیسر) پر کی جا سکتی ہے۔ انتخاب گرافکس کی قسم اور مطلوبہ کارکردگی پر منحصر ہے۔
CPU vs GPU Rendering
CPU Rendering — ترتیب وار پروسیسنگ۔ ہر ہدایت ایک کے بعد ایک عمل میں لائی جاتی ہے۔ CPU منطق اور برانچنگ کے لیے بہتر بنایا گیا ہے۔ Canvas (Android), Core Graphics (iOS) CPU پر کام کرتے ہیں۔ فائدہ: درستگی، پیچیدہ الگورتھم کی حمایت۔ نقصان: بڑی تعداد میں گرافکس عناصر کے ساتھ سست۔ GPU Rendering — متوازی پروسیسنگ۔ ہزاروں GPU کور بیک وقت عمودی نقاط اور پکسلز کو پروسیس کرتے ہیں۔ Metal (iOS), Vulkan (Android), OpenGL ES (دونوں پلیٹ فارم) GPU استعمال کرتے ہیں۔ 3D، 60 FPS اینی میشن اور پیچیدہ اثرات کے لیے GPU Rendering لازمی ہے۔ جدید UI فریم ورک (SwiftUI, Jetpack Compose, Flutter) ڈیفالٹ طور پر GPU استعمال کرتے ہیں۔
شیڈرز (Vertex, Fragment)
شیڈرز GPU پر عمل میں لائے جانے والے پروگرام ہیں۔ وہ اسکرین پر ہر چیز کی ظاہری شکل کا تعین کرتے ہیں۔ گرافکس پائپ لائن کئی مراحل پر مشتمل ہے، لیکن دو اہم شیڈر — Vertex Shader اور Fragment Shader — 99% معاملات میں استعمال ہوتے ہیں۔ شیڈر GLSL (OpenGL), MSL (Metal) یا HLSL (DirectX) میں لکھے جاتے ہیں۔
Vertex Shader — 3D ماڈل کے عمودی نقاط کو پروسیس کرتا ہے۔ ان پٹ: عمودی نقطہ کی پوزیشن، نارمل، UV کوآرڈینیٹ۔ آؤٹ پٹ: تبدیل شدہ پوزیشن (ماڈل → ویو → پروجیکشن)۔ Vertex Shader عمودی نقاط بنا یا حذف نہیں کر سکتا — صرف تبدیل کر سکتا ہے۔ Fragment Shader — راسٹرائزڈ مثلث میں ہر پکسل (ٹکڑے) کا رنگ شمار کرتا ہے۔ ان پٹ: Vertex Shader سے درج کردہ ڈیٹا (UV, نارمل)۔ آؤٹ پٹ: RGBA رنگ۔ Fragment Shader ٹیکسچرنگ، لائٹنگ (Phong, PBR) اور پوسٹ ایفیکٹس کے لیے ذمہ دار ہے۔ جدید انجن (Unity, Unreal) خود بخود شیڈر تیار کرتے ہیں، لیکن آپٹیمائزیشن کے لیے پائپ لائن کو سمجھنا ضروری ہے۔
Offscreen Rendering — اسکرین پر نہیں بلکہ عارضی بفر میں رینڈر کرنا۔ استعمال: 1) اثرات (blur, shadow)، 2) ٹیکسچر میں رینڈر، 3) فریموں کا پیشگی حساب۔ Offscreen Rendering مہنگا ہے: سیاق و سباق کی تبدیلی اور اضافی رینڈرنگ پاس۔ iOS شیڈو اور cornerRadius کے لیے خود بخود Offscreen Rendering کو فعال کرتا ہے۔ راسٹرائزیشن — ویکٹر ڈیٹا (عمودی نقاط + شیڈر) کو پکسلز میں تبدیل کرنا۔ راسٹرائزر تعین کرتا ہے کہ کون سے ٹکڑے مثلث سے تعلق رکھتے ہیں اور Fragment Shader کو کال کرتا ہے۔ کمپوزیٹنگ — حتمی تصویر میں تہوں کو جمع کرنا۔ Core Animation CALayer کو کمپوزیٹ کرتا ہے، Android SurfaceFlinger تہوں کو کمپوزیٹ کرتا ہے۔
| پیرامیٹر | CPU Rendering | GPU Rendering |
|---|---|---|
| آرکیٹیکچر | ترتیب وار (چند کور) | متوازی (سینکڑوں-ہزاروں کور) |
| رفتار | گرافکس کے لیے سست | بڑے پیمانے پر کاموں کے لیے تیز |
| ٹولز | Canvas, Core Graphics (Quartz 2D) | Metal, OpenGL ES, Vulkan |
| استعمال | سادہ 2D گرافکس، متن، UI | 3D، اینی میشن، گیمز، پیچیدہ اثرات |
| استعمال | کم توانائی | زیادہ توانائی، لیکن تیز |
| Overdraw | زیادہ لاگت | کم لاگت (لیکن پھر بھی نقصان دہ) |
CPU — منطق اور Canvas کے لیے۔ GPU — گرافکس اور اینی میشن کے لیے۔ IT Sectr کسی بھی متحرک مواد (اینی میشن، ٹرانزیشن، اسکرول) کے لیے GPU رینڈرنگ استعمال کرنے کی سفارش کرتا ہے — یہ مستحکم 60 FPS کو یقینی بناتا ہے۔
Core Animation (CALayer, CAShapeLayer)
Core Animation — Apple کا GPU-تیز رفتار اینی میشن رینڈرنگ فریم ورک۔ بنیادی عنصر CALayer ہے: مواد (تصویر، رنگ، متن) کے ساتھ ایک مستطیل علاقہ۔ CALayer منظم کرتا ہے: پوزیشن، سائز، پس منظر کا رنگ، بارڈر، شیڈو، cornerRadius اور تبدیلیاں (2D اور 3D)۔ Core Animation خود بخود GPU پر تہوں کو کمپوزیٹ کرتا ہے — ڈیولپر کو گرافکس کوڈ لکھنے کی ضرورت نہیں۔
CALayer
CALayer — ایک ہلکی پھلکی شے (ویو نہیں) جس میں مواد کا بٹ میپ ہوتا ہے۔ UIButton, UILabel, UIImageView — سب اندرونی طور پر CALayer استعمال کرتے ہیں۔ خصوصیات: frame, bounds, position, anchorPoint, transform, opacity, masksToBounds۔ CALayer خصوصیات کی اینی میشن GPU پر ہوتی ہے — یہ Core Animation کا سب سے بڑا فائدہ ہے۔ CALayer.shouldRasterize — پیچیدہ گرافکس کو کیش کرنے کے لیے تہہ کی راسٹرائزیشن کو فعال کرتا ہے۔ CAShapeLayer — ویکٹر گرافکس کے لیے ذیلی کلاس: GPU پر پاتھ کھینچتا ہے۔ پروگریس بار، چارٹ، ماسک اور شیپ اینی میشن کے لیے استعمال ہوتا ہے۔ CAShapeLayer.path — ایک اینی میٹیبل خاصیت (شیپ مورفنگ اینی میشن)۔
کمپوزیٹنگ Core Animation میں — حتمی فریم میں CALayer کو جمع کرنے کا عمل۔ ہر CALayer GPU پر ایک علیحدہ ٹیکسچر ہے۔ کمپوزیٹنگ Render Server (ایک علیحدہ عمل) میں ہوتی ہے۔ کمپوزیٹنگ کی ضرورت والی خصوصیات: opacity, shadow, cornerRadius + masksToBounds, shouldRasterize۔ جتنی کم تہیں — اتنی تیز کمپوزیٹنگ۔
آپٹیمائزیشن (Overdraw, Offscreen Rendering)
Overdraw — ایک صورتحال جہاں ایک ہی پکسل ایک فریم میں کئی بار رنگا جاتا ہے۔ مثال: سرخ پس منظر → نیلا مستطیل → متن۔ مرکزی پکسل 3 بار کھینچا جاتا ہے۔ Overdraw UI وقفہ کی بنیادی وجہ ہے، خاص طور پر پرانے آلات پر۔ iOS: Debug Color Blended Layers (Xcode) — سرخ علاقے = ملا ہوا (overdraw)۔ Android: Debug GPU Overdraw (ڈیولپر آپشنز) — نیلے (1x) سے سرخ (3x+) تک رنگ۔
Overdraw
Overdraw کو کیسے کم کریں: 1) غیر شفاف ویوز کے لیے opaque = true استعمال کریں (iOS)۔ 2) Android — android:windowBackground صرف ایک بار استعمال کریں۔ 3) پوشیدہ تہیں ہٹائیں۔ 4) تہہ دار آرکیٹیکچر استعمال کریں: پس منظر (1 پاس) → مواد (2 پاس)۔ 5) بلا ضرورت clipChildren اور clipToPadding سے بچیں۔ Offscreen Rendering — اسکرین سے پہلے بفر میں رینڈر کرنا۔ ٹرگرز: shadow (CALayer.shadow*)، cornerRadius + masksToBounds، group opacity، shouldRasterize۔ Xcode: Debug Offscreen Renderer — پیلے علاقے = offscreen۔ Android پر: profile GPU rendering — بار کی لمبائی چیک کریں۔
ویکٹر گرافکس (SVG, Vector Drawable)
ویکٹر گرافکس — تصاویر جو ریاضی کے فارمولوں (پاتھ، منحنی خطوط، بھرائی) سے بیان کی گئی ہیں۔ ویکٹر اسکیل کرنے پر کوالٹی نہیں کھوتے — موبائل ایپلیکیشنز میں آئیکنز اور عکاسیوں کے لیے مثالی۔
SVG (Scalable Vector Graphics) — W3C معیار۔ موبائل OS میں براہ راست تعاون یافتہ نہیں۔ تبدیل: iOS پر — PDF ویکٹر اثاثوں میں (Xcode 12+), Android پر — Vector Drawable XML میں۔ Vector Drawable — Android فارمیٹ۔ XML میں بیان کردہ: <vector> کے ساتھ <path> اور <group>۔ AnimatedVectorDrawable کے ذریعے اینی میشن کو سپورٹ کرتا ہے۔ PDF Vector Assets (iOS) — Assets.xcassets میں ویکٹر PDF۔ Xcode انہیں GPU-بہتر ٹیکسچر میں کمپائل کرتا ہے۔ SVG اور Vector Drawable پیچیدہ اثرات (blur, gradient mesh) کو سپورٹ نہیں کرتے۔ فوٹوز اور گریڈیئنٹس کے لیے راسٹر PNG/WebP استعمال کریں۔
اکثر پوچھے گئے سوالات
CPU اور GPU رینڈرنگ میں کیا فرق ہے؟
CPU رینڈرنگ — مرکزی پروسیسر پر ترتیب وار ڈرائنگ۔ سادہ 2D گرافکس اور Canvas کے لیے موزوں۔ GPU رینڈرنگ عمودی نقاط اور پکسلز کی بڑے پیمانے پر پروسیسنگ کے لیے گرافکس پروسیسر کے متوازی آرکیٹیکچر کا استعمال کرتا ہے۔
Overdraw کیا ہے اور اس سے کیسے بچا جائے؟
Overdraw — فی فریم ایک پکسل کو کئی بار کھینچنا۔ ٹولز: Debug GPU Overdraw (Android), Color Blended Layers (iOS)۔ نارمل: نیلا (1x) اور سبز (2x)۔ سرخ (3x+) — مسئلہ۔
iOS میں CALayer اور CAShapeLayer کیا ہیں؟
CALayer — Core Animation کی بنیادی کلاس۔ CAShapeLayer — GPU پر ویکٹر گرافکس کے لیے ذیلی کلاس۔ دونوں Core Animation کے زیر انتظام ہیں اور Render Server میں کمپوزیٹ ہوتے ہیں۔
Vertex Shader اور Fragment Shader کیا ہیں؟
Vertex Shader — عمودی نقاط کی پروسیسنگ کے لیے GPU پروگرام۔ Fragment Shader — پکسل رنگوں کے حساب کے لیے GPU پروگرام۔ مل کر وہ گرافکس پائپ لائن کو نافذ کرتے ہیں۔
SVG کب اور Vector Drawable کب استعمال کریں؟
SVG — W3C معیار، براہ راست تعاون یافتہ نہیں۔ iOS پر — PDF ویکٹر اثاثے۔ Android پر — Vector Drawable XML۔ IT Sectr iOS کے لیے PDF اور Android کے لیے Vector Drawable XML کی سفارش کرتا ہے۔
خلاصہ
- CPU vs GPU: CPU — ترتیب وار، منطق کے لیے۔ GPU — متوازی، گرافکس کے لیے۔ اینی میشن کے لیے GPU استعمال کریں۔
- Shader: Vertex — عمودی نقطہ کی تبدیلی، Fragment — پکسل رنگ۔ گرافکس پائپ لائن کی بنیادی باتیں۔
- Overdraw — FPS کا سب سے بڑا دشمن۔ Debug GPU Overdraw / Color Blended Layers سے چیک کریں۔
- CALayer (iOS) — GPU-تیز رفتار رینڈرنگ۔ CAShapeLayer — ویکٹر شکلوں کے لیے۔
- Offscreen Rendering — مہنگا۔ غیر ضروری شیڈو، cornerRadius + masksToBounds سے بچیں۔
- Vector Drawable (Android) اور PDF (iOS) — آئیکنز کے لیے بہترین فارمیٹ۔ فوٹوز کے لیے راسٹر PNG/WebP۔
- کمپوزیٹنگ — تہہ جمع کرنا۔ کم تہیں = تیز کمپوزیٹنگ = زیادہ FPS۔
ہم ایک موبائل ایپلیکیشن ٹرنکی تیار کریں گے
IT Sectr 2017 سے اسٹارٹ اپس اور کاروبار کے لیے iOS اور Android ایپلیکیشنز بناتا ہے۔ ہم آپ کو مشورہ دیں گے اور بہترین حل تجویز کریں گے۔