WebGL लैंडस्केप रेंडरिंग - 2

भाग दो

WebGL इलाके प्रतिपादन में ट्रिगर रैली खेल श्रृंखला में आपका स्वागत है!

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

इस लेख में मैं इन कोने की संरचना के बारे में बात करूंगा, साथ ही साथ मॉर्फिंग के बारे में भी।


अनुवादक से: लेख में बहुत सी जीभ-बंधी हुई भाषाएँ और तकनीकी अशुद्धियाँ हैं। उन्हें ठीक करने में मदद करें!

के छल्ले

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


दोहराए जाने वाले ज्यामिति को विशेष रूप से ध्यान देने योग्य परिवर्तनों के बिना अनुवाद किया जा सकता है, लेकिन ऐसा लगेगा कि किनारों को थोड़ा स्थानांतरित कर दिया गया है:



हम इस संपत्ति का उपयोग कैमरे के सापेक्ष ज्यामिति को स्थानांतरित करने के लिए कर सकते हैं।

चूंकि त्रिकोण के प्रत्येक अंगूठी का अपना आकार होता है, और हस्तांतरण के लिए दूरी आकार पर निर्भर करती है, हमें छल्ले को एक-दूसरे से स्वतंत्र रूप से स्थानांतरित करना चाहिए। इसलिए, वर्टेक्स शेडर को यह पता होना चाहिए कि इसे सही ढंग से बदलने के लिए किन लेयर्स की परतें चलती हैं।

सामान्य तौर पर, हमें निम्नलिखित शीर्ष मापदंडों को जानने की आवश्यकता है:

• एक्स अक्ष स्थिति
• Y अक्ष स्थिति
• परत संख्या

ट्रिगर रैली में, हम [एक्स, वाई, जेड] वेक्टर का उपयोग करते हैं, और उस परत की संख्या भी प्राप्त करते हैं जहां जेड अक्ष के साथ इसकी स्थिति के अनुसार, शीर्ष स्थित है।

सिलाई छेद

प्रत्येक रिंग का अपना पैमाना होता है, इसके अलावा, प्रत्येक रिंग को स्केल के आधार पर एक राशि द्वारा स्थानांतरित किया जाता है। इस प्रकार, एक समस्या उत्पन्न हो सकती है - एक अंगूठी प्रसारित होती है, लेकिन आसन्न अंगूठी नहीं होती है और उनके बीच एक अंतर बनता है:


इस समस्या को हल करने के तरीकों में से एक रिंग के किनारे पर "स्कर्ट" जोड़ना है। इस लेख के अनुसार, एक स्कर्ट को कई छोटे टुकड़ों से इकट्ठा किया जाता है, इसके लिए कई शीर्ष बफ़र और जटिल प्रोसेसर तर्क का उपयोग किया जाता है। लेकिन हम इसे बिल्कुल भी महसूस नहीं करते हैं!

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

लेकिन आखिरी WebGL कैंप यूरोप में, मैं फ्लोरियन बोश से मिला, और उन्होंने रिंगों को थोड़ा बड़ा करने का सुझाव दिया, जिससे उन्हें अंतर करने की अनुमति मिली।

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

morphing

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


यह इस प्रकार है कि प्रत्येक शीर्ष को निम्नलिखित रिंग से मिलान करने के लिए स्थानांतरित किया जाना चाहिए:


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

यह कैसे काम करता है, यह दिखाने के लिए, आइए एक तालिका में डेटा प्रस्तुत करें:



इस प्रकार, हम morphing वेक्टर की गणना कर सकते हैं, इस GLSL कोड का उपयोग करते हुए केवल कोने के निर्देशांक हैं:

vec2 morphVector = mod(position.xy, 2.0) * (mod(position.xy, 4.0) - 2.0);

और यह सब अतिरिक्त संरचना में अतिरिक्त गुणों के बिना! ( लगभग।: इस फ्लोरियन से नफरत करता है )

अगला होगा ...

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

पढ़ने के लिए धन्यवाद!