👨🏿‍💼 🏬 🧑🏼 वोल्फेंस्टीन 3 डी: वेबजीएल 1 के साथ किरण अनुरेखण ↕️ 👩‍👩‍👧 👎

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

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

अन्य लोगों के विकास की अस्वीकृति के एक सिंड्रोम से पीड़ित, परिणामस्वरूप, मैंने WebGL1 पर आधारित अपना स्वयं का हाइब्रिड रेंडरिंग इंजन बनाया। आप यहाँ वफ़रस्टीन 3 डी से गोले के साथ डेमो स्तर रेंडरिंग के साथ खेल सकते हैं (जिसका उपयोग मैंने रे ट्रेसिंग के कारण किया था)।

प्रोटोटाइप

मैंने मेट्रो एक्सोडस से किरण अनुरेखण के साथ वैश्विक प्रकाश को फिर से बनाने की कोशिश कर, एक प्रोटोटाइप बनाकर इस परियोजना को शुरू किया।

वैश्विक प्रकाश को फैलाने वाला पहला प्रोटोटाइप (डिफ्यूज़ जीआई)

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

ऊपर की छवि में, आप देख सकते हैं कि कैसे सभी क्षेत्रों को केवल अप्रत्यक्ष प्रकाश द्वारा सही ढंग से रोशन किया जाता है (प्रकाश किरणें कैमरे के पीछे की दीवार से परिलक्षित होती हैं)। प्रकाश स्रोत स्वयं छवि के बाईं ओर एक भूरी दीवार द्वारा कवर किया गया है।

वोल्फेंस्टीन 3 डी

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

इस प्रोटोटाइप को बनाने के बाद, मैं दृश्य में अधिक ज्यामिति और बहुत सारे प्रकाश स्रोतों को जोड़कर कुछ और जटिल करना चाहता था।

अधिक जटिल वातावरण के साथ समस्या यह है कि मुझे अभी भी वास्तविक समय में दृश्य में किरणों का पता लगाने में सक्षम होना चाहिए। आमतौर पर, एक अनुगामी मात्रा पदानुक्रम (BVH) संरचना का उपयोग किरण अनुरेखण प्रक्रिया को तेज करने के लिए किया जाएगा, लेकिन WebGL1 पर इस परियोजना को बनाने के मेरे निर्णय ने इसकी अनुमति नहीं दी: WebGL1 में एक बनावट में 16-बिट डेटा को लोड करना असंभव है और बाइनरी संचालन का उपयोग किसी शैडर में नहीं किया जा सकता है। यह WebGL1 शेड में बीवीएच की प्रारंभिक गणना और अनुप्रयोग को जटिल करता है।

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

डेमो का स्क्रीनशॉट नीचे दिखाया गया है, और फुल-स्क्रीन मोड में आप इसे यहां खेल सकते हैं: https://reindernijhoff.net/lolfrt ।

संक्षिप्त विवरण

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

छाया

डिफ्यूज़ जी

प्रतिबिंब

प्रोएक्टिव प्रतिपादन

वोल्फेंस्टीन कार्ड पूरी तरह से 64 × 64 द्वि-आयामी ग्रिड में एन्कोड किया जा सकता है। डेमो में उपयोग किया जाने वाला नक्शा वुल्फेनस्टीन 3 डी के पहले चरण के एपिसोड 1 पर आधारित है।

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

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

छाया और प्रकाश

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

varying vec3 vWorldPos; varying vec3 vNormal; void main(void) { vec3 ro = vWorldPos; vec3 normal = normalize(vNormal); vec3 light = vec3(0); for (int i=0; i<LIGHTS_ENCODED_IN_MAP; i++) { light += sampleLight(i, ro, normal); }

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

सहायक (रिफ्लेक्शन अनुभाग देखें) नीचे जोड़ने के बाद, फैलाना GI को डिफ्यूज़ जीआई रेंडर टारगेट (नीचे देखें) में एक खोज करके टुकड़े के परिकलित रंग में जोड़ा जाता है।

रे ट्रेसिंग

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

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

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

उदाहरण के लिए, यदि बफ़र स्केल 0.5 है, तो प्रत्येक चार स्क्रीन पिक्सेल के लिए केवल एक किरण उत्सर्जित होगी। यह उत्पादकता में भारी वृद्धि प्रदान करता है। स्क्रीन के ऊपरी दाएं कोने में उसी UI का उपयोग करके, आप प्रति लक्ष्य (SPP) और बीम प्रतिबिंबों की संख्या में पिक्सेल प्रति नमूने की संख्या को बदल सकते हैं।

एक बीम का उत्सर्जन करें

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

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

एक दृश्य में निम्नलिखित कोड का उपयोग करके एक बनावट का पता लगाकर एक किरण उत्सर्जित की जाती है:

 bool worldHit(n vec3 ro,in vec3 rd,in float t_min, in float t_max, inout vec3 recPos, inout vec3 recNormal, inout vec3 recColor) { vec3 pos = floor(ro); vec3 ri = 1.0/rd; vec3 rs = sign(rd); vec3 dis = (pos-ro + 0.5 + rs*0.5) * ri; for( int i=0; i<MAXSTEPS; i++ ) { vec3 mm = step(dis.xyz, dis.zyx); dis += mm * rs * ri; pos += mm * rs; vec4 mapType = texture2D(_MapTexture, pos.xz * (1. / 64.)); if (isWall(mapType)) { ... return true; } } return false; }

इसी तरह की एक किरण किरण अनुरेखण कोड Shadertoy पर इस वोल्फेंस्टीन shader में पाया जा सकता है।

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

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

डिफ्यूज़ जी

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

बीम दिशा आरडी और शुरुआती बिंदु आरओ होने के बाद, परिलक्षित रोशनी की गणना निम्नलिखित चक्र का उपयोग करके की जा सकती है:

 vec3 getBounceCol(in vec3 ro, in vec3 rd, in vec3 col) { vec3 emitted = vec3(0); vec3 recPos, recNormal, recColor; for (int i=0; i<MAX_RECURSION; i++) { if (worldHit(ro, rd, 0.001, 20., recPos, recNormal, recColor)) { // if (isLightHit) { // direct light sampling code // return vec3(0); // } col *= recColor; for (int i=0; i<2; i++) { emitted += col * sampleLight(i, recPos, recNormal); } } else { return emitted; } rd = cosWeightedRandomHemisphereDirection(recNormal); ro = recPos; } return emitted; }

शोर को कम करने के लिए, प्रत्यक्ष प्रकाश नमूने को लूप में जोड़ा जाता है। यह मेरी फिर भी Shadertoy पर एक और कॉर्नेल बॉक्स shader में इस्तेमाल तकनीक के समान है।

प्रतिबिंब

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

 #ifdef REFLECTION col = mix(col, getReflectionCol(ro, reflect(normalize(vWorldPos - _CamPos), normal), albedo), .15); #endif

आगे के रेंडरिंग पास में प्रतिबिंब जोड़े जाते हैं, इसलिए, एक प्रतिबिंब किरण हमेशा एक प्रतिबिंब किरण का उत्सर्जन करेगी।

टेम्पोरल एंटी-अलियासिंग

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

फिर से प्रक्षेपण

TAA के पीछे का विचार काफी सरल है: TAA प्रति फ्रेम में एक सबपिक्सल की गणना करता है, और फिर पिछले फ्रेम से कोरल करने वाले पिक्सेल के साथ अपने मूल्यों को औसत करता है।

यह जानने के लिए कि वर्तमान पिक्सेल पिछले फ्रेम में कहां था, पिछले फ्रेम के मॉडल-व्यू-प्रोजेक्शन मैट्रिक्स का उपयोग करके टुकड़े की स्थिति को फिर से पेश किया गया है।

नमूने गिराएं और पड़ोस को सीमित करें

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

 vec3 history = texture2D(_History, uvOld ).rgb; for (float x = -1.; x <= 1.; x+=1.) { for (float y = -1.; y <= 1.; y+=1.) { vec3 n = texture2D(_New, vUV + vec2(x,y) / _Resolution).rgb; mx = max(n, mx); mn = min(n, mn); } } vec3 history_clamped = clamp(history, mn, mx);

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

कैमरा कंपन

एंटी-अलियासिंग प्राप्त करने के लिए, प्रत्येक फ्रेम में कैमरा (सबसूड) रैंडम सबपिक्सल शिफ्ट के उपयोग के कारण दोलन करता है। यह प्रक्षेपण मैट्रिक्स को बदलकर लागू किया गया है:

 this._projectionMatrix[2 * 4 + 0] += (this.getHaltonSequence(frame % 51, 2) - .5) / renderWidth; this._projectionMatrix[2 * 4 + 1] += (this.getHaltonSequence(frame % 41, 3) - .5) / renderHeight;

शोर

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

मुझे डर है कि इस डेमो में इस्तेमाल किया गया सफेद शोर बहुत अच्छा नहीं है।

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

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

 vec2 hash2() { vec3 p3 = fract(vec3(g_seed += 0.1) * HASHSCALE3); p3 += dot(p3, p3.yzx + 19.19); return fract((p3.xx+p3.yz)*p3.zy); }

शोर में कमी

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

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

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

डेमो

आप यहां डेमो खेल सकते हैं ।

वोल्फेंस्टीन 3 डी: वेबजीएल 1 के साथ किरण अनुरेखण