वेक्टर रेंडरिंग: आइकन डिज़ाइन में 3 डी ग्राफिक्स

मैं आपका ध्यान हमारे त्रिदेवनिक एंड्री पुश्किन ( धक्का ) के एक लोकप्रिय विज्ञान लेख से 3 डी वेक्टर में बदलने के तरीकों पर लाता हूं। चूंकि इसमें बहुत सारी समस्याएं हैं, इसलिए यह पूरे चक्र का पहला लेख है।







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



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



1. रंगों में उतरना या "शुद्ध" रंग प्राप्त करना बहुत मुश्किल है। अक्सर आइकन डिज़ाइन में, आपको किसी दिए गए सरगम ​​का अनुसरण करने की आवश्यकता होती है। बात यह है कि 3 डी ग्राफिक्स फोटोरिअलिस्टिक छवियों का उत्पादन करने के लिए डिज़ाइन किया गया है। और किसी भी वास्तविक वस्तु का रंग परिवेश प्रकाश पर बिखरा हुआ और प्रत्यक्ष प्रकाश पर निर्भर करता है। इसलिए सामग्री संपादक में सटीक रंग सेट करते हुए, हम आउटपुट पर वांछित रंग प्राप्त नहीं कर पाएंगे।





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



2. पिक्सल को हिट करने में असमर्थ।





चित्र से पता चलता है कि पिक्सेल में न तो ऊर्ध्वाधर और न ही क्षैतिज रेखाएँ पड़ती हैं। इसलिए सामान्य "धुंधली" छवि की भावना।



3. वस्तु का सटीक आकार प्राप्त करना कठिन है। हर कोई समझता है कि जब प्रतिपादन, आप सुरक्षित रूप से फ्रेम आकार निर्धारित कर सकते हैं। लेकिन आयत को 127 के आकार के ठीक उलट करने का प्रयास करें? 84 पिक्सेल। लगभग सब कुछ "आंख से" करने की आवश्यकता है।





जैसा कि आप देख सकते हैं, यहां तक ​​कि 3ds अधिकतम कार्यक्रम (3 डी ग्राफिक्स के लिए सबसे शक्तिशाली कार्यक्रमों में से एक) में, केवल फ्रेम आकार, और व्यक्तिगत वस्तुओं को कॉन्फ़िगर करना संभव है।



4. यह सटीक परिप्रेक्ष्य बनाने के लिए पर्याप्त श्रमसाध्य है। यह आइटम विवादास्पद लगता है और हमेशा उन लोगों को पहेली करता है जो 3 डी में काम नहीं करते हैं। आप एक सही और प्राकृतिक परिप्रेक्ष्य का निर्माण कर सकते हैं, आप 2-बिंदु परिप्रेक्ष्य का निर्माण कर सकते हैं। लेकिन अक्सर दिशानिर्देशों में सटीक निर्माण कोण निर्धारित किए जाते हैं, और उनका अनुसरण करना 3 डीशनिक के लिए एक गैर-तुच्छ कार्य है।





यहाँ दृष्टांत एक परिप्रेक्ष्य के निर्माण की सटीक पंक्तियों को दर्शाता है। कई आइकन ड्राइंग गाइड (जैसे विंडोज एक्सपी) सटीक कोण को इंगित करते हैं, जिस पर परिप्रेक्ष्य ग्रिड बनाया गया है। प्रतिपादन के दौरान उन्हें प्राप्त करने के लिए, आपको वास्तव में ऐसा करने की कोशिश करने की ज़रूरत है, जैसा कि मैंने बटुए के दृष्टांत के साथ किया था (यह स्पष्ट है कि दूर का किनारा पूरी तरह से ऊर्ध्वाधर नहीं बन गया है :))।



5. फोटोरिअलिज्म :) 3 डी में, इसके विपरीत फोटोरिअलिस्टिक इमेज बनाना ज्यादा आसान है। आइकन में "3 चीजों" की भावना से छुटकारा पाना मुश्किल है।





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



विशुद्ध रूप से तकनीकी समस्याएं हैं (हमेशा स्पष्ट अल्फा चैनल आवंटन नहीं है, वेरे में कुछ फिल्टर के साथ असंगत सफेद स्ट्रोक, पारभासी छाया प्राप्त करने की कठिनाई, आदि) ठीक है, आखिरी और सबसे महत्वपूर्ण दोष:



6. वेक्टर रेंडरिंग की संभावना



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



तो आइकन डिजाइन में 3 डी को कैसे एकीकृत किया जाए? अब ऐसा करने के केवल 3 मुख्य तरीके हैं। उनमें से प्रत्येक एक अलग लेख के हकदार हैं, हम तुरंत उनके ऊपर संक्षेप में जाएंगे।



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





एक ट्रैक्टर के चित्र 2 चित्रण पर। बाईं ओर परावर्तन सेटिंग्स के साथ एक रेंडर अक्षम है, दाईं ओर एआई में एक ट्रैक्ड वेक्टर छवि है।



2. एआई (या पीएस में ओवरले वेक्टर आकार) में रेंडर रेंडर को स्ट्रोक करें । सबसे "कम-तकनीक", लेकिन, दुर्भाग्य से, सबसे प्रभावी तरीका। वास्तव में, यह आइकनों को बनाने की प्रक्रिया में 3 डी को पेश करने का एकमात्र गंभीर तरीका है। ऐसा करने के लिए, आपको वांछित परिणाम के जितना संभव हो सके छवि को प्रस्तुत करना होगा। सभी चमक, सजगता, रंग। और तैयार छवि पर आगे, डिजाइनर एक वेक्टर छवि खींचता है।





इस प्रक्रिया के परिणाम तस्वीर में दिखाई दे रहे हैं - बाईं ओर एक "नंगे" रेंडर है, दाईं ओर एक सदिश आइकन है जो इस पर खींचा गया है।



दृष्टिकोण जटिल और बड़े आइकन में अच्छे परिणाम देता है (उदाहरण के लिए, जब उपकरण प्रस्तुत करना, विशेष रूप से पहियों के साथ :))



3. वेक्टर रेंडरिंग के प्रोग्राम और प्लगइन्स । आज 2 मुख्य उपकरण हैं जो इस दिशा को विकसित करते हैं। यह इलस्ट्रेट है! और स्विफ्ट 3 डी। मैं 3ds max के लिए प्लगइन्स और बाहरी रेंडर के रूप में दोनों उत्पादों का उपयोग करता हूं। इसके अलावा, मानक 3ds अधिकतम रेंडर - मानसिक रे आपको सीधे ईपीएस में वस्तुओं के किनारों और आकृति को प्रस्तुत करने की अनुमति देता है। यद्यपि ये क्षेत्र काफी सक्रिय रूप से विकसित हो रहे हैं (संस्करण से संस्करण तक स्विफ्ट 3 डी बेहतर हो रहा है), यह अभी भी वास्तविक वेक्टर रेंडरिंग से बहुत दूर है। फिलहाल, स्विफ्ट 3 डी जो भी कर सकता है, वह रंग-समूह वाली वस्तुओं के साथ एक वेक्टर जाल है। उसके साथ काम करना जारी रखना व्यावहारिक रूप से असंभव है। एकमात्र उपयोग मामला 2-रंग प्रतिपादन है, जब संपूर्ण छवि 2 प्राथमिक रंगों में विघटित हो जाती है, और उनमें से प्रत्येक एक अलग वस्तु बन जाती है।





तस्वीर में, पहला गियर एक फोटोरिअलिस्टिक विज़ुअलाइज़र (बिटमैप) द्वारा प्रस्तुत किया गया है। दूसरा स्विफ्ट 3 डी है जिसमें ईपीएस प्रारूप में 2-रंग रेंडरिंग सेटिंग (कार्टून टू कलर फिल) है। इस फ़ाइल को AI में खोलने पर, हमें 2 ऑब्जेक्ट मिलते हैं: ग्रे और ब्लैक। उत्तरार्ध एआई में एक ग्रे ऑब्जेक्ट के लिए लागू 1 ग्रेडिएंट के साथ है। जैसा कि आप देख सकते हैं, यदि आप इसके साथ आगे काम करते हैं, तो आप पूरी तरह से स्वीकार्य परिणाम प्राप्त कर सकते हैं।



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



PS: मैं 3ds मैक्स, मोडो और मडबॉक्स में काम करता हूं। शायद यह अन्य संपादकों में ऐसा नहीं है, लेकिन सभी कार्यक्रमों में आइकन डिजाइन के लिए 3 डी दृष्टिकोण के लिए सामान्य सिद्धांत और समस्याएं प्रासंगिक हैं। वेक्टर रिक्तता प्राप्त करने के कुछ अलग तरीके हो सकते हैं, उदाहरण के लिए, गैंडे में, कार्यक्रम से आयात करके सीधे वेक्टर प्राप्त करना संभव है। लेकिन यह मूल रूप से मानसिक रे का उपयोग करके ईपीएस प्रारूप में प्रस्तुत करने के समान है।