Compositing: यह क्या है, लेयर्स और कार्य सिद्धांत

Compositing क्या है?

Compositing ग्राफ़िक्स पाइपलाइन का अंतिम चरण है जहाँ सभी अलग-अलग रेंडर की गई लेयर्स (3D दृश्य, UI तत्व, वीडियो, सिस्टम इंटरफ़ेस) को स्क्रीन पर प्रदर्शित करने के लिए एक छवि में संयोजित किया जाता है। प्रत्येक लेयर का अपना रंग, पारदर्शिता (alpha), स्थिति और स्टैकिंग क्रम हो सकता है।

मोबाइल डेवलपमेंट के संदर्भ में, compositing उपयोगकर्ता इंटरफ़ेस के लिए महत्वपूर्ण है: विंडो, बटन, टेक्स्ट, आइकन — ये सभी तत्व एक एकल दृश्य में कम्पोज़िट किए जाते हैं। Compositing सिस्टम ड्रॉइंग ऑर्डर (z-order), अर्ध-पारदर्शी तत्वों के सही ओवरलैपिंग और UI स्थितियों के बीच संक्रमण एनिमेशन का प्रबंधन करता है।

ग्राफ़िक्स पाइपलाइन में Compositing

ग्राफ़िक्स पाइपलाइन में, compositing सभी शेडर पास और रैस्टराइज़ेशन पूरा होने के बाद होता है। GPU फ़्रेमबफ़र्स से तैयार लेयर्स लेता है, blending प्रक्रियाएँ लागू करता है और परिणाम को डिस्प्ले पर भेजने के लिए मुख्य फ़्रेमबफ़र (front buffer) में लिखता है।

Compositing कैसे काम करता है?

Compositing विभिन्न लेयर्स के रंगों के पिक्सेल-दर-पिक्सेल मिश्रण (blending) का उपयोग करता है। आउटपुट छवि का प्रत्येक पिक्सेल ओवरले की गई लेयर्स के पिक्सेल रंगों के आधार पर पारदर्शिता (alpha-चैनल) और चयनित मिश्रण मोड को ध्यान में रखते हुए गणना किया जाता है।

Alpha-चैनल और पारदर्शिता

प्रत्येक लेयर में एक alpha-चैनल (RGBA रंग का चौथा घटक) होता है जो इसकी अपारदर्शिता निर्धारित करता है। Alpha = 1.0 — पूरी तरह से अपारदर्शी, alpha = 0.0 — पूरी तरह से पारदर्शी। Alpha blending पिक्सेल रंग को अग्रभूमि (source) और पृष्ठभूमि (destination) लेयर्स के रंगों के भारित योग के रूप में गणना करता है: परिणाम = source * alpha + dest * (1 - alpha).

ड्रॉइंग ऑर्डर (पेंटर का एल्गोरिदम)

Compositing सबसे दूर की लेयर से निकटतम (back-to-front) तक निष्पादित किया जाता है। पहले पृष्ठभूमि लेयर रेंडर की जाती है, फिर प्रत्येक अगली लेयर अपनी पारदर्शिता को ध्यान में रखते हुए पिछले के ऊपर ओवरले की जाती है। Z-order यह निर्धारित करता है कि कौन सी लेयर ऊपर है और नीचे वाली को कवर करेगी।

Compositing एल्गोरिदम

Compositing विभिन्न मिश्रण मोड (blend modes) का समर्थन करता है जो यह निर्धारित करते हैं कि लेयर्स के रंग कैसे संयोजित होते हैं। प्रत्येक मोड एक अलग दृश्य प्रभाव देता है और इसकी अपनी संगणनात्मक लागत होती है।

Premultiplied Alpha

Premultiplied alpha मोड में, रंग चैनलों को पहले से alpha-चैनल (RGB × A) से गुणा करके संग्रहीत किया जाता है। यह प्रत्येक blending प्रक्रिया पर गुणा की आवश्यकता को समाप्त करता है, compositing को तेज़ करता है। Premultiplied alpha iOS Core Animation और Android HWUI में GPU compositing के लिए मानक प्रारूप है।

मोबाइल OS में Compositing

प्रत्येक मोबाइल ऑपरेटिंग सिस्टम का अपना compositing सिस्टम होता है जो अपने हार्डवेयर प्लेटफ़ॉर्म के लिए ऑप्टिमाइज़ किया गया है। मोबाइल OS में Compositing पूरे उपयोगकर्ता इंटरफ़ेस को रेंडर करने के लिए जिम्मेदार होता है।

iOS: Core Animation + Metal

iOS में, compositing Core Animation द्वारा प्रबंधित किया जाता है — एक उच्च-स्तरीय सिस्टम जो Metal या OpenGL ES के ऊपर काम करता है। Core Animation एक layer tree (लेयर्स का पेड़) बनाता है जिसे फिर अंतिम छवि में कम्पोज़िट किया जाता है। Core Animation स्वचालित रूप से निर्धारित करता है कि कौन सी लेयर्स बदली हैं और केवल उन्हें पुनः रेंडर करता है (incremental compositing), जिससे GPU पर लोड कम होता है।

Android: SurfaceFlinger + HWUI

Android में, compositing SurfaceFlinger द्वारा निष्पादित किया जाता है — एक सिस्टम सेवा जो विभिन्न अनुप्रयोगों और सिस्टम UI से सतहों (surfaces) को संयोजित करती है। SurfaceFlinger HWC (Hardware Composer) का उपयोग करता है ताकि compositing कार्य का कुछ भाग डिस्प्ले कंट्रोलर के समर्पित हार्डवेयर को सौंपा जा सके।

Compositing प्रदर्शन

Compositing प्रदर्शन मोबाइल अनुप्रयोगों में एक सामान्य अड़चन है, विशेष रूप से जटिल एनिमेशन और कई अर्ध-पारदर्शी लेयर्स के ओवरले के साथ। प्रत्येक अतिरिक्त लेयर को मेमोरी में पिक्सेल पढ़ने, मिश्रित करने और लिखने की आवश्यकता होती है।

प्रदर्शन को प्रभावित करने वाले कारक

• लेयर्स की संख्या — प्रत्येक लेयर को एक अलग blending पास की आवश्यकता होती है। लेयर्स की संख्या कम करने से compositing रैखिक रूप से तेज़ होता है।
• लेयर रिज़ॉल्यूशन — उच्च रिज़ॉल्यूशन वाली लेयर्स प्रसंस्कृत पिक्सेल की संख्या बढ़ाती हैं। न्यूनतम संभव ऑफ़स्क्रीन बफ़र आकार का उपयोग करें।
• पारदर्शिता और overdraw — अर्ध-पारदर्शी लेयर्स को नीचे के पिक्सेल पढ़ने की आवश्यकता होती है, जिससे बैंडविड्थ बढ़ता है।
• CPU compositing — यदि compositing CPU पर किया जाता है (software rendering), प्रदर्शन नाटकीय रूप से गिर जाता है। GPU compositing हमेशा बेहतर होता है।

GPU Compositing बनाम CPU Compositing

आधुनिक मोबाइल उपकरण विशेष blending इकाइयों के माध्यम से GPU पर compositing करते हैं। GPU compositing तेज़ पिक्सेल मिश्रण के लिए समानांतर ROP इकाइयों और टेक्सचर फ़िल्टर का उपयोग करता है। CPU compositing केवल दुर्लभ मामलों (पुराने उपकरण, परीक्षण) में उपयोग किया जाता है।

Compositing ऑप्टिमाइज़ेशन

Compositing ऑप्टिमाइज़ेशन मोबाइल इंटरफ़ेस विकास में प्रमुख कार्यों में से एक है। UI की स्मूथनेस (60 FPS) सीधे लेयर संयोजन की दक्षता पर निर्भर करती है।

मुख्य ऑप्टिमाइज़ेशन विधियाँ

• लेयर न्यूनीकरण — पूर्व-रेंडरिंग के माध्यम से स्थिर लेयर्स को एक में संयोजित करना (layer flattening)।
• अपारदर्शी लेयर्स — अपारदर्शी लेयर्स को alpha blending की आवश्यकता नहीं होती, जो compositing को काफी तेज़ करता है।
• Incremental compositing — पूरे दृश्य के बजाय केवल बदली हुई लेयर्स को पुनः रेंडर करना (Core Animation द्वारा उपयोग किया जाता है)।
• Hardware Composer — GPU की भागीदारी के बिना हार्डवेयर compositing के लिए HWC का उपयोग।

प्रोफाइलिंग उपकरण

Compositing प्रदर्शन विश्लेषण के लिए उपयोग करें: Core Animation Profiler (Xcode Instruments) — लेयर्स की संख्या और compositing आवृत्ति दिखाता है; GPU Debugger (Android Studio) — GPU लोड और overdraw प्रदर्शित करता है; Overdraw Visualization — एक डिबगिंग उपकरण जो बार-बार पिक्सेल पुनः रेंडरिंग के क्षेत्रों को दिखाता है।