आज मैं दिखाऊंगा कि एक खिड़की कैसे खोलें और एक ओपनजीएल संदर्भ बनाएं। यह आश्चर्यजनक रूप से मुश्किल काम है, ओपनजीएल में अभी भी संदर्भ बनाने के लिए आधिकारिक क्रॉस-प्लेटफ़ॉर्म टूल नहीं हैं, इसलिए हम तीसरे पक्ष के पुस्तकालयों (इस मामले में GLFW और खुश) पर भरोसा करेंगे। इंटरनेट पर पहले से ही बहुत सारे समान दुनिया हैं, लेकिन मुझे वह सब कुछ पसंद नहीं है जो मैंने देखा: या तो यह बहुत परिष्कृत है, या उदाहरणों में चित्र बहुत ही आदिम हैं ( या दोनों !)। सभी लेखकों के लिए बहुत धन्यवाद, लेकिन मैं एक और ट्यूटोरियल डाउनलोड करूंगा :)

आज हम इसे आकर्षित करेंगे:



इस मॉडल को कलाकार सैमुअल शरत (अर्शलेवन) द्वारा चित्रित किया गया था, उन्होंने मुझे कंप्यूटर ग्राफिक्स पर अपने व्याख्यान पाठ्यक्रम के हिस्से के रूप में इसका उपयोग करने की अनुमति देने के लिए बहुत धन्यवाद दिया!

स्टेज 0: रीडिंग टिनीएंडर

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



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

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

स्टेज एक, सबसे कठिन: एक खिड़की बनाना

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



कोड सीएमके का उपयोग करके संकलित किया गया है; मैंने लिनक्स (जी ++) और विंडोज (विजुअल स्टूडियो 2017) के तहत जांच की। लिनक्स के तहत, कोड का नवीनतम संस्करण इस तरह संकलित करता है:

git clone --recurse-submodules https://github.com/ssloy/hellOGL.git cd hellOGL mkdir build cd build cmake .. make 

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

स्टेज दो: एक 3 डी मॉडल लोड करना

इस स्तर पर बनाई गई परियोजना में परिवर्तन, यहां देखें । इस समय, हमारा लक्ष्य 3 डी मॉडल फ़ाइल को पार्स करना है, और इस समय प्रकाश की चिंता किए बिना पहले त्रिकोण बनाएं:



कृपया ध्यान दें कि वैक्टर के साथ काम करने के लिए मॉडल और लाइब्रेरी दोनों ही हैं, और मैंने मॉडल पार्सर को पूरी तरह से टिनिरेंडर से लिया। शायद सॉफ्टवेयर रेंडरर इतना बेकार नहीं है?

आधुनिक ओपनजीएल में मूल विचार बहुत सरल है। हमने पहले एक 3 डी मॉडल अपलोड किया, और फिर मैं 3 * 3 * (त्रिकोणों की संख्या) आकार का एक वर्जन सरणी बनाता हूं। प्रत्येक त्रिकोण में तीन कोने होते हैं, है ना? प्रत्येक शीर्ष को तीन संख्याओं (x, y, z) द्वारा वर्णित किया गया है। कुल मिलाकर, 3 * 3 * model.nfaces () हमारे लिए संपूर्ण मॉडल का वर्णन करने के लिए पर्याप्त है:

  std::vector<GLfloat> vertices(3*3*model.nfaces(), 0); for (int i=0; i<model.nfaces(); i++) { for (int j=0; j<3; j++) { for (int k=0; k<3; k++) vertices[(i*3+j)*3 + k] = model.point(model.vert(i, j))[k]; } } 

और फिर हम ओपनजीएल को बताते हैं कि यहां एक सरणी है, ड्रा, देशी!

  while (!glfwWindowShouldClose(window)) { [...]  glDrawArrays(GL_TRIANGLES, 0, vertices.size()); [...] } 

शीर्ष shader दिलचस्प कुछ भी नहीं करता है, यह डेटा को टुकड़ा shader को पास करता है, जैसा कि यह है:

 #version 330 core // Input vertex data, different for all executions of this shader layout(location = 0) in vec3 vertexPosition_modelspace; void main() { gl_Position = vec4(vertexPosition_modelspace, 1); // Output position of the vertex, in clip space } 

खैर, टुकड़ा shader भी स्पष्ट है । यह वर्तमान में लाल रंग में अचार बनाता है:

 #version 330 core // Output data out vec3 color; void main() { color = vec3(1,0,0); } 

सबसे मुश्किल काम है, अब यह तकनीक की बात है!

स्टेज थ्री: डिफ्यूज़ लाइटिंग

इस स्तर पर बनाई गई परियोजना में परिवर्तन, यहां देखें । हमें यह चित्र प्राप्त करना चाहिए:



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

सबसे दिलचस्प बात यह है कि टुकड़े टुकड़े करना, मुख्य .cpp फ़ाइल में, केवल डेटा लोड किया गया है:

 #version 330 core // Output data out vec3 color; // Interpolated values from the vertex shaders in vec3 Normal_cameraspace; in vec3 LightDirection_cameraspace; void main() { vec3 n = normalize(Normal_cameraspace); // Normal of the computed fragment, in camera space vec3 l = normalize(LightDirection_cameraspace); // Direction of the light (from the fragment to the light) float cosTheta = clamp(dot(n,l), 0, 1); // Cosine of the angle between the normal and the light direction, color = vec3(1,0,0)*(0.1 + // ambient lighting 1.3*cosTheta); // diffuse lighting } 

चरण चार: परिवर्तन मैट्रिक्स

इस स्तर पर बनाई गई परियोजना में परिवर्तन, यहां देखें । इस बिंदु पर, मैंने मॉडल, दृश्य और प्रोजेक्शन मैट्रिक्स को कोडित किया। बहुत शुरुआत में, वे सिर्फ एक ही हैं, लेकिन अगर आप स्पेसबार दबाते हैं, तो मॉडल घूमना शुरू हो जाएगा: हर बार जब मैं एक चित्र खींचता हूं, तो मैं 0.01 अक्षांकों द्वारा z अक्ष के चारों ओर मॉडल मैट्रिक्स को घुमाता हूं:

  { // rotate the model around the z axis with each frame Matrix R = rot_z(0.01); if (animate) M = R*M; } 

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

पांच चरण: सामान्य नक्शे

इस स्तर पर बनाई गई परियोजना में परिवर्तन, यहां देखें । इस बिंदु पर हम सीखेंगे कि बनावट को कैसे ओवरले करना है। चूंकि सामान्य विसरित बनावट उबाऊ है, मैं तुरंत सामान्य मानचित्र लागू करूंगा, और यहां तक ​​कि स्पर्शरेखा स्थान में भी। सामान्य नक्शे कुछ इस तरह दिखते हैं:



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

स्टेज पांच: डिफ्यूज़ टेक्सचर

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

स्टेज छह: चकाचौंध

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

निष्कर्ष

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

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