কীভাবে অ্যাবস্ট্রাক্ট 2 ডি টপ ডাউন পানির টেক্সচারটি অ্যানিমেট করবেন?

Question

আমি বর্তমানে সমুদ্রের টপ ডাউন ভিউ সহ একটি গেম বাস্তবায়ন করি। আমি নিম্নলিখিতটি ব্যবহার করি, একটি সামান্য বিমূর্ত টেক্সচার:

আসল টেক্সচারটি স্বচ্ছ, আমি স্বচ্ছতার জন্য সবুজ রঙের রঙ যুক্ত করেছি।

আমার এখন সমস্যাটি হ'ল, এই টেক্সচারটি কীভাবে প্রাণবন্ত করতে হবে তা আমি জানি না যাতে জলটি দেখতে সুন্দর লাগে। আমি পাপ তরঙ্গ সঙ্গে জমিন সরাতে চেষ্টা: texture.y += sin(angle)। অবশ্যই এখন পুরো টেক্সচারটি চলমান যা একরকম অবাস্তব দেখাচ্ছে। পরের জিনিসটি আমি চেষ্টা করেছি হ'ল অন্য স্তর যুক্ত করা এবং একটি প্যারাল্যাক্স প্রভাব প্রয়োগ করা। যাতে জলের পৃষ্ঠের নীচে প্রতিচ্ছবিগুলিও সরানো হবে তবে অনেক ধীর। এটিকে কিছুটা ভাল লাগছে তবুও ভাল লাগছে না।

আমি মনে করি সর্বাধিক সন্ধানকারী অ্যানিমেশনটি হ'ল, যদি পৃথক কক্ষগুলি প্রসারিত হয় এবং চুক্তিবদ্ধ হয় তবে এক ধরণের ওয়েব বা কাপড়ের মতো। কল্পনা করুন যে কেউ যদি এই কোষগুলির এক প্রান্তে কিছুটা টানেন এবং প্রতিবেশী কক্ষটি প্রসারিত হবে এবং আমি যে সেলটি টানছি তার দিকে (বা দিকে ঠেলা) চুক্তিবদ্ধ হবে। ঝরণার ওয়েবের মতো (?) তবে কীভাবে এরকম কিছু বাস্তবায়ন করা যায় তা সম্পর্কে আমার কোনও ধারণা নেই:

• এর জন্য গণিতের মডেল কী? ঝর্ণা সহ কিছু, যেখানে বাহিনী ধাক্কা দেয় / টানবে?
• এবং যদি তা হয় তবে আমি এই মডেলটিকে প্রদত্ত জমিনে কীভাবে মানচিত্র করব? সমস্ত বক্ররেখা রাখা এবং কি না ...

(প্রদত্ত টেক্সচারটি কীভাবে প্রাণবন্ত করা যায় সে সম্পর্কে আমি বিভিন্ন ধারণা / উত্তরগুলির জন্যও উন্মুক্ত Real

ডিএমগ্রিগরি থেকে সমাধান

আমি এই পোস্টে একটি libgdx উদাহরণ পোস্ট করেছি: 2 ডি ওয়াটার অ্যানিমেশনটি জাজড এবং মসৃণ নয় (টেক্সচার ফিল্টারিংয়ের উত্তর দেখুন)

Answer 1

এটি করার একটি সাধারণ উপায় হ'ল শ্যাডারে একটি অপ্রত্যক্ষ টেক্সচার লকউপ ব্যবহার করে ডিসপ্লে টেক্সচারটি বিকৃত করে:

এখানে আমি কিছু কম ফ্রিকোয়েন্সি রঙের শব্দ (এলোমেলো রঙের মসৃণ ব্লবগুলি টাইলিং) সহ একটি টেক্সচার ব্যবহার করছি এবং এটি সময়ের সাথে সাথে দর্শনের জ্যামিতিতে স্ক্রোল করছি।

এই টেক্সচারটি থেকে রঙগুলি আঁকানোর পরিবর্তে আমি লাল এবং সবুজ চ্যানেলগুলি নেব এবং 0.5fতাদের সিউডোরোডম 2 ডি ভেক্টরে পরিণত করতে সাবট্র্যাক্ট করব যা সময় ও স্থানের সাথে সহজেই পরিবর্তিত হয়।

মূল জলের টেক্সচার থেকে নমুনা দেওয়ার আগে আমি আমার ইউভি স্থানাঙ্কগুলিতে এই ভেক্টরের একটি ছোট একাধিক যোগ করতে পারি। এটি আমরা পড়ছি এবং প্রদর্শন করছি এমন অঙ্গবিন্যাসের অংশটি স্থানান্তরিত করে, এটি চারপাশে আবদ্ধ করে।

এই গোলমাল থেকে দুটি নমুনা গড়ে, বিপরীত দিকগুলিতে স্ক্রোল করে, আমরা চলাচলের দিকটি আড়াল করতে পারি যাতে এটি কেবল লক্ষ্যহীন শ্লোগানের মতো লাগে।

Ityক্যে শেডারটি দেখতে দেখতে এমনটি হবে - এটি আপনার পছন্দ মতো ছায়াময়ী ভাষায় অনুবাদ করার পক্ষে যথেষ্ট সহজ হওয়া উচিত:

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

এটি দেখতে খুব সুন্দর লাগছে। আমি নিশ্চিত নই যে আমি সমস্ত বৈশিষ্ট্যগুলি বুঝতে পেরেছি: _ নোজস্কেল = "শব্দের মানচিত্র" স্কেলিংয়ের জন্য স্কেলার। _নয়েসস্ক্রোলভেলোসিটি = ভেক্টর 2 আমরা শব্দের মানচিত্রের যে গতিতে গতিতে চলেছি। _নিউজ =?। _ ডিসস্টোরেশন = স্কেলার আমি কি কোনও বিকৃতি ফ্যাক্টর হিসাবে বেছে নিই? v2f = ভার্টেক্স আমরা রঙ নির্ধারণ করি। i =?

— morpheus05

_Noiseউপরের ছোট্ট ব্ল্ববি র্যান্ডম টেক্সচারটি [এমন একটি টেক্সচার স্যাম্পলার যা থেকে পড়ে)। v2f iভার্টেক্স শেডার থেকে বিভক্ত ডেটা - আমরা মূলত এটি যে পিক্সেলটি আঁকছি তার টেক্সচার সমন্বয় পেতে, এটি ব্যবহার করি i.uv। এবং আপনি বাকি সমস্ত সম্পর্কে ঠিক সঠিক।

— ডিএমগ্রিগরি

আমি শেডার বাস্তবায়ন করেছি এবং একরকম এটি কাজ করে না (এটি সরায় না বা বিকৃতিটি বড় আকারের হয়), আমি ধরে নিই আমি মানগুলি সঠিকভাবে সেট করি নি। সময় = এমএসে শেষ ফ্রেম থেকে পার্থক্য। noise_scale = 1 (আমি আপনার জমিন, মোড়ানো মোড পুনরাবৃত্তি ব্যবহার করুন) noise_scroll_velocity = [0.01, 0.01] বিকৃতি = 0.02

— morpheus05

নোট করুন যে চলকটিকে ডেল্টটাইম নয়, সময় বলা হয়। আপনি যদি সময়ের মধ্যে একটি পার্থক্য ব্যবহার করেন এবং আপনার ফ্রেমরেট সামঞ্জস্যপূর্ণ হয় তবে আপনি সর্বদা একই নম্বর পাবেন এবং আপনি একই আউটপুট দিয়ে শেডারটি আবার চালাবেন, একই আউটপুট পাবে না (কিছুই চালনা করে না)। সবচেয়ে খারাপ, যদি আপনার ফ্রেমরেটটি বেমানান হয় তবে আপনি ফিরে এবং সামনে কম্পন পেয়ে যাবেন। আপনি মোট সময় ব্যয় করতে চান, ডেল্টা সময় নয় not

— ডিএমগ্রিগরি

শীঘ্রই আমি প্রেরণকে আঘাত করি তা বুঝতে পেরেছিলাম এবং এখন এটি প্রায় কার্যকর। অ্যানিমেশনটি নীচের ডান দিকের কোণ থেকে তরঙ্গগুলি উত্থিত করে এবং 10 বা সেকেন্ড পরে এটি বন্ধ হয়ে যায় এমন তরঙ্গের মতো। এর কারণ কী হতে পারে?

— morpheus05

Answer 2

একে কাস্টিক এফেক্ট বলা হয় এবং রানটাইম এ এফেক্ট তৈরি করা মোটামুটি সময় সাশ্রয়ী, সুতরাং এটি প্রথাগতভাবে প্রাক-রেন্ডারযুক্ত ফ্রেম-বাই-ফ্রেম অ্যানিমেশন দিয়ে করা হয়। এমন সরঞ্জামগুলি রয়েছে যা আপনার জন্য কাস্টিক অ্যানিমেশন ফ্রেম তৈরি করবে, যেমন কাস্টিকস জেনারেটর , যার অ-বাণিজ্যিক ব্যবহারের জন্য একটি বিনামূল্যে সংস্করণ রয়েছে। এছাড়াও কিছু প্রাক-তৈরি রয়েছে যা আপনি উল্লিখিত সরঞ্জামটির প্রো সংস্করণের তুলনায় উল্লেখযোগ্যভাবে সস্তার জন্য কিনতে পারবেন।

নোট করুন যে কাস্টিক এফেক্টগুলি সাধারণত কোনও প্রভাব কোনও জলের নীচে বা ভূগর্ভস্থ তলদেশে হালকা কুকি হিসাবে প্রয়োগ করা হয়। অর্থাত, এটি নীচে তাকানোর সময় এটি জলের পৃষ্ঠের উপরে রাখলে সাধারণত জলটি দেখতে কেমন তা সাধারণত হয় না।

Comments

খুব মজার বিষয়, আমি এই জেনারেটরের দিকেও নজর রাখব (ঘটনাটি যদিও আমি বুঝতে পারছি শেডার বৈকল্পিকটি চেষ্টা করব ...)

— morpheus05

Answer 3

এটি এমন কোনও জমিনের মতো দেখাচ্ছে যা আপনি ভেরোনাই গ্রাফ থেকে তৈরি করতে পারেন, যেমন:

পয়েন্টগুলি সরিয়ে আপনি গ্রাফটিতে ছোট, মসৃণ সামঞ্জস্য করতে পারেন; প্রতিটি ফ্রেমটি আবার অঙ্কন করা বেশ ব্যয়বহুল হবে, তাই আপনি সম্ভবত অ্যানিমেশনটি প্রি-রেন্ডার করতে চান।

Comments

আমি অতীতে শ্যাডারে বাস্তবে কাস্টিকগুলি উপস্থাপন করেছি। এটি আপনার অবিচ্ছিন্নভাবে ব্যয়বহুল নয় যতটা আপনি ভাবতে পারেন ( এখানে কোনও ওয়েবজিএল শেডারটিতে ভোরোনাই কিনার রিয়েলটাইম উপস্থাপন করার একটি উদাহরণ রয়েছে ), যদিও বিন্দু বহুভুজের চেয়ে প্রান্তগুলিতে সঠিক মসৃণ আকার পাওয়া চ্যালেঞ্জ হতে পারে।

— ডিএমগ্রিগরি

ওহ, এটা খুব সুন্দর; আমি কিছু ভূখণ্ডের জেনারেটর পেয়েছি যার জন্য এটি খুব সহজ হবে।

— ফ্যাক্টিসিয়াসভাইর

Answer 4

একটি পুরাতন স্কুল পদ্ধতি রয়েছে, যার নীচে টেক্সচার লেয়ার যুক্ত থাকে এবং উপরে প্রতিবিম্বের জন্য দুটি অর্ধেক স্বচ্ছ টেক্সচার থাকে।

আপনি যদি সমস্ত পথে যেতে চান এবং জলটি ক্লোন করা তরঙ্গগুলিতে পূর্ণ দেখতে না চান বা নীল স্যুপকে সমীম করতে চান - ফ্লোম্যাপগুলি লক্ষ্য অর্জনের লক্ষ্য রয়েছে।

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

Comments

লিঙ্কগুলি সাহায্য করতে পারে তবে তারা কখনও ভাল উত্তর দেয় না। আপনি উভয় এই পদ্ধতিতে প্রসারিত করতে পারেন? কীভাবে এটি বাস্তবায়ন হবে?

— ভায়ল্যানকোর্ট

প্রথম পদ্ধতিটি হ'ল জলকে সঞ্জীবিত করার জন্য ব্যবহৃত একটি অতি প্রাচীন পদ্ধতি-আপনি একটি বেস স্তর পানির টেক্সচারটি গ্রহণ করেন যার ইউভিডাব্লু কোঅর্ডিনেটগুলি আপনার পছন্দের দিকে বদলে যায়। এখন আপনি অতিরিক্ত একটি সাধারণ মানচিত্র / গলিত মানচিত্র প্রয়োগ করুন যা আপনি অন্য দিকে বদলেছেন- যদি ভালভাবে কাজ করা হয় তবে এটি ছোট নদীগুলির জন্য বিশ্বাসযোগ্য মনে হচ্ছে। যদিও এটি জলের বৃহত সংস্থার পক্ষে খুব সীমিত - ততোধিক wavesেউয়ের যে কোনও কিছুর ফলে ময়রারের প্রভাব পড়বে। লিংকটি ফ্লোম্যাপের ব্যবহারকে আরও ভালভাবে বেষ্টন করার পরে ব্যাখ্যা করতে পারে।

— পিকা

আপনি এখানে যা যুক্ত করেছেন তা দিয়ে প্রশ্নটির উন্নতি করতে দয়া করে সম্পাদনা বৈশিষ্ট্যটি ব্যবহার করুন :) লোকেরা পোস্টে উত্তরগুলি অনুসন্ধান করতে ব্যবহৃত হয়, মন্তব্যে নয়।

— ভায়ল্যানকোর্ট