🏝️ 🏳️‍🌈 🐪 3 डी फेसबुक तस्वीरें अंदर: लंबन शेडर्स 💺 🦉 🤹🏿

पिछले कुछ महीनों में, फेसबुक ने 3 डी तस्वीरों की बाढ़ ला दी है। यदि आप उन्हें देख नहीं पा रहे हैं, तो मैं समझाऊंगा: 3 डी तस्वीरें पोस्ट के अंदर की छवियां हैं जो पृष्ठ को स्क्रॉल करते समय या जब आप उनके ऊपर माउस ले जाते हैं तो आसानी से कोण बदल देते हैं।

इस फीचर के सामने आने के कुछ महीने पहले, फेसबुक ने 3D मॉडल के साथ एक समान फीचर का परीक्षण किया था। यद्यपि आप आसानी से समझ सकते हैं कि फेसबुक 3 डी मॉडल को कैसे प्रस्तुत कर सकता है और माउस की स्थिति के अनुसार उन्हें घुमा सकता है, 3 डी फोटो के साथ स्थिति इतनी सहज नहीं हो सकती है।

दो-आयामी छवियों के तीन-आयामी बनाने के लिए फेसबुक जिस तकनीक का उपयोग करता है, उसे कभी-कभी ऊंचाई का मानचित्र ऑफसेट कहा जाता है। यह लंबन नामक एक ऑप्टिकल घटना का उपयोग करता है।

एक 3D फेसबुक फोटो (GIF) का उदाहरण

लंबन क्या है?

यदि आपने सुपर मारियो खेला है, तो आपको पता है कि लंबन क्या है। हालाँकि मारियो एक ही गति से चलता है, ऐसा लगता है कि पृष्ठभूमि में दूर की वस्तुएँ धीमी गति से चलती हैं (नीचे देखें)।

यह प्रभाव यह भ्रम पैदा करता है कि कुछ तत्व, जैसे कि पहाड़ और बादल, दूर स्थित हैं। यह प्रभावी है क्योंकि हमारा मस्तिष्क दूर की वस्तुओं की दूरी का अनुमान लगाने के लिए लंबन (अन्य दृश्य संकेतों के साथ) का उपयोग करता है।

मस्तिष्क दूरी का मूल्यांकन कैसे करता है?

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

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

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

एक पारी के रूप में लंबन

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

आइए कल्पना करें कि हम एक घन देख रहे हैं (नीचे देखें)। यदि हम इसके केंद्र के साथ ठीक संरेखित हैं, तो सामने और पीछे के चेहरे हमारी आंखों के लिए विभिन्न आकारों के दो वर्गों की तरह दिखेंगे। यही संभावना है ।

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

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

केवल एक चीज जिसे हमें निर्धारित करने की आवश्यकता है वह है पैमाने। यदि हम X मीटर को दाईं ओर ले जाते हैं, तो यह प्रतीत होना चाहिए कि ऑब्जेक्ट Y मीटर दूर Z मीटर चला गया है। यदि X छोटा रहता है, तो लंबन त्रिकोणमिति के बजाय रैखिक प्रक्षेप का कार्य बन जाता है। संक्षेप में, इसका मतलब है कि हम कैमरे से उनकी दूरी के आधार पर पिक्सेल को स्थानांतरित करके छोटे 3 डी घुमावों का अनुकरण कर सकते हैं।

गहराई के नक्शे तैयार करें

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

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

इस तरह के पुनर्निर्माण के कार्यान्वयन का विवरण SIGGRAPH2018 में पीटर हेडमैन और जोहानस कोफ द्वारा प्रस्तुत इंस्टेंट 3 डी फोटोग्राफी में वर्णित है।

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

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

भाग 2. लंबन शेड और गहराई के नक्शे

छायादार टेम्पलेट

अगर हम shader का उपयोग करके Facebook के 3D-फ़ोटो को फिर से बनाना चाहते हैं, तो हमें पहले यह तय करना होगा कि हम वास्तव में क्या करेंगे। चूंकि यह प्रभाव 2 डी छवियों के साथ सबसे अच्छा काम करता है, इसलिए एकता स्प्राइट के साथ संगत समाधान को लागू करना तर्कसंगत होगा। हम एक ऐसा शेडर बनाएंगे जिसका उपयोग स्प्राइट रेंडरर के साथ किया जा सकता है।

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

इसे पाने के लिए, आपको यूनिटी डाउनलोड संग्रह पर जाना होगा और आपके द्वारा उपयोग किए जा रहे इंजन के संस्करण के लिए बिल्ट इन शेड्स पैकेज (नीचे देखें) डाउनलोड करना होगा।

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

छवि

दूसरा पहलू जिसे औपचारिक रूप देने की आवश्यकता है वह है हमारे पास मौजूद डेटा। कल्पना कीजिए कि हम दोनों की छवि है कि हम चेतन और इसकी गहराई नक्शा चाहते हैं। उत्तरार्द्ध एक काले और सफेद छवि होगी, जिसमें काले और सफेद पिक्सेल इंगित करते हैं कि वे कैमरे से कितनी दूर या करीब हैं।

इस ट्यूटोरियल में उपयोग की गई छवियाँ डेनिस हॉटसन के अचार बिल्ली परियोजना से ली गई हैं, और यह बिना किसी संदेह के सबसे अच्छा है जिसे आप आज देखेंगे।

इस छवि से जुड़ा ऊंचाई का नक्शा कैमरे से बिल्ली के थूथन की दूरी को दर्शाता है।

यह देखना आसान है कि इतने सरल गहराई वाले नक्शे के साथ अच्छे परिणाम कैसे प्राप्त किए जा सकते हैं। इसका मतलब है कि मौजूदा छवियों के लिए अपने स्वयं के गहराई मानचित्र बनाना आसान है।

गुण

अब जब हमारे पास सभी संसाधन हैं, तो हम लंबन शेडर कोड लिखना शुरू कर सकते हैं। यदि हम मुख्य छवि को स्प्राइट के रूप में आयात करते हैं, तो एकता स्वचालित रूप से _MainTex प्रॉपर्टी के माध्यम से शेडर के पास जाएगी। हालांकि, हमें छायाकार को गहराई से नक्शा उपलब्ध कराने की आवश्यकता है। इसे _HeightTex नामक एक नई shader संपत्ति का उपयोग करके लागू किया जा सकता है। मैंने जानबूझकर इसे _DepthTex नहीं कहने का फैसला किया, ताकि इसे गहराई की बनावट के साथ भ्रमित न करें (यह एक समान एकता अवधारणा है जो दृश्य गहराई मानचित्र को प्रस्तुत करने के लिए उपयोग की जाती है)।

प्रभाव की ताकत को बदलने के लिए, हम _Scale संपत्ति भी जोड़ेंगे।

 Properties { ... _HeightTex ("Heightmap (R)", 2D) = "gray" {} _Scale ("Scale", Vector) = (0,0,0,0) }

इन दो नई संपत्तियों को एक ही नाम के साथ दो चर के अनुरूप होना चाहिए जिन्हें CGPROGRAM / ENDCG जोड़ा जाना चाहिए:

 sampler2D _HeightTex; fixed2 _Scale;

अब सब कुछ तैयार है, और हम कोड लिखना शुरू कर सकते हैं जो ऑफसेट करेगा।

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

गहराई मान के बीच है

$0$ को

$1$ लेकिन हम इसे अंतराल से आगे बढ़ाएंगे

$-1$ को

$+ 1$ । यह आपको सकारात्मक (सफेद रंग) और नकारात्मक (काला रंग) दोनों लंबन प्रदान करने की अनुमति देता है।

सिद्धांत

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

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

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

सबसे अच्छा विकल्प निम्नलिखित समाधान होगा: हम गहराई के नक्शे से वर्तमान पिक्सेल की गहराई प्राप्त करते हैं; फिर, अगर हमें इसे दाईं ओर स्थानांतरित करना है , तो बाईं ओर पिक्सेल के साथ वर्तमान रंग को बदलें (नीचे की छवि देखें)। यहां हम मानते हैं कि यदि आप पिक्सेल को दाईं ओर ले जाना चाहते हैं, तो बाईं ओर के पड़ोसी पिक्सेल को भी उसी तरह से चलना चाहिए।

यह देखना आसान है कि यह केवल एक कम लागत वाली सन्निकटन है जिसे हम वास्तव में हासिल करना चाहते थे। हालांकि, यह बहुत प्रभावी है क्योंकि गहराई के नक्शे आमतौर पर चिकने होते हैं।

कोड

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

यह निम्नलिखित कोड की ओर जाता है:

 void surf (Input IN, inout SurfaceOutput o) { // Displacement fixed height = tex2D(_HeightTex, IN.uv_MainTex).r; fixed2 displacement = _Scale * ((height - 0.5) * 2); fixed4 c = SampleSpriteTexture (IN.uv_MainTex - displacement) * IN.color; ... }

यह तकनीक लगभग सपाट वस्तुओं के साथ अच्छी तरह से काम करती है, जैसा कि नीचे एनीमेशन में देखा गया है।

लेकिन यह वास्तव में 3 डी मॉडल के साथ बहुत अच्छी तरह से काम करता है, क्योंकि 3 डी दृश्य के लिए गहराई बनावट को प्रस्तुत करना बहुत आसान है। नीचे एक 3D रेंडर इमेज और उसका डेप्थ मैप है।

समाप्त परिणाम यहां दिखाए गए हैं:

3 डी फेसबुक तस्वीरें अंदर: लंबन शेडर्स