शुरुआती के लिए 3 डी गेम शेड्स

अपने 3 डी गेम में बनावट, प्रकाश व्यवस्था, छाया, सामान्य नक्शे, चमकती हुई वस्तु, परिवेश रोड़ा और अन्य प्रभावों को जोड़ना सीखना चाहते हैं? बहुत बढ़िया! यह लेख छायांकन तकनीकों का एक सेट प्रस्तुत करता है जो आपके खेल के ग्राफिक्स के स्तर को नई ऊंचाइयों तक पहुंचा सकता है। मैं प्रत्येक तकनीक को इस तरह समझाता हूं कि आप इस जानकारी को किसी भी टूल स्टैक पर लागू / पोर्ट कर सकते हैं, यह गोडोट, यूनिटी या कुछ और हो सकता है।

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

ट्रेनिंग

नीचे वह प्रणाली है जिसका उपयोग मैंने नमूना कोड के विकास और परीक्षण के लिए किया था।

बुधवार

नमूना कोड निम्नलिखित वातावरण में विकसित और परीक्षण किया गया था:

• लिनक्स मंज़रो 4.9.135-1-MANJARO
• OpenGL रेंडरर स्ट्रिंग: GeForce GTX 970 / PCIe / SSE2
• OpenGL संस्करण स्ट्रिंग: 4.6.0 NVIDIA 410.73
• g ++ (GCC) 8.2.1 20180831
• पांडा 3 डी 1.10.1-1

सामग्री

mill-scene.egg बनाने के लिए उपयोग की जाने वाली प्रत्येक ब्लेंडर सामग्री में दो बनावट होती हैं।

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

ध्यान दें कि दृश्य ग्राफ पांडा 3 डी इंजन कार्यान्वयन की एक विशेषता है ।


यहाँ एक रंग का सामान्य नक्शा है जिसमें केवल रंग [red = 128, green = 128, blue = 255] ।

यह रंग इकाई अक्ष को इंगित करता है, जो z अक्ष की सकारात्मक दिशा में इंगित करता है [0, 0, 1] ।

 [0, 0, 1] = [ round((0 * 0.5 + 0.5) * 255) , round((0 * 0.5 + 0.5) * 255) , round((1 * 0.5 + 0.5) * 255) ] = [128, 128, 255] = [ round(128 / 255 * 2 - 1) , round(128 / 255 * 2 - 1) , round(255 / 255 * 2 - 1) ] = [0, 0, 1] 

यहाँ हम यूनिट को सामान्य देखते हैं [0, 0, 1] जिसे एक सादे नीले रंग में परिवर्तित किया जाता है [128, 128, 255] , और सॉलिड ब्लू एक यूनिट में बदल जाता है।

यह सामान्य मानचित्र ओवरले तकनीकों पर अनुभाग में अधिक विस्तार से वर्णित है।

Panda3D

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

यह गौर करने लायक है कि gl-coordinate-system default , textures-power-2 down और textures-auto-power-2 1 config.prc जोड़ा गया था। वे मानक पांडा 3 डी विन्यास में निहित नहीं हैं।

डिफ़ॉल्ट रूप से, पांडा 3 डी एक ऊपर की ओर जेड अक्ष के साथ एक दाहिने हाथ के समन्वय प्रणाली का उपयोग करता है, जबकि ओपनजीएल एक दाहिने हाथ के समन्वय प्रणाली का उपयोग एक ऊपर की ओर धुरी के साथ करता है।

gl-coordinate-system default आपको shaders के अंदर दो निर्देशांक प्रणालियों के बीच परिवर्तनों से छुटकारा पाने की अनुमति देता है।

textures-auto-power-2 1 हमें उन बनावट आकारों का उपयोग करने की अनुमति देता है जो दो की शक्ति नहीं हैं, अगर सिस्टम उनका समर्थन करता है।

एसएसएओ का प्रदर्शन करते समय या स्क्रीन / खिड़की के भीतर अन्य तकनीकों को लागू करते समय यह सुविधाजनक है, क्योंकि स्क्रीन / खिड़की का आकार आमतौर पर दो की शक्ति नहीं है।

textures-power-2 down textures के आकार को दो की शक्ति तक कम कर देता है यदि सिस्टम केवल दो की शक्तियों के बराबर आकार वाले बनावट का समर्थन करता है।

उदाहरण कोड बनाएँ

यदि आप नमूना कोड चलाना चाहते हैं, तो आपको पहले इसे बनाना होगा।

पांडा 3 डी लिनक्स, मैक और विंडोज पर चलता है।

लिनक्स

अपने वितरण के लिए पांडा 3 डी एसडीके स्थापित करके शुरू करें।

पता लगाएं कि पांडा 3 डी हेडर और लाइब्रेरी कहां हैं। सबसे अधिक संभावना है, वे /usr/lib/panda3d/ /usr/include/panda3d/ और /usr/lib/panda3d/ ।

फिर इस रिपॉजिटरी को क्लोन करें और अपनी डायरेक्टरी में नेविगेट करें।

git clone https://github.com/lettier/3d-game-shaders-for-beginners.git
cd 3d-game-shaders-for-beginners

अब सोर्स कोड को आउटपुट फाइल में संकलित करें।

g++ \
-c main.cxx \
-o 3d-game-shaders-for-beginners.o \
-std=gnu++11 \
-O2 \
-I/usr/include/python2.7/ \
-I/usr/include/panda3d/

आउटपुट फ़ाइल बनाने के बाद, आउटपुट फ़ाइल को उसकी निर्भरता के साथ जोड़कर एक निष्पादन योग्य फ़ाइल बनाएं।

g++ \
3d-game-shaders-for-beginners.o \
-o 3d-game-shaders-for-beginners \
-L/usr/lib/panda3d \
-lp3framework \
-lpanda \
-lpandafx \
-lpandaexpress \
-lp3dtoolconfig \
-lp3dtool \
-lp3pystub \
-lp3direct \
-lpthread

अधिक जानकारी के लिए पांडा 3 डी मैनुअल देखें।

मैक

मैक के लिए पांडा 3 डी एसडीके स्थापित करके शुरू करें।

पता लगाएं कि पांडा 3 डी के हेडर और लाइब्रेरी कहां हैं।

फिर रिपॉजिटरी को क्लोन करें और अपनी निर्देशिका में नेविगेट करें।

git clone https://github.com/lettier/3d-game-shaders-for-beginners.git
cd 3d-game-shaders-for-beginners

अब सोर्स कोड को आउटपुट फाइल में संकलित करें। आपको यह खोजने की आवश्यकता है कि पाइथन 2.7 और पांडा 3 डी में शामिल निर्देशिकाएं कहां हैं।

clang++ \
-c main.cxx \
-o 3d-game-shaders-for-beginners.o \
-std=gnu++11 \
-g \
-O2 \
-I/usr/include/python2.7/ \
-I/Developer/Panda3D/include/

आउटपुट फ़ाइल बनाने के बाद, आउटपुट फ़ाइल को उसकी निर्भरता के साथ जोड़कर एक निष्पादन योग्य फ़ाइल बनाएं।

आपको यह खोजने की आवश्यकता है कि पांडा 3 डी लाइब्रेरी कहाँ स्थित हैं।

clang++ \
3d-game-shaders-for-beginners.o \
-o 3d-game-shaders-for-beginners \
-L/Developer/Panda3D/lib \
-lp3framework \
-lpanda \
-lpandafx \
-lpandaexpress \
-lp3dtoolconfig \
-lp3dtool \
-lp3pystub \
-lp3direct \
-lpthread

अधिक जानकारी के लिए पांडा 3 डी मैनुअल देखें।

विंडोज

विंडोज के लिए पांडा 3 डी एसडीके स्थापित करके शुरू करें।

पता लगाएं कि पांडा 3 डी हेडर और लाइब्रेरी कहां हैं।

इस भंडार को क्लोन करें और अपनी निर्देशिका में नेविगेट करें।

git clone https://github.com/lettier/3d-game-shaders-for-beginners.git
cd 3d-game-shaders-for-beginners

अधिक जानकारी के लिए पांडा 3 डी मैनुअल देखें।

डेमो लॉन्च करें

नमूना कोड बनाने के बाद, आप निष्पादन योग्य फ़ाइल या डेमो चला सकते हैं। यह वे लिनक्स या मैक पर कैसे चलाते हैं।

./3d-game-shaders-for-beginners

और इसलिए वे विंडोज पर चलते हैं:

3d-game-shaders-for-beginners.exe

कीबोर्ड नियंत्रण

डेमो में एक कीबोर्ड नियंत्रण है जो आपको कैमरे को स्थानांतरित करने और विभिन्न प्रभावों की स्थिति को बदलने की अनुमति देता है।

प्रस्ताव

• w - दृश्य में गहरी चाल।
• a - दृश्य को दक्षिणावर्त घुमाएं।
• s - दृश्य से दूर जाना।
• d - दृश्य वामावर्त घुमाएँ।

स्वाइप करने योग्य प्रभाव

• y - एसएसएओ सक्षम करें।
• Shift + y - SSAO अक्षम करें।
• u - सर्किट का समावेश।
• Shift + u - कंट्रोल्स को निष्क्रिय करें।
• i - खिलने को सक्षम करें।
• Shift + i - ब्लूम को अक्षम करें।
• o - सामान्य नक्शे सक्षम करें।
• Shift + o - सामान्य नक्शे अक्षम करें।
• p - कोहरे का समावेश।
• Shift + p - कोहरे को बंद करें।
• h - क्षेत्र की गहराई का समावेश।
• Shift + h - क्षेत्र की गहराई को अक्षम करें।
• j - पोस्‍टराइजेशन सक्षम करें।
• Shift + j - पोस्टराइज़ेशन अक्षम करें
• k - पिक्सेलेशन सक्षम करें।
• Shift + k - पिक्सेलकरण को अक्षम करें।
• l - तेज।
• Shift + l - पैनापन अक्षम करें।
• n फिल्म अनाज का समावेश।
• Shift + n - फिल्म अनाज को अक्षम करें।

संदर्भ प्रणाली

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

आदर्श

मॉडल या वस्तु का समन्वय प्रणाली मॉडल की उत्पत्ति के सापेक्ष है। उदाहरण के लिए, तीन-आयामी मॉडलिंग कार्यक्रमों में, ब्लेंडर में, इसे आमतौर पर मॉडल के केंद्र में रखा जाता है।

संसार

विश्व स्थान आपके द्वारा बनाए गए दृश्य / स्तर / ब्रह्मांड की उत्पत्ति के सापेक्ष है।

सिंहावलोकन

दृश्य का समन्वय स्थान सक्रिय कैमरे की स्थिति के सापेक्ष है।

विच्छेदन

कैमरा फ्रेम के केंद्र के सापेक्ष क्लिपिंग स्पेस। इसमें सभी निर्देशांक सजातीय हैं और अंतराल (-1, 1) । X और y कैमरा फिल्म के समानांतर हैं, और z निर्देशांक गहराई है।


दृश्यता के पिरामिड की सीमाओं के भीतर या कैमरे की दृश्यता की मात्रा के दायरे में नहीं आने वाले सभी तार काट दिए जाते हैं या छोड़ दिए जाते हैं। हम देखते हैं कि यह कैमरे के दूर के विमान के पीछे से काटे गए क्यूब और किनारे पर स्थित क्यूब के साथ कैसे होता है।

प्रदर्शन

स्क्रीन स्पेस स्क्रीन के निचले बाएं कोने के सापेक्ष (आमतौर पर) होता है। X स्क्रीन की चौड़ाई से शून्य में बदल जाता है। Y शून्य से स्क्रीन की ऊँचाई में बदलता है।

GLSL

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

 #version 140 void main() {} 

यहाँ न्यूनतम GLSL शेडर है, जिसमें GLSL संस्करण संख्या और मुख्य कार्य शामिल हैं।

 #version 140 uniform mat4 p3d_ModelViewProjectionMatrix; in vec4 p3d_Vertex; void main() { gl_Position = p3d_ModelViewProjectionMatrix * p3d_Vertex; } 

यहां छंटनी की गई शीर्ष शेल्डर GLSL है, जो इनपुट वर्टेक्स को क्लिपिंग स्पेस में बदल देती है और इस नई स्थिति को एक समान वर्टेक्स स्थिति के रूप में प्रदर्शित करती है।

main प्रक्रिया कुछ भी नहीं देती है, क्योंकि यह void , और gl_Position चर इनलाइन आउटपुट है।

उल्लेख के लायक दो कीवर्ड हैं: uniform और एक in ।

uniform कीवर्ड का अर्थ है कि यह वैश्विक चर सभी वर्टिकल के लिए समान है। Panda3D स्वयं p3d_ModelViewProjectionMatrix सेट p3d_ModelViewProjectionMatrix और प्रत्येक शीर्ष के लिए यह एक ही मैट्रिक्स है।

कीवर्ड में इसका अर्थ है कि यह वैश्विक चर shader को पास किया गया है। एक शीर्ष shader को प्रत्येक vertex मिलता है जिसे ज्यामिति के होते हैं, जिसमें एक शीर्ष shader संलग्न होता है।

 #version 140 out vec4 fragColor; void main() { fragColor = vec4(0, 1, 0, 1); } 

यहां छंटनी की गई GLSL टुकड़े टुकड़े करने की क्रिया है, जो टुकड़े के रंग के रूप में अपारदर्शी हरे रंग को प्रदर्शित करता है।

यह मत भूलो कि एक टुकड़ा केवल एक स्क्रीन पिक्सेल को प्रभावित करता है, लेकिन कई टुकड़े एक पिक्सेल को प्रभावित कर सकते हैं।

आउट कीवर्ड पर ध्यान दें।

out कीवर्ड का अर्थ है कि यह वैश्विक चर shader द्वारा सेट किया गया है।

नाम fragColor वैकल्पिक है, इसलिए आप किसी अन्य को चुन सकते हैं।


यहाँ ऊपर दिखाए गए दो शेड्स का आउटपुट है।

बनावट प्रतिपादन

सीधे स्क्रीन पर रेंडर / ड्राइंग करने के बजाय, नमूना कोड के लिए एक तकनीक का उपयोग करता है
नाम "बनावट को प्रस्तुत करना" (बनावट को प्रस्तुत करना)। एक बनावट को प्रस्तुत करने के लिए, आपको फ्रेम बफर को कॉन्फ़िगर करने और बनावट को बांधने की आवश्यकता है। आप एक सिंगल फ्रेम बफर में कई टेक्सचर को बांध सकते हैं।

फ्रेम बफर के लिए बाध्य बनावट वैक्टर टुकड़े टुकड़े shader द्वारा लौट आए। आमतौर पर ये वैक्टर रंगीन वैक्टर (r, g, b, a) , लेकिन वे या तो स्थिति या सामान्य वैक्टर (x, y, z, w) । प्रत्येक बाध्य बनावट के लिए, एक टुकड़ा shader एक अलग वेक्टर उत्पादन कर सकता है। उदाहरण के लिए, हम एक स्थिति और शीर्ष के सामान्य पास में कटौती कर सकते हैं।

Panda3D के साथ काम करने वाले उदाहरण कोड का थोक फ्रेम बफर टेक्सचर सेट करने से संबंधित है। चीजों को सरल रखने के लिए, उदाहरण कोड में प्रत्येक टुकड़ा shader का केवल एक आउटपुट होता है। हालांकि, एक उच्च फ्रेम दर (एफपीएस) सुनिश्चित करने के लिए, हमें प्रत्येक रेंडरिंग पास में अधिक से अधिक जानकारी आउटपुट करने की आवश्यकता है।

यहाँ नमूना कोड से फ्रेम बफर के लिए दो बनावट संरचनाएं हैं।


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

इस संरचना में, उदाहरण कोड निम्नानुसार काम करता है।

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

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

दूसरी संरचना में, नमूना कोड निम्नलिखित क्रियाएं करता है:

• एक और फ्रेम बफर बनावट के उत्पादन को संसाधित करता है।
• एक में विभिन्न फ्रेम बफर बनावट को जोड़ती है।

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

  // ... bool showPositionBuffer = false; bool showNormalBuffer = false; bool showSsaoBuffer = false; bool showSsaoBlurBuffer = false; bool showMaterialDiffuseBuffer = false; bool showOutlineBuffer = false; bool showBaseBuffer = false; bool showSharpenBuffer = false; bool showBloomBuffer = false; bool showCombineBuffer = false; bool showCombineBlurBuffer = false; bool showDepthOfFieldBuffer = false; bool showPosterizeBuffer = false; bool showPixelizeBuffer = false; bool showFilmGrainBuffer = true; // ... 

बनावट

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


खंडित शेड को प्रक्षेपित यूवी समन्वय प्राप्त होता है। इंटरपोलेशन का अर्थ है कि टुकड़े के लिए यूवी समन्वय कहीं-कहीं त्रिकोण के चेहरे को बनाने वाले ऊर्ध्व के यूवी निर्देशांक के बीच है।

वर्टेक्स शेडर

 #version 140 uniform mat4 p3d_ModelViewProjectionMatrix; in vec2 p3d_MultiTexCoord0; in vec4 p3d_Vertex; out vec2 texCoord; void main() { texCoord = p3d_MultiTexCoord0; gl_Position = p3d_ModelViewProjectionMatrix * p3d_Vertex; } 

यहां हम देखते हैं कि वर्टेक्स शेडर टेक्सचर के समन्वय को टुकड़ा करने वाले के लिए आउटपुट करता है। ध्यान दें कि यह एक दो-आयामी वेक्टर है: यू के लिए एक मान और वी के लिए एक।

घर्षण करने वाला

 #version 140 uniform sampler2D p3d_Texture0; in vec2 texCoord; out vec2 fragColor; void main() { texColor = texture(p3d_Texture0, texCoord); fragColor = texColor; } 

यहाँ हम देखते हैं कि खंड shader अपने UV समन्वय में रंग की खोज करता है और इसे टुकड़े के रंग के रूप में प्रदर्शित करता है।

स्क्रीन भरें बनावट

 #version 140 uniform sampler2D screenSizedTexture; out vec2 fragColor; void main() { vec2 texSize = textureSize(texture, 0).xy; vec2 texCoord = gl_FragCoord.xy / texSize; texColor = texture(screenSizedTexture, texCoord); fragColor = texColor; } 

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

ए) यूवी निर्देशांक का उपयोग कर आयत पर स्क्रीन के आकार के साथ बनावट की चौड़ाई और ऊंचाई, और
बी) खंड के x और y निर्देशांक।

X को U से बाँधने के लिए, आपको आने वाली बनावट की चौड़ाई से x को विभाजित करना होगा। इसी तरह, वाई को वी से बांधने के लिए, आपको आने वाली बनावट की ऊंचाई से वाई को विभाजित करने की आवश्यकता है। आप देखेंगे कि इस तकनीक का उपयोग नमूना कोड में किया जाता है।

प्रकाश

प्रकाश व्यवस्था को निर्धारित करने के लिए, परिवेश के पहलुओं को फैलाना, फैलाना, परिलक्षित और उत्सर्जित प्रकाश की गणना करना आवश्यक है। नमूना कोड फोंग प्रकाश व्यवस्था का उपयोग करता है।

वर्टेक्स शेडर

 // ... uniform struct p3d_LightSourceParameters { vec4 color ; vec4 ambient ; vec4 diffuse ; vec4 specular ; vec4 position ; vec3 spotDirection ; float spotExponent ; float spotCutoff ; float spotCosCutoff ; float constantAttenuation ; float linearAttenuation ; float quadraticAttenuation ; vec3 attenuation ; sampler2DShadow shadowMap ; mat4 shadowViewMatrix ; } p3d_LightSource[NUMBER_OF_LIGHTS]; // ... 

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

  // ... vertexPosition = p3d_ModelViewMatrix * p3d_Vertex; // ... for (int i = 0; i < p3d_LightSource.length(); ++i) { vertexInShadowSpaces[i] = p3d_LightSource[i].shadowViewMatrix * vertexPosition; } // ... 

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

घर्षण करने वाला

टुकड़ा shader प्रकाश गणना के थोक करता है।

सामग्री

 // ... uniform struct { vec4 ambient ; vec4 diffuse ; vec4 emission ; vec3 specular ; float shininess ; } p3d_Material; // ... 

पांडा 3 डी हमें उस जाल या मॉडल के लिए सामग्री (एक संरचना के रूप में) प्रदान करता है जिसे हम वर्तमान में प्रदान कर रहे हैं।

एकाधिक प्रकाश स्रोत

  // ... vec4 diffuseSpecular = vec4(0.0, 0.0, 0.0, 0.0); // ... 

इससे पहले कि हम दृश्य की रोशनी के स्रोतों के चारों ओर जाएं, हम एक ड्राइव बनाएंगे जिसमें फैलाना और प्रतिबिंबित रंग दोनों शामिल होंगे।

  // ... for (int i = 0; i < p3d_LightSource.length(); ++i) { // ... } // ... 

अब हम एक चक्र में प्रकाश स्रोतों के चारों ओर जा सकते हैं, प्रत्येक के लिए फैलाना और प्रतिबिंबित रंगों की गणना कर सकते हैं।

प्रकाश संबंधित क्षेत्र

प्रत्येक प्रकाश स्रोत द्वारा शुरू किए गए फैलने और प्रतिबिंबित रंगों की गणना करने के लिए यहां चार बुनियादी वैक्टर की आवश्यकता होती है। प्रकाश की दिशा वेक्टर प्रकाश स्रोत की ओर इशारा करते हुए एक नीला तीर है। सामान्य वेक्टर एक हरा तीर है जो लंबवत ऊपर की ओर इशारा करता है। प्रतिबिंब वेक्टर एक नीला तीर है जो प्रकाश की दिशा वेक्टर को प्रतिबिंबित करता है। आँख या दृश्य वेक्टर नारंगी तीर है जो कैमरे की ओर इशारा करता है।

  // ... vec3 lightDirection = p3d_LightSource[i].position.xyz - vertexPosition.xyz * p3d_LightSource[i].position.w; // ... 

प्रकाश की दिशा शीर्ष स्थिति से प्रकाश स्रोत की स्थिति के लिए वेक्टर है।

यदि यह दिशात्मक प्रकाश है, तो p3d_LightSource[i].position.w , p3d_LightSource[i].position.w शून्य पर सेट करता है। दिशात्मक प्रकाश की कोई स्थिति नहीं है, केवल दिशा है। इसलिए, यदि यह दिशात्मक प्रकाश व्यवस्था है, तो रोशनी की दिशा स्रोत के लिए एक नकारात्मक या विपरीत दिशा होगी, क्योंकि दिशात्मक प्रकाश के लिए पांडा 3 p3d_LightSource[i].position.xyz -direction to -direction सेट करता है।

  // ... normal = normalize(vertexNormal); // ... 

शीर्ष पर सामान्य एक इकाई वेक्टर होना चाहिए। यूनिट वैक्टर में एक के बराबर मूल्य होता है।

  // ... vec3 unitLightDirection = normalize(lightDirection); vec3 eyeDirection = normalize(-vertexPosition.xyz); vec3 reflectedDirection = normalize(-reflect(unitLightDirection, normal)); // ... 

अगला, हमें तीन और वैक्टर चाहिए।

हमें प्रकाश दिशा की भागीदारी के साथ एक स्केलर उत्पाद की आवश्यकता होती है, इसलिए इसे सामान्य करना बेहतर होता है। यह हमें एकता (यूनिट वेक्टर) के बराबर दूरी या परिमाण देता है।

देखने की दिशा वर्टेक्स / टुकड़े की स्थिति के विपरीत है, क्योंकि वर्टेक्स / टुकड़ा की स्थिति कैमरे की स्थिति के सापेक्ष है। यह मत भूलो कि देखने की जगह में शीर्ष / खंड की स्थिति है। इसलिए, कैमरा (आंख) से वर्टेक्स / फ्रेग्मेंट में जाने के बजाय, हम वर्टेक्स / टुकड़ा से कैमरा (आंख) की ओर बढ़ते हैं।

प्रतिबिंब वेक्टर सतह पर सामान्य रोशनी की दिशा का प्रतिबिंब है। जब प्रकाश की "किरण" सतह को छूती है, तो यह उसी कोण पर परिलक्षित होता है जिस पर वह गिर गया था। रोशनी और सामान्य की दिशा वेक्टर के बीच के कोण को "घटना का कोण" कहा जाता है। प्रतिबिंब वेक्टर और सामान्य के बीच के कोण को "प्रतिबिंब कोण" कहा जाता है।

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

डिफ्यूज़ लाइटिंग

  // ... float diffuseIntensity = max(dot(normal, unitLightDirection), 0.0); if (diffuseIntensity > 0) { // ... } // ... 

फैलाना प्रकाश की चमक सतह के लिए सामान्य की अदिश उत्पाद और एकल वेक्टर की रोशनी की दिशा है। स्केलर उत्पाद शून्य से एक तक हो सकता है। यदि दोनों वैक्टर एक ही दिशा में इंगित करते हैं, तो चमक एकता है। अन्य सभी मामलों में, यह एकता से कम होगा।


यदि रोशनी सदिश समान दिशा की ओर जाती है, तो फैलने वाली रोशनी की चमक एकता में बदल जाती है।

यदि फैलाना प्रकाश की चमक शून्य से कम या उसके बराबर है, तो आपको अगले प्रकाश स्रोत पर जाने की आवश्यकता है।

  // ... vec4 diffuse = vec4 ( clamp ( diffuseTex.rgb * p3d_LightSource[i].diffuse.rgb * diffuseIntensity , 0 , 1 ) , 1 ); diffuse.r = clamp(diffuse.r, 0, diffuseTex.r); diffuse.g = clamp(diffuse.g, 0, diffuseTex.g); diffuse.b = clamp(diffuse.b, 0, diffuseTex.b); // ... 

अब हम इस स्रोत द्वारा पेश किए गए विसरित रंग की गणना कर सकते हैं।यदि फैलाना प्रकाश की चमक एकता के बराबर है, तो फैलाना रंग फैलाना बनावट के रंग और प्रकाश के रंग का मिश्रण होगा। किसी भी अन्य चमक पर, फैलाना रंग गहरा होगा।

ध्यान दें कि मैं फैलाना रंग को सीमित करता हूं ताकि यह फैलाने की बनावट के रंग से अधिक उज्ज्वल न हो। यह दृश्य के ओवरएक्सपोजर को रोक देगा।

प्रकाश को प्रतिबिंबित

फैलाना प्रकाश के बाद, परिलक्षित गणना की जाती है।

  // ... vec4 specular = clamp ( vec4(p3d_Material.specular, 1) * p3d_LightSource[i].specular * pow ( max(dot(reflectedDirection, eyeDirection), 0) , p3d_Material.shininess ) , 0 , 1 ); // ... 

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


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

स्पॉटलाइट

  // ... float unitLightDirectionDelta = dot ( normalize(p3d_LightSource[i].spotDirection) , -unitLightDirection ); if (unitLightDirectionDelta >= p3d_LightSource[i].spotCosCutoff) { // ... } // ... } 

यह कोड प्रकाश को स्पॉटलाइट शंकु या पिरामिड के बाहर के टुकड़ों को प्रभावित करने की अनुमति नहीं देता है। सौभाग्य से, Panda3D कर सकते हैं परिभाषित spotDirection और spotCosCutoffदिशात्मक और मौके रोशनी के साथ काम करने के लिए। स्पॉटलाइट में एक स्थिति और एक दिशा दोनों होती है। हालाँकि, दिशात्मक प्रकाश में केवल दिशा होती है, और बिंदु स्रोतों में केवल स्थिति होती है। हालांकि, यह कोड बयानों को भ्रमित करने की आवश्यकता के बिना सभी तीन प्रकार की प्रकाश व्यवस्था के लिए काम करता है।

 spotCosCutoff = cosine(0.5 * spotlightLensFovAngle); 

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

ध्यान दें कि आपको साइन बदलना होगा unitLightDirection। unitLightDirectionखोज से प्रकाश की ओर जाता है, और हमें खोज से खंड में जाने की आवश्यकता है, क्योंकि यह spotDirectionसीधे सर्चलाइट की स्थिति से निश्चित दूरी पर खोज के पिरामिड के केंद्र में जाता है।

दिशात्मक और स्पॉट लाइटिंग के मामले में, पांडा 3 डी spotCosCutoff-1 का मान निर्धारित करता है । याद रखें कि स्केलर उत्पाद -1 से 1. तक भिन्न होता है, इसलिए, इससे कोई फर्क नहीं पड़ता कि यह क्या होगा unitLightDirectionDelta, क्योंकि यह हमेशा -1 से अधिक या बराबर होता है।

  // ... diffuse *= pow(unitLightDirectionDelta, p3d_LightSource[i].spotExponent); // ... 

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

छाया

  // ... float shadow = textureProj ( p3d_LightSource[i].shadowMap , vertexInShadowSpaces[i] ); diffuse.rgb *= shadow; specular.rgb *= shadow; // ... 

पांडा 3 डी छाया के उपयोग को सरल करता है क्योंकि यह दृश्य में प्रत्येक प्रकाश स्रोत के लिए छाया मानचित्र और छाया परिवर्तन मैट्रिक्स बनाता है। स्वयं एक परिवर्तन मैट्रिक्स बनाने के लिए, आपको एक मैट्रिक्स इकट्ठा करना होगा जो देखने की जगह के निर्देशांक को प्रकाश स्थान में परिवर्तित कर देता है (निर्देशांक प्रकाश स्रोत की स्थिति के सापेक्ष हैं)। अपने आप को एक छाया मानचित्र बनाने के लिए, आपको प्रकाश स्रोत के दृष्टिकोण से दृश्य को फ्रेम बफर बनावट में प्रस्तुत करना होगा। फ़्रेम बफर बनावट में प्रकाश स्रोत से अंशों तक की दूरी होनी चाहिए। इसे "गहराई का नक्शा" कहा जाता है। अंत में, आपको अपने होममेड डेप्थ मैप को शेडर के रूप uniform sampler2DShadowमें और शैडो ट्रांसफॉर्मेशन मैट्रिक्स को मैन्युअल रूप से ट्रांसफर करना होगा uniform mat4। इसलिए हम पुन: बनाएंगे कि पांडा 3 डी हमारे लिए क्या करता है।

दिखाए गए कोड स्निपेट का उपयोग किया जाता है textureProj, जो ऊपर दिखाए गए फ़ंक्शन से अलग है texture। textureProjपहले से विभाजित vertexInShadowSpaces[i].xyzहै vertexInShadowSpaces[i].w। वह फिर vertexInShadowSpaces[i].xyछाया मानचित्र में संग्रहीत गहराई को खोजने के लिए इसका उपयोग करती है। फिर वह vertexInShadowSpaces[i].zछाया मानचित्र की गहराई के साथ शीर्ष की गहराई की तुलना करने के लिए उपयोग करती है vertexInShadowSpaces[i].xy। यदि तुलना सफल हो जाती है, तो यह textureProjएक लौट आती है। अन्यथा, यह शून्य देता है। शून्य का अर्थ है कि यह शीर्ष / टुकड़ा छाया में है, और इसका अर्थ है कि शीर्ष / टुकड़ा छाया में नहीं है।

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

क्षीणन

  // ... float lightDistance = length(lightDirection); float attenuation = 1 / ( p3d_LightSource[i].constantAttenuation + p3d_LightSource[i].linearAttenuation * lightDistance + p3d_LightSource[i].quadraticAttenuation * (lightDistance * lightDistance) ); diffuse.rgb *= attenuation; specular.rgb *= attenuation; // ... 

प्रकाश स्रोत की दूरी प्रकाश की दिशा वेक्टर की भयावहता या लंबाई है। ध्यान दें कि हम रोशनी की सामान्यीकृत दिशा का उपयोग नहीं करते हैं, क्योंकि ऐसी दूरी एकता के बराबर होगी।

क्षीणन की गणना के लिए प्रकाश स्रोत की दूरी आवश्यक है। गतिरोध का मतलब है कि स्रोत से दूर प्रकाश का प्रभाव कम हो जाता है।

पैरामीटर constantAttenuation, linearAttenuationऔर quadraticAttenuationआप कोई भी मान सेट कर सकते हैं। यह शुरू करने के लायक है constantAttenuation = 1, linearAttenuation = 0और quadraticAttenuation = 1। इन मापदंडों के साथ, प्रकाश स्रोत की स्थिति में यह एकता के बराबर है और इससे दूर जाने पर शून्य हो जाता है।

अंतिम रंग प्रकाश

  // ... diffuseSpecular += (diffuse + specular); // ... 

प्रकाश के अंतिम रंग की गणना करने के लिए, आपको फैलाना और प्रतिबिंबित रंग जोड़ना होगा। दृश्य में प्रकाश स्रोतों को बायपास करने के एक चक्र में ड्राइव में इसे जोड़ना आवश्यक है।

व्यापक

 // ... uniform sampler2D p3d_Texture1; // ... uniform struct { vec4 ambient ; } p3d_LightModel; // ... in vec2 diffuseCoord; // ... vec4 diffuseTex = texture(p3d_Texture1, diffuseCoord); // ... vec4 ambient = p3d_Material.ambient * p3d_LightModel.ambient * diffuseTex; // ... 

प्रकाश मॉडल में परिवेश प्रकाश घटक सामग्री के परिवेश रंग, परिवेश प्रकाश का रंग, और फैलाना बनावट के रंग पर आधारित है।

परिवेश प्रकाश का एक से अधिक स्रोत कभी नहीं होना चाहिए, इसलिए प्रत्येक प्रकाश स्रोत के लिए संचित विसरित और परिलक्षित रंगों की गणना के विपरीत, यह गणना केवल एक बार की जानी चाहिए।

कृपया ध्यान दें कि SSAO का प्रदर्शन करते समय परिवेश प्रकाश का रंग काम में आता है।

यह सब एक साथ रखना

  // ... vec4 outputColor = ambient + diffuseSpecular + p3d_Material.emission; // ... 

अंतिम रंग परिवेश रंग, फैलाना रंग, परिलक्षित रंग और उत्सर्जित रंग का योग है।

स्रोत कोड

• main.cxx
• base.vert
• base.frag

सामान्य नक्शे

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


यहां हम एक उच्च पाली मॉडल से निम्न पॉली मॉडल में संक्रमण को देखते हैं, और फिर एक सामान्य मानचित्र के साथ कम पाली मॉडल के लिए सुपरिंपल किया जाता है।


हालांकि, यह मत भूलो कि सामान्य मानचित्र को ओवरले करना केवल एक भ्रम है। एक निश्चित कोण पर, सतह फिर से सपाट दिखने लगती है।

वर्टेक्स शेडर

 // ... uniform mat3 p3d_NormalMatrix; // ... in vec3 p3d_Normal; // ... in vec3 p3d_Binormal; in vec3 p3d_Tangent; // ... vertexNormal = normalize(p3d_NormalMatrix * p3d_Normal); binormal = normalize(p3d_NormalMatrix * p3d_Binormal); tangent = normalize(p3d_NormalMatrix * p3d_Tangent); // ... 

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

p3d_NormalMatrixवर्सेटेक्स के सामान्य वैक्टर, बायनॉर्मल और स्पर्शरेखा सदिश को देखने की जगह में परिवर्तित करता है। यह मत भूलो कि देखने की जगह में सभी निर्देशांक कैमरे की स्थिति के सापेक्ष हैं।

[p3d_NormalMatrix] ModelViewMatrix के शीर्ष 3x3 रिवर्स ट्रांसपोसेंट तत्व हैं। यह संरचना सामान्य वेक्टर को देखने की जगह के निर्देशांक में बदलने के लिए उपयोग की जाती है।

स्रोत

 // ... in vec2 p3d_MultiTexCoord0; // ... out vec2 normalCoord; // ... normalCoord = p3d_MultiTexCoord0; // ... 

हमें सामान्य मैप के यूवी निर्देशांक को टुकड़े टुकड़े करने के लिए आउटपुट करने की भी आवश्यकता है।

भगदड़ शैडर

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

 // ... uniform sampler2D p3d_Texture0; // ... in vec2 normalCoord; // ... /* Find */ vec4 normalTex = texture(p3d_Texture0, normalCoord); // ... 

वर्टेक्स शेडर द्वारा हस्तांतरित सामान्य मानचित्र के निर्देशांक का उपयोग करते हुए, हम मानचित्र से संगत सामान्य निकालते हैं।

  // ... vec3 normal; // ... /* Unpack */ normal = normalize ( normalTex.rgb * 2.0 - 1.0 ); // ... 

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

 [ r, g, b] = [ r * 2 - 1, g * 2 - 1, b * 2 - 1] = [ x, y, z] 

यहाँ सामान्य नक्शे से मानदंड की प्रक्रिया की तरह दिखता है।

  // ... /* Transform */ normal = normalize ( mat3 ( tangent , binormal , vertexNormal ) * normal ); // ... 

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


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

स्रोत कोड

• main.cxx
• base.vert
• base.frag