पारदर्शिता एक दिलचस्प विषय की तरह नहीं लग सकता है। जीआईएफ प्रारूप, जिसने कुछ पिक्सेल को पृष्ठभूमि के माध्यम से चमकने की अनुमति दी थी, 30 साल पहले प्रकाशित किया गया था। पिछले दो दशकों में जारी लगभग हर ग्राफिक डिज़ाइन ट्रांसलूसेंट सामग्री के निर्माण का समर्थन करता है। इन अवधारणाओं को लंबे समय से कुछ नया होना बंद हो गया है।

अपने लेख में मैं यह बताना चाहता हूं कि वास्तव में डिजिटल छवियों में पारदर्शिता की तुलना में यह कहीं अधिक दिलचस्प है - हम जो कुछ भी लेते हैं उसमें एक अदृश्य गहराई और सुंदरता होती है।

अस्पष्टता

यदि आपने कभी गुलाबी चश्मे के माध्यम से देखा है, तो आप कुछ वैसा ही देख सकते हैं जैसा कि नीचे दिए गए आंकड़े में दिखाया गया है। [मूल लेख में, कई चित्र इंटरेक्टिव हैं।] चश्मे को हिलाने की कोशिश करें यह देखने के लिए कि वे कैसे प्रभावित करते हैं जो उनके माध्यम से दिखाई देता है:


इस तरह के चश्मे निम्नानुसार काम करते हैं: वे बहुत सारे लाल, नीले रंग की एक सभ्य राशि और बहुत कम हरे रंग को याद करते हैं। इन बिंदुओं के गणित को तीन समीकरणों के एक सेट में लिखा जा सकता है। पत्र आर ऑपरेशन के परिणाम को इंगित करता है, और पत्र डी उस बिंदु का वर्णन करता है जिसे हम देख रहे हैं। आरजीबी सूचकांक लाल, हरे और नीले घटकों को इंगित करते हैं:

R R = D R × 1.0
R G = D G × 0.7
R B = D B × 0.9

यह सना हुआ ग्लास लाल, हरे और पृष्ठभूमि के नीले घटकों को अलग-अलग ताकत के साथ प्रसारित करता है। दूसरे शब्दों में, गुलाबी चश्मे की पारदर्शिता घटना प्रकाश के रंग पर निर्भर करती है। सामान्य तौर पर, प्रकाश की तरंग दैर्ध्य के आधार पर पारदर्शिता भिन्न हो सकती है , लेकिन इस सरलीकृत उदाहरण में, हम केवल इस बात में रुचि रखते हैं कि चश्मा क्लासिक आरजीबी घटकों को कैसे प्रभावित करते हैं।

सामान्य धूप के चश्मे के व्यवहार को सरल बनाना बहुत सरल है, वे आमतौर पर कुछ राशि से घटना प्रकाश को आकर्षित करते हैं:


ये चश्मा केवल 30% प्रकाश को उनके पास से गुजरने की अनुमति देते हैं। उनके व्यवहार को निम्नलिखित समीकरणों द्वारा वर्णित किया जा सकता है:

R R = D R × 0.3
R G = D G × 0.3
R B = D B × 0.3

सभी तीन रंग घटकों को एक ही मूल्य से कम किया जाता है - घटना प्रकाश का अवशोषण समान है। हम कह सकते हैं कि डार्क ग्लास 30% पारदर्शी (अपारदर्शी) या 70% अपारदर्शी हैं। किसी वस्तु की अपारदर्शिता यह निर्धारित करती है कि वह कितने रंग को अवरुद्ध करती है। कंप्यूटर ग्राफिक्स में, हम आमतौर पर एक सरलीकृत मॉडल के साथ सौदा करते हैं जिसमें इस संपत्ति का वर्णन करने के लिए केवल एक मूल्य की आवश्यकता होती है। अस्पष्टता स्थानिक रूप से भिन्न हो सकती है। उदाहरण के लिए, धुएँ का एक स्तंभ जो अधिक से अधिक पारदर्शी होता जा रहा है।

वास्तविक दुनिया में, 100% की अस्पष्टता वाली वस्तुएं केवल अपारदर्शी होती हैं और वे प्रकाश का संचार नहीं करती हैं। डिजिटल छवियों की दुनिया थोड़ी अलग है। इसमें सीमावर्ती मामले हैं जब ठोस अपारदर्शी वस्तुएं भी प्रकाश की एक निश्चित मात्रा में गुजरती हैं।

कवरेज

वेक्टर ग्राफिक्स पॉइंट, लाइन सेगमेंट, बेजियर कर्व्स और अन्य गणितीय प्राइमेटिव्स का उपयोग करके परिभाषित आकृतियों के स्पष्ट और असीम रूप से सटीक विवरण के साथ सौदा करते हैं। जब आपको कंप्यूटर स्क्रीन पर आंकड़े प्रदर्शित करने की आवश्यकता होती है, तो इन त्रुटिहीन संस्थाओं को बिटमैप में व्यवस्थित करना पड़ता है:


बिटमैप के लिए एक वेक्टर आकार का रेखांकन

रैस्टराइज़ करने का सबसे आदिम तरीका यह है कि पिक्सेल नमूना कहाँ स्थित है - वेक्टर आकार के अंदर या बाहर की जाँच करें। नीचे दिए गए उदाहरणों में, आप त्रिभुज को खींच सकते हैं, एक बढ़े हुए दृश्य में, चालें अधिक सटीक होंगी। एक नीली रूपरेखा मूल वेक्टर ज्यामिति को इंगित करती है। जैसा कि आप देख सकते हैं, त्रिकोण के किनारों पर सीढ़ी बदसूरत दिखती है और ज्यामिति को आगे बढ़ाते समय बहुत फ़्लिकर करती है:


इस दृष्टिकोण का नुकसान यह है कि हम प्रत्येक प्रदर्शित पिक्सेल के लिए केवल एक चेक करते हैं, और परिणाम दो संभावित मूल्यों में से एक के अंदर - बाहर या बाहर होते हैं।

आप वेक्टर ज्यामिति को कई गुणा कर सकते हैं प्रति पिक्सेल कई बार चरणों का एक बड़ा उन्नयन पाने के लिए और यह तय करें कि कुछ पिक्सेल केवल आंशिक रूप से बंद हैं। पांच संभावित स्तरों का प्रतिनिधित्व करने के लिए चार नमूने बिंदुओं का उपयोग करना एक संभव उपाय है: 0, ^{1 2} ₄ , ² , ₄ , ³ : _4, और 1:


त्रिकोण के किनारों की गुणवत्ता में सुधार हुआ है, लेकिन कवरेज के केवल पांच संभावित स्तर अक्सर पर्याप्त नहीं होते हैं और हम आसानी से एक बेहतर परिणाम प्राप्त कर सकते हैं। यद्यपि सिग्नल प्रोसेसिंग की दुनिया में एक छोटे वर्ग के रूप में पिक्सेल का दृश्य अस्वीकृति के साथ देखा जाता है , कुछ संदर्भों में यह एक उपयोगी मॉडल है जो हमें वेक्टर ज्यामिति द्वारा पिक्सेल के सटीक कवरेज की गणना करने की अनुमति देता है। एक रेखा और एक चौराहे का अंतर हमेशा एक ट्रेपोज़ॉइड और एक आयत में विघटित हो सकता है:


एक रेखा खंड एक वर्ग को एक आघात और एक आयत में विभाजित करता है

आप आसानी से दोनों भागों के क्षेत्र की गणना कर सकते हैं, और वर्ग के क्षेत्र से विभाजित उनकी राशि पिक्सेल कवरेज का प्रतिशत निर्धारित करती है। इस प्रकार, कवरेज की गणना मनमानी सटीकता के साथ एक सटीक संख्या के रूप में की जाती है। नीचे दिखाए गए डेमो में, इस पद्धति का उपयोग बहुत बेहतर किनारों को प्रस्तुत करने के लिए किया जाता है जो त्रिकोण को खींचते समय भी चिकनी रहती हैं:


जब अधिक जटिल आकार की बात आती है, उदाहरण के लिए, दीर्घवृत्त या बेजियर घटता है , तो उन्हें अक्सर सरल रेखा खंडों में विभाजित किया जाता है जो आपको आवश्यक सटीकता के साथ कवरेज की गणना करने की अनुमति देता है।

वेक्टर ग्राफिक्स के उच्च-गुणवत्ता वाले रेंडरिंग के लिए आंशिक कवरेज की अवधारणा महत्वपूर्ण है और पाठ को रेंडर करने के लिए अधिक महत्वपूर्ण है। यदि आप इस लेख का स्क्रीनशॉट लेते हैं और इसे ध्यान से देखते हैं, तो आप देखेंगे कि ग्लिफ़ के लगभग सभी किनारों को केवल आंशिक रूप से पिक्सेल कवर करते हैं:


पाठ रेंडरिंग में आंशिक कवरेज का सक्रिय रूप से उपयोग किया जाता है

ऑब्जेक्ट की अपारदर्शिता होने और इसे व्यक्तिगत पिक्सेल के साथ कवर करने पर, आप उन्हें एक मूल्य में जोड़ सकते हैं।

अल्फा

किसी वस्तु की अस्पष्टता और उसके पिक्सेल कवरेज को अल्फा कहा जाता है:

= ×

पिक्सेल क्षेत्र के 30% को कवर करने वाली 60% अपारदर्शिता वाली वस्तु, इस पिक्सेल में 18% का अल्फा मान है। स्वाभाविक रूप से, जब ऑब्जेक्ट पारदर्शी होता है या पूरी तरह से पिक्सेल को कवर नहीं करता है, तो इस पिक्सेल में अल्फा मान 0. है। गुणन के बाद, अस्पष्टता और कोटिंग के बीच के अंतर गायब हो जाते हैं, जो एक मायने में इस तथ्य को सही ठहराता है कि "अल्फा" और "अपारदर्शिता" की अवधारणाओं को समानार्थक शब्द के रूप में उपयोग किया जाता है।

अल्फा को अक्सर बिटमैप छवि के चौथे चैनल के रूप में दर्शाया जाता है। लाल, हरे और नीले रंग के सामान्य मूल्यों को एक अल्फा मान द्वारा पूरक किया जाता है, जिससे चार RGBA मान बनते हैं।

जब यह स्मृति में अल्फा मूल्यों को संग्रहीत करने की बात आती है, तो इसके लिए बस कुछ बिट्स का उपयोग करने का प्रलोभन होता है। अपारदर्शी वस्तुओं के किनारों के पिक्सेल को कवर करने के मामले में, ऐसा लगता है कि स्क्रीन के पिक्सेल घनत्व के आधार पर 4 या 3 बिट्स काफी पर्याप्त होंगे:


हालांकि, अपारदर्शिता अल्फा मान को भी प्रभावित करती है, इसलिए कम बिट गहराई आसानी से बदलते पारदर्शिता के कुछ मामलों में विनाशकारी हो सकती है। नीचे दी गई छवि अपारदर्शी काले से सफेद तक एक ढाल दिखाती है, जो दर्शाती है कि कम गहराई से बहुत मजबूत रंग भिन्नताएं होती हैं:


जाहिर है, अल्फा के लिए अधिक बिट्स, बेहतर और सबसे अधिक बार, 8 की थोड़ी गहराई का उपयोग रंग घटकों की सटीकता से मेल खाने के लिए किया जाता है, यही वजह है कि कई आरजीबीए बफर प्रति पिक्सेल 32 बिट्स पर कब्जा कर लेते हैं। यह भी ध्यान देने योग्य है कि, रंग घटकों के विपरीत, जो अक्सर गैर-रैखिक परिवर्तन का उपयोग करके एन्कोडेड होते हैं, अल्फा को रैखिक रूप से संग्रहीत किया जाता है - 0.5 का एन्कोडेड मान 0.5 के अल्फा मान से मेल खाती है।

अल्फा के बारे में बोलते हुए, हमने अन्य सभी रंग घटकों को पूरी तरह से अनदेखा कर दिया, लेकिन पृष्ठभूमि के रंग को अवरुद्ध करने के अलावा, पिक्सेल खुद ही थोड़ा रंग जोड़ सकता है। यह विचार काफी सरल है - एक पारदर्शी गुलाबी वस्तु आने वाली पृष्ठभूमि की रोशनी का हिस्सा अवरुद्ध करती है और थोड़ा गुलाबी प्रकाश उत्सर्जित करती है या प्रतिबिंबित करती है:


ध्यान दें कि यह सना हुआ ग्लास की तरह व्यवहार नहीं करता है। ग्लास बस अलग चमक के साथ पृष्ठभूमि प्रकाश का हिस्सा ब्लॉक करता है। यदि आप गुलाबी कांच के माध्यम से पूरी तरह से काली वस्तु को देखते हैं, तो इसका कालापन बना रहेगा, क्योंकि काली वस्तु का उत्सर्जन नहीं होता है और यह आपके प्रकाश को प्रतिबिंबित नहीं करता है। हालांकि, पारभासी गुलाबी वस्तु अपने स्वयं के प्रकाश को जोड़ती है । यदि आप इसे एक काली वस्तु के ऊपर रखते हैं, तो इसका परिणाम गुलाबी होगा। इस व्यवहार का एक अच्छा एनालॉग हवा में निलंबित सामग्री है, जैसे धुंध, धुआं, कोहरा, या कुछ रंगीन पाउडर।

एक अल्फा चैनल का प्रतिपादन करना थोड़ा अधिक कठिन है - एक पूरी तरह से पारदर्शी वस्तु परिभाषा द्वारा अदृश्य है, इसलिए वस्तुओं के बीच अंतर करने के लिए, हमें दो चाल का उपयोग करने की आवश्यकता है। एक बिसात पृष्ठभूमि से पता चलता है कि छवि के कौन से हिस्से पारदर्शी हैं; इस पैटर्न का उपयोग कई चित्रमय अनुप्रयोगों में किया जाता है:


शतरंज पैटर्न पारदर्शी टुकड़े दिखाता है।

छवि के नीचे के चार छोटे वर्ग हमें बताते हैं कि हम छवि के लाल, हरे, नीले और अल्फा घटकों को देखते हैं। कुछ मामलों में, अल्फा चैनल मूल्यों को सीधे देखना उपयोगी है, और उन्हें प्रदर्शित करने का सबसे आसान तरीका ग्रे के रंगों का उपयोग कर रहा है:


विभिन्न सतहों पर RGB और A मान प्रदर्शित करें

ब्राइट ग्रे का शेड, उच्च अल्फा मान, यानी शुद्ध काला 0% अल्फा से मेल खाता है, और शुद्ध सफेद 100% अल्फा से मेल खाता है। छोटे वर्गों से संकेत मिलता है कि छवि के आरजीबी और ए घटकों को दो भागों में विभाजित किया गया है।

अल्फा घटक स्वयं ही विशेष रूप से उपयोगी नहीं है, लेकिन यह बहुत महत्वपूर्ण हो जाता है जब हम कंपोजिंग के बारे में बात करते हैं।

सरल रचना

2 डी रेंडरिंग के बहुत कम प्रभाव एक ऑपरेशन में लागू किए जा सकते हैं, और एक समाप्त परिणाम बनाने के लिए, हम एक कंपोजिंग प्रक्रिया का उपयोग करते हैं जो विभिन्न छवियों को जोड़ती है। उदाहरण के लिए, एक सरल "रद्द करें" बटन को पांच अलग-अलग तत्वों की रचना करके बनाया जा सकता है:


रद्द करने वाले बटन के लिए समग्र तत्व

कंपोजिटिंग अक्सर कई चरणों में की जाती है, जिनमें से प्रत्येक में दो चित्र संयुक्त होते हैं। कंपोज़िटिंग में उपयोग की जाने वाली अग्रभूमि छवि को आमतौर पर स्रोत कहा जाता है । कंपोज़िटिंग में उपयोग की जाने वाली पृष्ठभूमि छवि, जिस स्रोत पर सुपरिंपोज की जाती है, आमतौर पर गंतव्य कहलाती है ।

हम एक अपारदर्शी पृष्ठभूमि पर रचना करके शुरू करेंगे, क्योंकि यह एक बहुत ही सामान्य मामला है। स्क्रीन पर जो कुछ भी आप देखते हैं वह अंततः एक अपारदर्शी गंतव्य पर कंपोज़ करके बनाया गया है।

जब स्रोत का अल्फा मान 100% होता है, तो स्रोत अपारदर्शी होता है और पूरी तरह से गंतव्य को कवर करना चाहिए। यदि अल्फा मान 0% है, तो स्रोत पूरी तरह से पारदर्शी है और किसी भी तरह से गंतव्य को प्रभावित नहीं करता है। 25% का अल्फ़ा मान ऑब्जेक्ट को 25% प्रकाश उत्सर्जित करने की अनुमति देता है और 75% प्रकाश पृष्ठभूमि से गुजरता है, और इस प्रकार:


पीले रंग के गंतव्य के लिए विभिन्न अल्फा मूल्यों के साथ बैंगनी स्रोत की रचना

आप पहले से ही समझ सकते हैं कि सब कुछ क्या हो रहा है - एक अपारदर्शी पृष्ठभूमि पर अल्फा कंपोज़िंग का एक सरल मामला - यह गंतव्य और स्रोत रंगों के बीच सिर्फ रैखिक प्रक्षेप है। नीचे दिए गए ग्राफ़ में, स्लाइडर स्रोत के अल्फा मान को नियंत्रित करता है, और लाल, हरे और नीले ग्राफ आरजीबी घटकों के मूल्यों को प्रदर्शित करते हैं। R का परिणाम स्रोत S और गंतव्य D के बीच का मिश्रण है:


यहाँ क्या होता है इसका वर्णन नीचे दिखाए गए समीकरणों द्वारा किया जा सकता है। पहले की तरह, सूचकांक घटक को दर्शाता है, अर्थात, S _A स्रोत में अल्फा मान है, और D _G गंतव्य में हरा मूल्य है:

R R = S R × S A + D R × (1 − S A )

R G = S G × S A + D G × (1 − S A )

R B = S B × S A + D B × (1 − S A )

लाल, हरे और नीले रंग के घटकों के समीकरणों में एक समान उपस्थिति है, इसलिए आप बस _{आरजीबी} सूचकांक का उपयोग कर सकते हैं और उन्हें एक में जोड़ सकते हैं:

R RGB = S RGB × S A + D RGB × (1 − S A )

इसके अलावा, चूंकि गंतव्य अपारदर्शी है और पहले से ही सभी पृष्ठभूमि प्रकाश को अवरुद्ध करता है, हम जानते हैं कि परिणाम का अल्फा मान हमेशा 1 होता है:

R A = 1

एक अपारदर्शी पृष्ठभूमि पर रचना सरल है, लेकिन यह क्षमताओं में काफी सीमित है। कई मामलों में, एक अधिक विश्वसनीय समाधान की आवश्यकता होती है।

मध्यवर्ती बफ़र्स

नीचे दी गई छवि ए, बी, और सी। लेबल वाले तीन अलग-अलग परतों को कंपोज़ करने की दो-चरण प्रक्रिया को दर्शाती है। प्रतीक का अर्थ होगा "कंपोज़िंग द्वारा सुपरइम्पोज़्ड":


तीन परतों के दो-चरण कंपोजिंग का परिणाम

पहले हम कम्पोज़िंग करके C के साथ B को ओवरले करते हैं, और फिर समाप्त इमेज प्राप्त करने के लिए A को ओवरले करते हैं। निम्नलिखित उदाहरण में, हम चीजों को थोड़ा अलग तरीके से करेंगे। पहले, हम शीर्ष दो परतों को कंपोज़ करके कनेक्ट करेंगे, और फिर अंतिम गंतव्य पर परिणाम को ओवरले करेंगे:


एक अलग क्रम में तीन परतों के दो-चरण कंपोजिंग का परिणाम

आप शायद सोच रहे हैं कि क्या ऐसी स्थिति व्यवहार में आती है, लेकिन वास्तव में यह बहुत आम है। कई गैर-तुच्छ कंपोजिट संचालन और प्रतिपादन प्रभाव, जैसे मास्किंग और धुंधलापन, एक मध्यवर्ती बफर से गुजरने की आवश्यकता होती है जिसमें केवल आंशिक कंपोज़िंग परिणाम होते हैं। इस अवधारणा के अलग-अलग नाम हैं: ऑफ़स्क्रीन पास, पारदर्शिता परतें, या साइड बफ़र्स, लेकिन आमतौर पर वे एक ही विचार पर आधारित होते हैं।

हमारे लिए जो अधिक महत्वपूर्ण है वह यह है कि पारदर्शिता के साथ लगभग किसी भी छवि को कुछ प्रतिपादन के आंशिक परिणाम के रूप में माना जा सकता है, जिसे बाद में अंतिम गंतव्य पर कंपोज करके सुपरिंपोज किया जाएगा:


एक क्लिपबोर्ड में एक बटन की आंशिक रचना

हमें यह समझने की जरूरत है कि एक ही रंग और अस्पष्टता वाली एक छवि (A⇨B) के साथ पारभासी छवियों ए और बी की रचना को कैसे बदलना है। चलो अंतिम बफर के अल्फा मान की गणना करके शुरू करते हैं।

अल्फा वैल्यू को मिला कर

यह आपके लिए स्पष्ट नहीं हो सकता है कि दो वस्तुओं की अस्पष्टता को कैसे संयोजित किया जाए, लेकिन अगर हम इसके बजाय पारदर्शिता की बात करें तो इस कार्य के बारे में बात करना आसान है।

मान लीजिए कि प्रकाश की एक निश्चित मात्रा पहली वस्तु से गुजरती है, और फिर दूसरी वस्तु से। यदि पहली वस्तु की पारदर्शिता 80% है, तो यह घटना के 80% प्रकाश को पार कर जाएगी। इसी तरह, 60% पारदर्शिता के साथ एक दूसरी वस्तु 60% प्रकाश को इसके पास से गुजरने देगी, जो हमें 60% × 80% = 48% मूल प्रकाश देता है। आप मूल लेख में पारदर्शिता के साथ प्रयोग कर सकते हैं; मत भूलो कि स्लाइडर्स पारदर्शिता को नियंत्रित करते हैं न कि प्रकाश के मार्ग में वस्तुओं की अपारदर्शिता:


स्वाभाविक रूप से, जब या तो पहली या दूसरी वस्तु अपारदर्शी होती है, तो कोई प्रकाश उनके बीच से नहीं गुजरता है, यहां तक ​​कि दूसरा पूरी तरह से पारदर्शी होता है।

यदि ऑब्जेक्ट D में पारदर्शिता D _{T है} , और ऑब्जेक्ट S में पारदर्शिता S _{T है} , तो इन दोनों वस्तुओं की अंतिम सामान्य पारदर्शिता R _T उनके उत्पाद के बराबर है:

आर _टी = डी _टी × एस _टी

हालाँकि, पारदर्शिता सिर्फ एक इकाई शून्य से अल्फा है, इसलिए प्रतिस्थापन हमें निम्नलिखित देता है:

1 - आर _ए = (1 - डी _ए ) × (1 - एस _ए )

इस अभिव्यक्ति में विस्तार किया जा सकता है:

1 - आर _ए = 1 - डी _ए - एस _ए + डी _ए × एस _ए

और इसे इस तरह सरल करें:

आर _ए = डी _ए + एस _ए - डी _ए × एस _ए

इसे दो समान प्रकारों में से एक में घटाया जा सकता है:

R _A = S _A + D _A × (1 - S _A )

R _A = D _A + S _A × (1 - D _A )

जल्द ही हम देखेंगे कि दूसरा अधिक बार उपयोग किया जाता है। यह भी ध्यान रखना दिलचस्प है कि परिणामी अल्फा मान वस्तुओं के सापेक्ष क्रम पर निर्भर नहीं करता है - परिणामी पिक्सेल की अपारदर्शिता समान है, भले ही आप स्रोत और गंतव्य स्वैप करें। यह बहुत तार्किक है। दो वस्तुओं के बीच से गुजरने वाले प्रकाश को उसी तरह से बाहर निकलना चाहिए, जो कि तारे के किसी भी तरफ, सामने से या पीछे से।

रंग संयोजन

अल्फा की गणना करना इतना मुश्किल नहीं था, इसलिए आरजीबी घटकों की गणना को समझने की कोशिश करें। स्रोत छवि में रंग एस _{आरजीबी है} , लेकिन इसकी अपारदर्शिता एस _ए केवल परिणाम में इन दो मूल्यों के उत्पाद को ध्यान में रखती है:

S _RGB × S _A

गंतव्य छवि का रंग डी _{आरजीबी है} , अपारदर्शिता इसे प्रकाश डी _{आरजीबी} × डी _{ए का} उत्सर्जन करती है, हालांकि, प्रकाश का हिस्सा छवि एस की अपारदर्शिता द्वारा अवरुद्ध है, इसलिए गंतव्य का सभी प्रभाव समान है:

D _RGB × D _A × (1 - S _A )

S और D से प्रकाश का कुल योग उनकी राशि के बराबर है:

S _RGB × S _A + D _RGB × D _A × (1 - S _A )

इसी तरह, मर्ज की गई परतों का योगदान उनके रंग समय के अनुसार उनकी अस्पष्टता के बराबर है:

आर _RGB × R _A

हम चाहते हैं कि ये दो मान मेल खाएं:

R _RGB × R _A = S _RGB × S _A + D _RGB × D _A × (1 - S _A )

हमें अंतिम समीकरण क्या देता है:

R _A = S _A + D _A × (1 - S _A )

R _RGB = (S _RGB × S _A + D _RGB × D _A × (1 - S _A )) / R _A

देखें कि दूसरा समीकरण कितना जटिल है! ध्यान दें कि परिणाम के आरजीबी मूल्यों को प्राप्त करने के लिए, हमें अल्फा मान से विभाजित करने की आवश्यकता है। हालांकि, कंपोज़िटिंग के अगले चरण के लिए, अल्फा वैल्यू से गुणा की आवश्यकता होगी, क्योंकि वर्तमान ऑपरेशन का परिणाम अगले ऑपरेशन का नया स्रोत या गंतव्य बन जाएगा। यह बस बदसूरत है।

आर _{आरजीबी} के एक दूसरे के लगभग अंतिम रूप में चलते हैं:

R _RGB × R _A = S _RGB × S _A + D _RGB × D _A × (1 - S _A )

स्रोत, गंतव्य और परिणाम उनके अल्फा घटकों द्वारा गुणा किए जाते हैं। इससे हमें यह समझ में आता है कि पिक्सेल का रंग और अल्फा "जैसे" एक साथ होना है, इसलिए हमें एक कदम पीछे ले जाने और जिस तरह से हम रंग की जानकारी संग्रहीत करते हैं, उस पर पुनर्विचार करने की आवश्यकता है।

प्रेमलतात्मक अल्फ़ाज़

याद रखें कि हमने अस्पष्टता के बारे में बात की थी - यदि वस्तु आंशिक रूप से अपारदर्शी है, तो परिणाम में इसका योगदान भी आंशिक होगा। Premultiplied अल्फा की अवधारणा ("अल्फा द्वारा पूर्व गुणा") इस विचार को लागू करता है। RGB घटकों के मान, जैसा कि नाम से पता चलता है, अल्फा घटक द्वारा पूर्व-गुणा किया जाता है। चलो प्रारंभिक गुणन के बिना रंग से शुरू करते हैं:

(1.00, 0.80, 0.30, 0.40)

अल्फा द्वारा प्रारंभिक गुणन हमें निम्नलिखित देता है:

(0.40, 0.32, 0.12, 0.40)

आइए एक बार में कई पिक्सेल देखें। नीचे दिया गया आंकड़ा दिखाता है कि रंग जानकारी पहले अल्फा के गुणा के बिना कैसे संग्रहीत की जाती है:


पूर्व गुणा के बिना छवि में आरजीबी और ए जानकारी

ध्यान दें कि जिन क्षेत्रों में अल्फा 0 है, वहां आरजीबी मान हो सकते हैं, जैसा कि छवि में हरे और नीले रंग के ग्लिच से देखा जा सकता है। अल्फा द्वारा प्रारंभिक गुणन के मामले में, रंग जानकारी पिक्सेल अपारदर्शिता मूल्यों को भी संग्रहीत करती है:


पूर्व-गुणित छवि में RGB और A जानकारी

Premultiplied अल्फ़ा को कभी-कभी संबद्ध अल्फ़ा कहा जाता है, और गैर-प्रीमीप्लीड अल्फ़ा को कभी-कभी सीधे या बिना सोचे-समझे अल्फा कहा जाता है।

जब रंग का अल्फा घटक 0 होता है, तो प्रारंभिक गुणन उनके मूल्यों की परवाह किए बिना अन्य सभी घटकों को रीसेट करता है:

(0.0, 0.0, 0.0, 0.0)

प्रीफ़िलिपिड अल्फा के मामले में, केवल एक पूरी तरह से पारदर्शी रंग है, और यह आकर्षक है।

रंग घटकों के इस प्रसंस्करण के फायदे धीरे-धीरे आपके लिए स्पष्ट हो जाएंगे, लेकिन इससे पहले कि हम कंपोजिटिंग उदाहरण पर लौटते हैं, आइए देखें कि कैसे premultiplied अल्फा कुछ अन्य रेंडरिंग समस्याओं को हल करने में मदद करता है।

छानने

गॉसियन ब्लर एक दिलचस्प डिफोकसड बैकग्राउंड बनाने या कुछ यूआई तत्वों की सामग्री के बैकग्राउंड हिस्से की उच्च आवृत्ति को कम करने का एक लोकप्रिय तरीका है। जैसा कि हम देखेंगे, सही दिखने वाले धुंधला बनाने के लिए पूर्व-गुणा अल्फा महत्वपूर्ण है।

जिस छवि का हम विश्लेषण करेंगे, वह पृष्ठभूमि को 1% अपारदर्शी नीले रंग से भरकर बनाई गई है, जिसके ऊपर एक अपारदर्शी लाल वृत्त खींचा गया है। पहले, आइए बिना प्रारंभिक गुणन के एक उदाहरण देखें। मैंने आरजीबी चैनलों को अल्फा चैनल से अलग किया, यह समझने के लिए कि क्या चल रहा था। तीर धब्बा संचालन को इंगित करता है:


पूर्व गुणन के बिना धुंधला सामग्री

तैयार परिणाम में एक बदसूरत नीला प्रभामंडल है। ऐसा इसलिए हुआ क्योंकि ब्लू बैकग्राउंड ब्लर के दौरान रेड एरिया पर लीक हो गया था और तभी कंपोजिंग के दौरान अल्फा वेट को इसमें जोड़ा गया था।

जब रंग अल्फा द्वारा पूर्व-गुणा किए जाते हैं, तो परिणाम सही होता है:




- 1% , .

, destination — , « ». , , , - , . , , , destination:


destination

, destination, — « » (nearest-neighbor interpolation), .

destination. . ( ), , . source destination, :


यह समाधान काफी कार्यात्मक है और पिक्सल में एक समग्र रंग है, लेकिन गुणवत्ता स्वीकार्य नहीं है। बिलिनियर इंटरपोलेशन का उपयोग करना बेहतर होगा , जो नमूना छवि के चार निकटतम पिक्सल के भारित औसत की गणना करता है:


, , , «» . , [ ], — .

, premultiplied alpha , :


— .

, , , . , - , .

. :

R _RGB ×R _A = S _RGB ×S _A + D _RGB ×D _A ×(1 − S _A )

premultiplied alpha, , . :

R _RGB = S _RGB + D _RGB ×(1 − S _A )

:

R _A = S _A + D _A × (1 − S _A )

, , - , , :

R = S + D × (1 − S _A )

, premultiplied alpha . , . :

R = S + D × (1 − S _A )

source-over, sover normal, , , . , -, .

source-over, , . . :

R = (((A⇨B)⇨C)⇨D)⇨E

R = (A⇨B)⇨(C⇨(D⇨E))

R = A⇨(B⇨(C⇨(D⇨E)))

, . , , , .

source-over, . .

-

1984 “Compositing Digital Images” . premultiplied alpha source-over, -, , . , .

Over

, . destination «», source «». , . - . . - source-over, :

R = S + D × (1 − S _A )

R = S × (1 − D _A ) + D

destination-over, , «» source-over — destination source , destination source. , destination-over , , .

Out

source-out destination-out source destination:

R = S × (1 − D _A )

R = D × (1 − S _A )

Destination-out, - destination.

In

source-in destination-in :

R = S × D _A

R = D × S _A

.

Atop

source-atop destination-atop , destination:

R = S × D _A + D × (1 − S _A )

R = S × (1 − D _A ) + D × S _A

Xor

( xor ) source, destination, :

R = S × (1 − D _A ) + D × (1 − S _A )

Source, Destination, Clear

. Source , copy , source. , destination source destination . clear :

R = S

R = D

R = 0

. clear , , . , source , , source.

-

, , . , . . , , , :


, , , - , .

-, , . Source F _S destination, F _D :

R = S×F _S + D×F _D

F _S 0, 1, D _A 1 − D _A , F _D 0, 1, S _A 1 − S _A . source destination , , , . :


. , .

, F _S , F _D 1. plus , lighter plus-lighter :

R = S + D

source destination:


, plus

, (cyan). — , , .

, . .

, premultiplied alpha source-over . :

R = S + D × (1 − S _A )

source , RGB- plus :


, source-over

, — . , , , - , , . , , plus .

. « » , -.

, :




50%, , :




, . , , , :




, .

. , , . , :




, , :




-, , . , , , , . , . . , :


,

, , . in/out, , .

8- - 256 , 2 ¹⁶ . , , .

, . , , .

, , , . , ; :


,

. :


,

, . , , . , 50% sRGB , 50%, :




sRGB source destination , . :




, . , , . 50% 73.5% sRGB.

, premultiplied alpha. , .. . , .

Premultiplied Alpha

, , premultiplied alpha « » . — , . 8- 150, 20%.

round(150 × 0.2) = 30

151, :

round(151 × 0.2) = 30

, . , 148, 149, 150, 151 152 30, :


20% 8-

, , . 256 ⁴ ( 4,3 ) 8- RGBA 25.2%; , 2 32- .

, , . , , , . .

, . , , . , , 8- — चल बिन्दु ।

अतिरिक्त पढ़ने

- Pixar . “Alpha and the History of Digital Compositing” “alpha”, , .

“Interpreting Alpha” . , .

premultiplied alpha “GPUs prefer premultiplication” . , , 3D-, .

-, , -, , .

, , RGB-, . 2D-.

, , , , .