पानी की बनावट के नीचे 2d शीर्ष पर कैसे चेतन करें?

Question

मैं वर्तमान में समुद्र के ऊपर नीचे देखने के साथ एक खेल को लागू करता हूं। मैं निम्नलिखित का उपयोग करता हूं, थोड़ा सार बनावट:

वास्तविक बनावट पारदर्शी है, मैंने स्पष्टता के लिए हरे रंग की तरह रंग जोड़ा।

मेरे पास अब जो समस्या है, वह यह है कि मैं इस बनावट को नहीं जानता कि पानी कितना अच्छा लगता है। मैंने बनावट को एक पाप तरंग के साथ स्थानांतरित करने की कोशिश की texture.y += sin(angle):। बेशक अब पूरी बनावट घूम रही है जो अवास्तविक है। अगली चीज़ जो मैंने कोशिश की वह है एक और परत जोड़ना और एक लंबन प्रभाव को लागू करना। ताकि पानी की सतह के नीचे के परावर्तन भी गतिमान हों, लेकिन बहुत धीमा। यह थोड़ा बेहतर लग रहा है लेकिन अभी भी नहीं ... काफी अच्छा है।

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

• क्या इसके लिए गणित-मॉडल को व्हाट्सएप करें? स्प्रिंग्स के साथ कुछ, जहां बल धक्का / खींचते हैं?
• और यदि हां, तो मैं इस मॉडल को दी गई बनावट को कैसे मैप करूं? सभी घटता रहे और क्या नहीं ...

(मैं दी गई बनावट को कैसे एनिमेट कर सकता हूं, इस पर विभिन्न विचारों / उत्तरों के लिए भी खुला हूँ। यथार्थवाद यहाँ बात नहीं है, बस आंदोलनों की तरह कुछ अच्छा दिखने वाला पानी ...)

DMGregory से समाधान

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

Answer 1

यह किया जाता है एक आम तरीका प्रदर्शन बनावट विकृत करने के लिए shader में एक अप्रत्यक्ष बनावट लुकअप का उपयोग कर रहा है:

यहां मैं कुछ कम-आवृत्ति वाले रंग शोर (यादृच्छिक रंगों के चिकनी बूँदें) के साथ एक बनावट का उपयोग कर रहा हूं, और इसे समय के साथ प्रदर्शन ज्यामिति पर स्क्रॉल कर रहा हूं।

इस बनावट से रंगों को खींचने के बजाय, मैं लाल और हरे रंग के चैनल लेता हूं और घटाता हूं 0.5f उन्हें एक छद्म आयामी 2D वेक्टर में बदलने के लिए हूं जो समय और स्थान पर आसानी से बदलता है।

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

इस शोर से दो नमूनों को औसत करके, विपरीत दिशाओं में स्क्रॉल करते हुए, हम आंदोलन की दिशा को छिपा सकते हैं, इसलिए यह केवल लक्ष्यहीन स्लोसहिंग जैसा दिखता है।

एकता में shader इस तरह दिखेगा - यह सरल होना चाहिए कि आपकी पसंद की shader भाषा में अनुवाद हो:

fixed4 frag (v2f i) : SV_Target
{               
    float2 waveUV = i.uv * _NoiseScale;
    float2 travel = _NoiseScrollVelocity * _Time.x;

    float2 uv = i.uv;
    uv += _Distortion * (tex2D(_Noise, waveUV + travel).rg - 0.5f);
    waveUV += 0.2f; // Force an offset between the two samples.
    uv += _Distortion * (tex2D(_Noise, waveUV - travel).rg - 0.5f);

    // Sample the main texture from the distorted UV coordinates.
    fixed4 col = tex2D(_MainTex, uv);

    return col;
}

Comments

यह वास्तव में अच्छा लग रहा है। मुझे यकीन नहीं है कि मैं सभी विशेषताओं को समझता हूं: "शोर मानचित्र" को स्केल करने के लिए _NoseScale = स्केलर। _NoiseScrollVelocity = वेक्टर 2 जिस गति से हम शोर के नक्शे पर आगे बढ़ते हैं। _Noise = _Distortion = स्केलर I एक विकृति कारक के रूप में चुनता है? v2f = वर्टेक्स हम रंग निर्धारित करते हैं। मैं =?

— morpheus05

_Noise[एक बनावट नमूना है जो ऊपर से पढ़ता है] ऊपर की छोटी सी बेतरतीब बनावट। v2f iवर्टिकल शेडर से प्रक्षेपित डेटा है - हम मुख्य रूप से इसका उपयोग पिक्सेल के लिए बनावट निर्देशांक प्राप्त करने के लिए करते हैं, जो हम ड्राइंग कर रहे हैं i.uv। और आप बाकी के बारे में बिल्कुल सही हैं।

— DMGregory

मैंने shader कार्यान्वित किया है और किसी तरह यह काम नहीं करता है (यह स्थानांतरित नहीं होता है या विरूपण बड़ा है), मुझे लगता है कि मैंने मूल्यों को सही ढंग से सेट नहीं किया है। समय = एमएस में अंतिम फ्रेम से अंतर। शोर_काले = 1 (मैं आपकी बनावट, रैप मोड रिपीट का उपयोग करता हूं) शोर_कॉल_वेलोसिटी = [0.01, 0.01] विरूपण = 0.02

— morpheus05

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

— DMGregory

जल्द ही मैं हिट भेज रहा हूँ मुझे एहसास हुआ कि और अब यह लगभग काम करता है। एनीमेशन नीचे दाएं कोने से तरंगों को कम करने के लिए लगता है और 10 या इतने सेकंड के बाद यह बस बाहर निकलता है, जैसे लहरें बंद हो जाती हैं। इसका क्या कारण रह सकता है?

— morpheus05

Answer 2

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

ध्यान दें कि कास्टिक प्रभाव भी आमतौर पर एक पानी के नीचे इलाके में या पानी के नीचे की सतह पर एक प्रकाश कुकी के रूप में लागू किया जाता है। यही है, इसे पानी की सतह पर डालते समय नीचे देखते हुए यह सामान्य रूप से नहीं है कि पानी कैसा दिखता है।

Comments

यह बहुत दिलचस्प है, मैं इस जनरेटर पर भी एक नज़र डालूंगा (हालांकि, अगर मैं इसे समझता हूं तो मैं शेडर वेरिएंट की कोशिश करूंगा ...)

— morpheus05

Answer 3

यह एक बनावट की तरह दिखता है जिसे आप वोरोनोई ग्राफ से उत्पन्न कर सकते हैं, जैसे:

आप बिंदुओं को स्थानांतरित करके ग्राफ में छोटे, चिकनी समायोजन कर सकते हैं; ग्राफ को फिर से चित्रित करना प्रत्येक फ्रेम काफी महंगा होगा, इसलिए आप एनीमेशन को पूर्व-रेंडर करना चाहते हैं।

Comments

मैं वास्तव में अतीत में एक छायादार में इस तरह कास्टिक प्रदान किया है। यह आवश्यक नहीं है कि आप जितना सोच सकते हैं उतना महंगा नहीं है ( यहाँ एक उदाहरण WebGL shader में वोरोनोई किनारों को प्रस्तुत करता है ), हालांकि किनारों पर सही चिकनी आकृति प्राप्त करना - नुकीले बहुभुजों के बजाय - चुनौतीपूर्ण हो सकता है।

— DMGregory

ऊ, यह बहुत अच्छा है; मुझे कुछ इलाके जनरेटर मिले हैं जिनके लिए यह बहुत आसान होगा।

— FacticiusVir

Answer 4

एक ओडस्कूल विधि है, जिसमें एक निचली बनावट की परत होती है, और शीर्ष पर प्रतिबिंब के लिए दो आधा पारदर्शी बनावट होती है।

यदि आप सभी तरह से जाना चाहते हैं और चाहते हैं कि पानी क्लोन तरंगों से भरा न दिखे या नीले रंग का सूप-फ्लोमैप्स गोल करने के लिए मिल जाए।

https://steamcdn-a.akamaihd.net/apps/valve/2010/siggraph2010_vlachos_waterflow.pdf

Comments

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

— वेलनकोर्ट

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

— पिका

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

— वेलनकोर्ट