मोबाइल डेवलपमेंट में ग्राफिक्स और रेंडरिंग: यह क्या है, प्रक्रिया कैसे काम करती है और यह कैसे काम करता है

ग्राफिक्स और रेंडरिंग: 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 कोऑर्डिनेट्स। आउटपुट: ट्रांसफ़ॉर्म की गई पोज़ीशन (model → view → projection)। 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 CALayers को कम्पोज़िट करता है, Android SurfaceFlinger लेयर्स को कम्पोज़िट करता है।

CPU — लॉजिक और Canvas के लिए। GPU — ग्राफिक्स और एनिमेशन के लिए। IT Sectr किसी भी चलने वाली सामग्री (एनिमेशन, ट्रांज़िशन, स्क्रॉल) के लिए GPU रेंडरिंग उपयोग करने की अनुशंसा करता है — यह स्थिर 60 FPS सुनिश्चित करता है।

Core Animation (CALayer, CAShapeLayer)

Core Animation — GPU-त्वरित एनिमेटेड रेंडरिंग के लिए Apple का फ्रेमवर्क। मूल तत्व 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 में — CALayers को अंतिम फ्रेम में असेंबल करने की प्रक्रिया। प्रत्येक 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 में वेक्टर PDFs। Xcode उन्हें GPU-ऑप्टिमाइज़्ड टेक्सचर में कंपाइल करता है। SVG और Vector Drawable जटिल प्रभावों (blur, gradient mesh) का समर्थन नहीं करते। फ़ोटो और ग्रेडिएंट के लिए रास्टर PNG/WebP का उपयोग करें।