7 days of WordPress themes, graphics & videos - for free! Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Game Development
  2. Shaders

إنشاء تموج المياه للويب: الجزء 3

Read Time: 11 mins
This post is part of a series called Creating Toon Water for the Web.
Creating Toon Water for the Web: Part 2

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

مرحبًا بك مرة أخرى في هذه السلسلة المكونة من ثلاثة أجزاء حول إنشاء تموج الماء الانيق في PlayCanvas باستخدام مظلل قمة الرأس. في الجزء الثاني، قمنا بتغطية خطوط الطفو والرغوة. في هذا الجزء الأخير، سنقوم بتطبيق التشويه تحت الماء كإجراء مابعد المعالجة.

الانكسار وتأثيرات ما بعد المعالجة

هدفنا هو توصيل انكسار الضوء عبر الماء بصريًا. لقد قمنا بالفعل بتغطية كيفية إنشاء هذا النوع من التشويه في جزء مظلل في برنامج تعليمي سابق لمشهد ثنائي الأبعاد. والفرق الوحيد هنا هو أننا سنحتاج إلى معرفة أي منطقة من الشاشة تكون تحت الماء وتطبق التشويه فقط هناك.

ما بعد المعالجة 

بشكل عام، فإن تطبيق تأثير ما بعد المعالجة هو أي شيء يطبق على المشهد بأكمله بعد عرضه، مثل مسحة ملونة أو تأثير شاشة CRT القديمة. بدلاً من عرض المشهد الخاص بك مباشرةً على الشاشة، تقوم أولاً بعرضه على مخزن مؤقت أو محتوى، ثم عرض ذلك على الشاشة، مرورًا بتظليل مخصص.

في PlayCanvas، يمكنك إعداد تأثير ما بعد المعالجة بإنشاء نص برمجي جديد. قم بتسميته Refraction.js، وانسخ هذا القالب للبدء بـه:

هذا مثل البرنامج النصي العادي، لكننا نحدد فئة ما بعد تأثير الانكسار التي يمكن تطبيقها على الكاميرا. هذا يحتاج إلى أن يعرض  قمة الرأس ومظلل الجزء. تم إعداد السمات بالفعل، لذلك لننشئ Refraction.frag بهذا المحتوى:

ويقطع الانكسار بمظلل القمة الاساسي

الآن قم بإرفاق البرنامج النصي Refraction.js بالكاميرا، وعين المظلل بالسمات المناسبة. عند إطلاق اللعبة، يجب أن تشاهد المشهد تمامًا كما كان من قبل. هذا تأثير تالي أبيض ببساطة يعيد عرض المشهد. للتحقق من نجاح ذلك، حاول إعطاء المشهد صبغة  حمراء.

في Refraction.frag، بدلاً من مجرد إرجاع اللون، حاول تعيين المكون الأحمر إلى 1.0، والذي يجب أن يبدو مثل الصورة أدناه.

Scene rendered with a red tint Scene rendered with a red tint Scene rendered with a red tint

مظلل التشويه

نحتاج إلى إضافة وقت موحد للتشويه المتحرك، لذا انطلق وقم بإنشاء ذلك في Refraction.js، داخل هذا المنشئ لما بعد التأثير: 

الآن، داخل وظيفة الuvq هذه، نمررها إلى مظللنا ونزيدها:

الآن يمكننا استخدام نفس شفيرة المظلل من البرنامج التعليمي لتشويه الماء، مما يصنع مظهر شظايا كامل لدينا يبدو كالتالي:

إذا تم تنفيذ كل شيء، يجب أن يبدو كل شيء كما لو كان تحت الماء، كما هو موضح أدناه.

Underwater distortion applied to the whole scene Underwater distortion applied to the whole scene Underwater distortion applied to the whole scene
التحدي رقم 1: اجعل التشويه لا ينطبق إلا على النصف السفلي من الشاشة.

أقنعة الكاميرا

يمكنك ببساطة تسمية الأولوية () على مثيل طلب بيكاسو وتمريره في أي من الاعدادات: منخفض الاولوية أو أولوية عادية أو عالي الاولوية. الطريقة الأكثر مباشرة التي توصلت إليها للقيام بذلك هي إعادة تقديم المشهد مع سطح الماء كما هو أبيض مستمر، كما هو موضح أدناه.

Water surface rendered as a solid white to act as a maskWater surface rendered as a solid white to act as a maskWater surface rendered as a solid white to act as a mask

سيتم تقديم ذلك إلى محتوى يعمل كقناع. سنقوم بعد ذلك بتمرير هذا المحتوى إلى آلة التظليل الانكسارية، والتي من شأنها أن تشوه بكسل فقط في الصورة النهائية إذا كان البكسل المقابل في القناع أبيض.

دعونا نضيف خاصية منطقية على سطح الماء لمعرفة ما إذا كان يتم استخدامها كقناع. أضف هذا إلى Water.js:

يمكننا بعد ذلك تمريرها إلى المظلل مع بارامتر ضبط المادة  ('isMask'، this.isMask)؛ كما هو معتاد. ثم نعلن عن ذلك في Water.frag ونعين اللون الأبيض إذا كان صحيحًا.

تأكد من أن هذا يعمل عن طريق تبديل خاصية "Is Mask?" في المحرر وإعادة إطلاق اللعبة. يجب أن تبدو بيضاء، كما في الصورة السابقة.

الآن، لإعادة عرض المشهد، نحتاج إلى كاميرا ثانية. قم بإنشاء كاميرا جديدة في المحرر وأطلق عليها اسم CameraMask. انسخ كيان المياه في المحرر كذلك، واطلق عليه WaterMask. تأكد من "Is Mask?" غير صحيح بالنسبة لكيان المياه ولكن صحيح لـ WaterMask.

لإخبار الكاميرا الجديدة بأن يتم عرضها على نسيج بدلاً من الشاشة، قم بإنشاء برنامج نصي جديد يسمى CameraMask.js وقم بإرفاقه بالكاميرا الجديدة. نحن ننشئ هدف العارض لالتقاط خرج هذه الكاميرا كما يلي:

 الآن، إذا قمت بالتشغيل، فسترى أن هذه الكاميرا لم تعد تعرض على الشاشة. يمكننا الحصول على الخرج للعارض المستهدف في Refraction.js مثل هذا:

لاحظ أنني قمت بتمرير محتوى القناع هذا كوسيطة لمنشئ تأثير آخر. نحتاج إلى إنشاء مرجع له في منشئنا، لذا يبدو الأمر كما يلي:

أخيراً في وظيفة العارض، مرر العازل الى مظللنا مع:

الآن للتحقق من أن هذا كله يعمل، سأترك ذلك كتحدي.

# 2 التحدي: تقديم uMaskBuffer إلى الشاشة لتأكيد أنه هو خرج الكاميرا الثانية.

هناك شيء واحد يجب أن تدركه هو أن هدف العرض تم إعداده في تهيئة CameraMask.js، ويجب أن يكون جاهزًا في الوقت الذي يتم فيه استدعاء Refraction.js. إذا كانت البرامج النصية تعمل بالعكس، فسوف تحصل على خطأ. للتأكد من أنها تعمل بالترتيب الصحيح، اسحب قناع الكاميرا إلى أعلى قائمة الكيانات في المحرر، كما هو موضح أدناه.

PlayCanvas editor with CameraMask at top of entity listPlayCanvas editor with CameraMask at top of entity listPlayCanvas editor with CameraMask at top of entity list

يجب أن تبحث الكاميرا الثانية دائمًا عن نفس طريقة العرض الأصلية ، لذلك دعنا نتابع دائمًا موقعها ودورانها في تحديث CameraMask.js:

وحدد متابعة الكاميرا في البدء:

ابطال الاقنعة

كل من الكاميرات تقدم في الوقت نفسه الشيء نفسه. نريد من كاميرا القناع أن تقدم كل شيء باستثناء الماء الحقيقي، ونريد أن تعرض الكاميرا الحقيقية كل شيء ما عدا ماء القناع.

للقيام بذلك، يمكننا استخدام قناع ابطال صغير للكاميرا. يعمل هذا بطريقة مماثلة لأقنعة التصادم إذا سبق لك أن استخدمت هذه الأقنعة. سيتم إبطال كائن (لا يتم عرضه) إذا كانت نتيجة البت الموافق AND بين قناعه وقناع الكاميرا 1.

لنفترض أن الماء سيكون لديه مجموعة 2 بت، وسيكون لقناع الماء 3 بت. عندئذ تحتاج الكاميرا الحقيقية إلى ضبط جميع البتات باستثناء 3، وتحتاج كاميرا القناع إلى ضبط جميع البتات باستثناء 2. طريقة سهلة  للقول "جميع البتات باستثناء N" هي:

يمكنك قراءة المزيد حول العوامل التي تعمل بالتبادل هنا.

لإعداد أقنعة التخلص من الكاميرا، يمكننا وضع هذا داخل CameraMask.js الذي  يتم تهيئته في الأسفل:

الآن، في Water.js، عيّن قناع شبكة الماء على بت 2، ونسخة القناع له على البت  3:

الآن، سيكون هناك عرض واحد للمياه العادية، والآخر سوف يكون الماء الأبيض المستمر. النصف الأيسر من الصورة أدناه هو العرض من الكاميرا الأصلية، والنصف الأيمن من كاميرا القناع.

Split view of mask camera and original cameraSplit view of mask camera and original cameraSplit view of mask camera and original camera

تطبيق القناع

خطوة أخيرة الآن! نحن نعلم أن المناطق تحت الماء يتم تمييزها بالبكسلات البيضاء. نحتاج فقط للتحقق مما إذا لم يكن لدينا بكسل أبيض، وإذا كان الأمر كذلك، فأوقف التشوه في Refraction.frag:

وينبغي أن تفعل ذلك!

شيء واحد هو أن نلاحظ أنه منذ تهيئة القناع عند الإطلاق، إذا قمت بتغيير حجم الإطار في وقت التشغيل، فإنه لن يتطابق مع حجم الشاشة.

تنعيم

كخطوة اختيارية للتنظيف، ربما لاحظت أن الحواف في المشهد تبدو الآن حادة بعض الشيء. هذا لأنه عندما طبقنا ما بعد التأثير لدينا، فقدنا النعومة.

يمكننا تطبيق تنعيم إضافي فوق تأثيرنا كتأثير تالي آخر. لحسن الحظ، هناك تنعيم متاح في متجر PlayCanvas يمكننا استخدامه تماماً. انتقل إلى صفحة أصول النص البرمجي، وانقر على زر التنزيل الأخضر الكبير، واختر مشروعك من القائمة التي تظهر. سيظهر النص في جذر نافذة الأصول الخاصة بك كـ posteffect-fxaa.js. ما عليك سوى إرفاقه بكيان الكاميرا، ويجب أن يبدو مشهدك أجمل قليلاً!

افكار اخيرة

إذا كنت قد وصلت إلى هذا الحد فهنئ نفسك! غطينا الكثير من التقنيات في هذه السلسلة. يجب عليك الآن أن تكون مرتاحاً مع تظليل قمة الرأس، وتقديم القوام، وتطبيق تأثيرات ما بعد المعالجة، واختيار الأشياء بشكل انتقائي، واستخدام المخزن المؤقت العميق، والعمل مع المزج والشفافية. على الرغم من أننا ننفذ هذا في PlayCanvas، فهذه كلها مفاهيم رسومات عامة ستجدها بشكل ما على أي نظام أساسي ينتهي بك الأمر به.

كل هذه التقنيات تنطبق أيضا على مجموعة متنوعة من التأثيرات الأخرى. أحد التطبيقات المثيرة للاهتمام التي وجدتها لتظليل قمة الرأس هو في هذا الحديث عن فن أبزو، حيث يشرحون كيف استخدموا تظليل قمة الرأس في تحريك عشرات الآلاف من الأسماك على الشاشة بكفاءة.

يجب أن يكون لديك الآن تأثير مائي لطيف يمكنك تطبيقه على ألعابك! يمكنك بسهولة تخصيصه الآن بعد أن قمت بتجميع كل التفاصيل بنفسك. لا يزال هناك الكثير الذي يمكنك القيام به مع الماء (لم أذكر حتى أي نوع من أنواع التأمل على الإطلاق). فيما يلي بعض الأفكار.

موجات مستندة إلى الضوضاء

فبدلاً من تحريك الأمواج بمزيج من الجيب وجيب التمام، يمكنك أخذ عينة من الضجيج لجعل الأمواج تبدو طبيعية أكثر ولا يمكن التنبؤ بها.

مسارات رغوية ديناميكية

بدلاً من خطوط المياه الساكنة تمامًا على السطح، يمكنك أن ترسم على ذلك النسيج عندم تتحرك الأشياء، لإنشاء مسار رغوي ديناميكي. هناك الكثير من الطرق للقيام بهذا، لذا قد يكون هذا هو مشروعه الخاص.

مصدر الشيفرة

يمكنك العثور على مشروع PlayCanvas المستضاف النهائي هنا. يتوفر أيضًا منفذ Three.js في هذا المستودع.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.