इंट्रो न्यूटन प्रोटोकॉल: 4 किलोबाइट में क्या फिट हो सकता है

मैंने हाल ही में पीसी 4k इंट्रो श्रेणी में संशोधन 2019 डेमो दृश्य में प्रतिस्पर्धा की, और मेरा परिचय पहला स्थान जीता। मैंने कोडिंग और ग्राफिक्स किया, और डिक्सन ने संगीत तैयार किया। प्रतियोगिता का मूल नियम एक निष्पादन योग्य फ़ाइल या वेबसाइट बनाना है जो आकार में केवल 4096 बाइट्स है। इसका मतलब है कि गणित और एल्गोरिदम का उपयोग करके सब कुछ उत्पन्न करना होगा; किसी अन्य तरीके से मैं छवियों, वीडियो और ऑडियो को इतनी कम मात्रा में मेमोरी में नहीं निचोड़ सकता। इस लेख में, मैं अपने न्यूटन इंट्रो इंट्रो के प्रतिपादन पाइपलाइन के बारे में बात करूंगा। नीचे आप तैयार परिणाम देख सकते हैं, या यह देखने के लिए यहां क्लिक करें कि यह कैसे संशोधन पर लाइव दिखता है, या प्रतियोगिता में भाग लेने वाले इंट्रो को टिप्पणी करने और डाउनलोड करने के लिए pouet पर जाएं। आप यहां प्रतियोगियों के काम और सुधारों के बारे में पढ़ सकते हैं ।


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

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

4096 बाइट्स में फिट होने वाले कोड की मात्रा का वर्णन करने के लिए, नीचे मैंने तैयार इंट्रो का पूरा स्रोत कोड प्रस्तुत किया है। अंत में HTML को छोड़कर सभी भागों को एक छोटे आकार में संपीड़ित करने के लिए PNG छवि के रूप में एन्कोड किया गया है। इस संपीड़न के बिना, कोड लगभग 8900 बाइट ले लिया होगा। Synth नाम का हिस्सा साउंडबॉक्स का एक स्ट्रिप्ड डाउन वर्जन है। इस न्यूनतम प्रारूप में कोड को पैकेज करने के लिए, मैंने Google क्लोजर कंपाइलर और शेडर मिनिफायर का उपयोग किया । अंत में, JsExe का उपयोग करके लगभग सब कुछ PNG में संकुचित हो जाता है। पूर्ण संकलन पाइपलाइन को मेरे पिछले 4k इंट्रो कोर क्रिटिकल के स्रोत कोड में देखा जा सकता है, क्योंकि यह यहां प्रस्तुत एक से पूरी तरह से मेल खाता है।


संगीत और सिंथेसाइज़र पूरी तरह से जावास्क्रिप्ट में लागू होते हैं। WebGL का हिस्सा दो भागों में विभाजित है (कोड में हरे रंग में हाइलाइट किया गया); वह रेंडर पाइपलाइन सेट करती है। भौतिकी और किरण अनुरेखक तत्व GLSL शेड हैं। शेष कोड एक PNG छवि में एन्कोडेड है, और HTML परिणामी छवि के अंत में अपरिवर्तित है। ब्राउज़र छवि डेटा को अनदेखा करता है और केवल HTML कोड निष्पादित करता है, जो बदले में PNG को जावास्क्रिप्ट में वापस डिकोड करता है और इसे निष्पादित करता है।

रेंडरिंग पाइपलाइन

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


समय पर एक फ्रेम प्रतिपादन टी।

भौतिक भाग काफी सरल है, इंटरनेट पर आप क्षेत्रों के लिए आदिम सिमुलेशन बनाने पर कई ट्यूटोरियल पा सकते हैं। स्थिति, त्रिज्या, गति और द्रव्यमान को 1 x 58 के संकल्प के साथ दो बनावटों में संग्रहीत किया जाता है। मैंने वेबल 2 कार्यक्षमता का उपयोग किया, जो कई रेंडर लक्ष्यों को प्रदान करने की अनुमति देता है, इसलिए दो बनावटों का डेटा एक साथ दर्ज किया जाता है। एक ही कार्यक्षमता का उपयोग किरण अनुरेखक द्वारा तीन बनावट बनाने के लिए किया जाता है। Webgl NVidia RTX या DirectX Raytracing (DXR) रे ट्रेसिंग एपीआई तक कोई पहुंच प्रदान नहीं करता है, इसलिए सब कुछ खरोंच से किया जाता है।

रे ट्रेसर

रे अनुरेखण ही एक काफी आदिम तकनीक है। हम दृश्य में एक किरण छोड़ते हैं, यह 4 बार परिलक्षित होता है, और यदि यह प्रकाश स्रोत में जाता है, तो प्रतिबिंब का रंग जम जाता है; अन्यथा, हम काले हो जाते हैं। 4096 बाइट्स (जिसमें संगीत, सिंथेसाइज़र, भौतिकी और प्रतिपादन शामिल हैं) में जटिल त्वरण किरण अनुरेखण संरचनाओं को बनाने के लिए कोई जगह नहीं है। इसलिए, हम किसी न किसी खोज विधि का उपयोग करते हैं, अर्थात्, हम प्रत्येक किरण के लिए सभी 57 क्षेत्रों (सामने की दीवार को बाहर रखा गया है) की जांच करते हैं, बिना किसी भी प्रकार के गोले के हिस्से को बाहर करने के लिए कोई अनुकूलन नहीं करते हैं। इसका मतलब है कि 1080p रिज़ॉल्यूशन में प्रति सेकंड 60 फ्रेम प्रदान करने के लिए, आप केवल 2-6 किरणों, या प्रति पिक्सेल नमूने ले सकते हैं। यह एक चिकनी प्रकाश व्यवस्था बनाने के लिए पर्याप्त करीब है।


प्रति पिक्सेल 1 नमूना।


प्रति पिक्सेल 6 नमूने।

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

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


बनावट चैनल, हमें इसे धुंधला करने की आवश्यकता नहीं है।


यहां लाल चैनल में पहले ऑब्जेक्ट की आईडी शामिल है, हरे रंग में - दूसरी, और नीले रंग में - तीसरी। व्यवहार में, वे सभी एक ही फ्लोट मूल्य में एन्कोडेड हैं, जिसमें पूर्णांक भाग वस्तुओं के पहचानकर्ताओं को संग्रहीत करता है, और भिन्नात्मक खुरदरापन इंगित करता है: 332211.RR।

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


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

जब ऑब्जेक्ट दृश्य में होते हैं और दृश्य को शूट करने वाला कैमरा धीरे-धीरे चलता है, तो प्रत्येक फ्रेम में प्रकाश स्थिर रहना चाहिए। इसलिए, हम न केवल स्क्रीन के XY निर्देशांक में धुंधला प्रदर्शन कर सकते हैं; हम समय में धुंधला कर सकते हैं। यदि हम मानते हैं कि प्रकाश 100 एमएस में बहुत अधिक नहीं बदलता है, तो हम इसे 6 फ्रेम के लिए औसत कर सकते हैं। लेकिन इस समय की खिड़की के दौरान, ऑब्जेक्ट और कैमरा अभी भी कुछ दूरी पर जाएंगे, इसलिए 6 फ्रेम के लिए औसत की एक सरल गणना बहुत धुंधली छवि बनाएगी। हालांकि, हम जानते हैं कि सभी ऑब्जेक्ट और कैमरा पिछले नक्शे में कहां थे, इसलिए हम स्क्रीन स्पेस में वेग वैक्टर की गणना कर सकते हैं। इसे अस्थायी अस्वीकृति कहा जाता है। यदि मेरे पास समय टी में पिक्सेल है, तो मैं उस पिक्सेल की गति ले सकता हूं और गणना कर सकता हूं कि वह समय टी -1 कहां था, और फिर गणना करें कि समय टी -1 पर पिक्सेल समय टी -2 पर कहां है, और इसी तरह। 5 फ्रेम वापस। स्क्रीन स्पेस में ब्लर के विपरीत, मैंने प्रत्येक फ्रेम के लिए एक ही वजन का उपयोग किया, अर्थात। अस्थायी "कलंक" के लिए सभी फ़्रेमों के बीच के रंग को औसतन देखें।


एक पिक्सेल वेग चैनल रिपोर्टिंग जहां पिक्सेल अंतिम फ़्रेम में ऑब्जेक्ट और कैमरे की आवाजाही पर आधारित था।


वस्तुओं के संयुक्त धुंधलापन से बचने के लिए, हम फिर से वस्तु पहचानकर्ताओं के चैनल का उपयोग करेंगे। इस मामले में, हम केवल पहली वस्तु पर विचार करते हैं जो बीम से टकरा गई थी। यह ऑब्जेक्ट के भीतर एंटी-एलियासिंग प्रदान करता है, अर्थात। प्रतिबिंब में।

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


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


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

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


तैयार छवि।

गतिरोध कलाकृतियों अभी भी ध्यान देने योग्य हैं, क्योंकि मैंने प्रति पिक्सेल कई नमूनों का औसत लिया है, हालांकि मैंने पहले चौराहे के लिए ऑब्जेक्ट पहचानकर्ता और गति का चैनल लिया। आप इसे ठीक करने की कोशिश कर सकते हैं और नमूनों को त्यागकर प्रतिबिंबों में स्मूथिंग प्राप्त कर सकते हैं यदि वे पहले से मेल नहीं खाते हैं, या कम से कम अगर पहली टक्कर क्रम में नहीं होती है। व्यवहार में, निशान लगभग अदृश्य हैं, इसलिए मैंने उन्हें खत्म करने की जहमत नहीं उठाई। वस्तुओं की सीमाएं भी विकृत होती हैं, क्योंकि गति और वस्तु पहचानकर्ताओं के चैनलों को सुचारू नहीं किया जा सकता है। मैं 1080p के पैमाने में और कमी के साथ 2160p पर पूरी छवि प्रदान करने की संभावना पर विचार कर रहा था, लेकिन मेरी NVidia GTX 980ti 60fps पर ऐसे प्रस्तावों को संसाधित करने में सक्षम नहीं है, इसलिए मैंने इस विचार को छोड़ने का फैसला किया।

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