हम WebGL के लिए परिसंपत्तियों को सही ढंग से अनुकूलित करते हैं

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

ज्यामिति / मेष

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



जब सिलवटों में मॉडलिंग होती है, तो अधिक बहुभुज जोड़ने के बजाय छायांकन समूहों का उपयोग करना बेहतर होता है।



एक बेलनाकार मॉडल के साथ काम करते समय, केंद्र के करीब बहुभुज की संख्या को कम करने का प्रयास करें।



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

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

WebGL प्रदर्शन का अनुकूलन करने का एक सामान्य तरीका है कि सामान्य मानचित्र बनाकर बहुभुजों की संख्या को कम किया जाए।



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



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



अंत में, यहां कुछ मामले हैं जहां आप एक सामान्य मानचित्र का उपयोग कर सकते हैं, बजाय एक बहुत विस्तृत जाल के:

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

बनावट

यहां आधुनिक PBR प्रकाश मॉडल (और न केवल) में उपयोग किए जाने वाले बनावट का एक विशिष्ट सेट है।



जैसा कि आप देख सकते हैं, उनमें से ज्यादातर काले और सफेद हैं। इसलिए, आप एक छवि के आरजीबीए चैनलों (कुल छवि में 4 कार्ड तक) में बी / डब्ल्यू बनावट को जोड़ सकते हैं।



यदि आपके पास केवल एक बी / डब्ल्यू बनावट है, तो आप इसे अल्फा चैनल में पैक करके किसी भी मौजूदा आरजीबी बनावट के साथ जोड़ सकते हैं। अंत में, यदि आपके पास संयोजन करने के लिए कोई छवि नहीं है, तो आप अपनी काली और सफेद छवि को 95% संपीड़न और ग्रेस्केल सक्षम के साथ jpeg प्रारूप में बदल सकते हैं।



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

वर्टेक्स रंग

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



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

शेड्स की संख्या

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

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



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



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

कॉल ड्रा करें

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

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



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

एचडीआर प्रकाश

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

छाया

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



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



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