मैं एक उत्पन्न जाल पर zig-zagging UV मैपिंग कलाकृतियों को कैसे ठीक कर सकता हूं?


10

मैं एक वक्र के आधार पर एक प्रक्रियात्मक जाल बना रहा हूं और नीचे देखने पर मेष का आकार पूरे वक्र में छोटा हो जाता है।

यहाँ छवि विवरण दर्ज करें

और समस्या यह है कि यूवी zig-zagged हो जाता है क्योंकि आकार बदलता है (यह पूरी तरह से काम करता है जब मेष का आकार पूरे वक्र में समान होता है)।

यहाँ छवि विवरण दर्ज करें

 Vertices.Add(R);
 Vertices.Add(L);
 UVs.Add(new Vector2(0f, (float)id / count));
 UVs.Add(new Vector2(1f, (float)id / count));
 start = Vertices.Count - 4;
          Triangles.Add(start + 0);
                 Triangles.Add(start + 2);
                 Triangles.Add(start + 1);
                 Triangles.Add(start + 1);
                 Triangles.Add(start + 2);
                 Triangles.Add(start + 3);

 mesh.vertices = Vertices.ToArray();
         //mesh.normals = normales;
         mesh.uv = UVs.ToArray();
         mesh.triangles = Triangles.ToArray();

मैं इसे कैसे ठीक करूं?


क्या हैं idऔर count? क्या करता UVs.ToArray()है? आप कार्ड के लिए कोने और बनावट के निर्देशांक कैसे अपलोड कर रहे हैं?
user1118321

@ user1118321 संदर्भ से, idस्ट्रिप के साथ सभी क्रॉसबार से बाहर वर्तमान खंड का सूचकांक है, जहां countकुल में हैं। List<T>.ToArray()सूची में सभी प्रविष्टियों का टाइप किया गया सरणी देता है (इसलिए यहां, ए Vector2[])। इन डेटा बफ़र्स को अंतिम कुछ पंक्तियों में Meshउदाहरण के लिए असाइन करके रेंडरिंग सिस्टम को उपलब्ध कराया जाता है mesh। लेकिन इनमें से कोई भी कोड का विशेष रूप से दिलचस्प हिस्सा नहीं है: शीर्ष बिंदुओं को कैसे चुना जाता है। उन विवरणों को देखना अधिक उपयोगी होगा। ;)
DMGregory

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

जवाबों:


13

विशिष्ट यूवी मैपिंग जिसे एक एफाइन परिवर्तन कहा जाता है । इसका मतलब है कि 3 डी स्पेस और टेक्सचर स्पेस के बीच प्रत्येक त्रिकोण की मैपिंग में रोटेशन, ट्रांसलेशन, स्केलिंग / स्क्वैश, और न्यूवा शामिल हो सकता है (यानी कुछ भी हम एक सजातीय मैट्रिक्स गुणन के साथ कर सकते हैं)

Affine परिवर्तनों के बारे में बात यह है कि वे अपने पूरे डोमेन में समान हैं - रोटेशन, अनुवाद, स्केल, और तिरछा हम शीर्ष पर बनावट के लिए लागू होते हैं A, वैसा ही है जैसा हम किसी भी एक त्रिकोण के भीतर, वर्टेक्स B के पास लागू होते हैं। एक स्थान पर समानांतर चलने वाली रेखाओं को दूसरे में समानांतर रेखाओं के साथ मैप किया जाएगा, कभी परिवर्तित / परिवर्तित नहीं किया जाएगा।

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

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

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

लेकिन इसके चारों ओर एक रास्ता है। हम एक ही चाल का उपयोग कर सकते हैं जिसका उपयोग हम 3 डी रेंडरिंग के लिए करते हैं जो कि आयताकार दीवारों और फर्श के परिप्रेक्ष्य में ट्रेपोज़ोइड्स को आकर्षित करने के लिए है: हम प्रोजेक्टर निर्देशांक का उपयोग करते हैं !

असर बनावट: ज़िग-ज़ैग कलाकृतियों के साथ सामान्य अनुष्ठान बनावट का उदाहरण

अनुमानित बनावट: कलाकृतियों को सही करने वाली प्रोजेक्टिंग टेक्स्टिंग का उदाहरण

ऐसा करने के लिए, हमें एक तीसरा uv समन्वय (uvw) जोड़ना होगा और अपने शेड्स को संशोधित करना होगा।

प्रत्येक बिंदु पर एक स्केल फैक्टर को देखते हुए (उस स्थान पर अपनी पट्टी की चौड़ाई के बराबर कहते हैं), आप अपने नियमित 2D uv से समन्वित 3D प्रोजेक्टिव uvw का निर्माण इस तरह से कर सकते हैं:

Vector3 uv3 = ((Vector3)uv2) * scale;
uv3.z = scale;

इन 3 डी uvw निर्देशांक को अपने जाल पर लागू करने के लिए, आपको वेक्टर 3 अधिभार जाल का उपयोग करना होगा। SetUVs (int चैनल, सूची uvs)

और 3 डी बनावट समन्वय की उम्मीद करने के लिए अपने shader के इनपुट संरचना को बदलना सुनिश्चित करें (डिफ़ॉल्ट अनलिमिटेड shader का उपयोग करके यहां दिखाया गया है):

struct appdata
{
    float4 vertex : POSITION;
    float3 uv : TEXCOORD0; // Change float2 to float 3.
};
// Also do this for the uv sent from the vertex shader to the fragment shader.

आपको शीर्ष शेफ़र में ट्रांसफ़ॉर्म ENDEX मैक्रो को भी काटने की आवश्यकता होगी, क्योंकि यह एक 2 डी यूवी की उम्मीद करता है:

// o.uv = TRANSFORM_TEX(v.uv, _MainTex);
o.uv = v.uv;
// If you define a float4 with the special name _MainTex_ST, 
// you can get the same effect the macro had by doing this:
o.uv.xy = o.uv.xy * _MainTex_ST.xy + _MainTex_ST.zw;

अंत में, बनावट के नमूने के लिए एक 2D बनावट के समन्वय के लिए वापस मुड़ने के लिए, आप अपने टुकड़े टुकड़े में तीसरे समन्वय द्वारा विभाजित करते हैं :

float2 uv = i.uv.xy / i.uv.z;

चूँकि हमने इस 3D uvw को हमारे वांछित 2D समन्वय से समान संख्या से गुणा करके बनाया है, इसलिए दोनों ऑपरेशन रद्द हो जाते हैं और हम अपने मूल वांछित 2D निर्देशांक में वापस आ जाते हैं, लेकिन अब कोने के बीच गैर-रेखीय प्रक्षेप होता है। : डी

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


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

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

क्या मुझे विभाजक को तीसरे समन्वय के रूप में संग्रहीत करने की आवश्यकता है (और उस परिवर्तन संरचना के कारण और TRANSFORM_TEX मैक्रो को काट दिया जाए, जो मुझे नहीं पता कि कैसे तीनjs में करना है) या क्या मैं सिर्फ सत्यापनकर्ता को वर्कर शेडर की विशेषता के रूप में पास कर सकता हूं और फिर वहाँ से टुकड़े टुकड़े करने के लिए अलग अलग के रूप में जहाँ यह विभाजन के लिए इस्तेमाल किया जा सकता है?
दजिवो जेलिक्व

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

मैंने अभी तक कोशिश नहीं की क्योंकि मैं समय बर्बाद नहीं करना चाहता था जब तक मैं यह सत्यापित नहीं करता कि यह संभव है। बस एक आखिरी सवाल, खंडित टुकड़े तक पहुँचने के बाद विभाजक को भी प्रक्षेपित किया जाएगा, सही? मतलब है कि दो कोने के बीच पिक्सेल पर यह कुछ प्रक्षेपित मूल्य और मूल मूल्य नहीं होगा? मेरे पास कठिन समय है कि मैं अपने सिर को लपेटकर युवी को क्यों बढ़ाऊं और फिर इसे विभाजित करने से मदद मिलती है, लेकिन मैं इसके लिए आपका शब्द लेता हूं और इसे आजमाता हूं। : थोड़ा_समर्थन_प्रश्न: बहुत बहुत धन्यवाद आपकी मदद!
डेविवो जेलिक्व
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.