تأملات كاوية واقعية

معظم الفنانين التقنيين في مرحلة ما من حياتهم المهنية يحاولون خلق انعكاسات معقولة للكاوية. إذا كنت مطور ألعاب ، فإن أحد الأسباب الرئيسية لقراءة Twitter هو التدفق اللامحدود للإلهام الذي يمكنك الاستفادة منه. منذ بضعة أيام ، نشر Florian Gelzenlichter ( kolyaTQ on twitter) صورة GIF للتأثير الكاوية التي تم إنشاؤها في Unity باستخدام shaders. اكتسب المنشور (الموضح أدناه) بسرعة 1.5 ألف إعجاب ، مما يظهر اهتمامًا مخلصًا بهذا النوع من المحتوى.


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

في نهاية هذه المقالة ، يوجد رابط لتنزيل حزمة Unity وجميع الأصول اللازمة.

ما هو الكاوية

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


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

تشريح التأثير

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

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


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

بعد تلقي الملمس ، يقترح فلوريان اتخاذ ثلاث خطوات:

• طبّق نقشًا كاويًا مرتين على سطح النموذج ، في كل مرة باستخدام أحجام وسرعات مختلفة
• خلط اثنين من أنماط مع المشغل min
• افصل قنوات RGB عند أخذ العينات.

دعونا نرى كيف يمكنك تنفيذ كل خطوة من الخطوات في الوحدة.

شادر الخلق

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

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

لنقم بإنشاء اثنين من خصائص التظليل :

 Properties { ... [Header(Caustics)] _CausticsTex("Caustics (RGB)", 2D) = "white" {} // Tiling X, Tiling Y, Offset X, Offset Y _Caustics_ST("Caustics ST", Vector) = (1,1,0,0) } 

والمتغيرات Cg المقابلة:

 sampler2D _CausticsTex; float4 _Caustics_ST; 

تتوافق خصائص التظليل مع الحقول المعروضة في Unity Material Inspector. متغيرات Cg المقابلة هي القيم نفسها ، والتي يمكن استخدامها في كود التظليل.

كما ترى من الكود أعلاه ، _Caustics_ST هي float4 ، أي أنها تحتوي على أربع قيم. سوف نستخدمها للتحكم في أخذ عينات من المادة الكاوية. وهي:

• _Caustics_ST.x : مقياس المادة الكاوية على طول المحور X ؛
• _Caustics_ST.y : مقياس المادة الكاوية على طول المحور ص ؛
• _Caustics_ST.z : إزاحة المادة الكاوية على طول المحور X ؛
• _Caustics_ST.w : إزاحة المادة الكاوية على طول المحور ص ؛

نسيج العينات

يحتوي كل تظليل سطحي على وظيفة ، تُعرف عمومًا surf ، والتي يتم استخدامها لتحديد لون كل بكسل مقدم. تبدو وظيفة surf "القياسية" كما يلي:

 void surf (Input IN, inout SurfaceOutputStandard o) { // Albedo comes from a texture tinted by color fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; // Metallic and smoothness come from slider variables o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; } 

يتم تحديد اللون النهائي من خلال عدد الحقول التي يجب على التظليل SurfaceOutputStandard وإعادتها في بنية تسمى SurfaceOutputStandard . نحتاج إلى تغيير Albedo ، والذي يطابق تقريبًا لون العنصر المضاء بالضوء الأبيض.

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

تتيح لك تقنية تسمى الأشعة فوق البنفسجية تراكب فهم أي جزء من النسيج يحتاج إلى أخذ عينات حسب أي جزء من الهندسة يجب تقديمه. يتم ذلك باستخدام uv_MainTex - المتغير float2 ، المخزن في كل قمة من طراز 3D والإشارة إلى تنسيق الملمس.

تتمثل فكرتنا في استخدام _Caustics_ST لتوسيع وإزاحة uv_MainTex لتمديد ونقل المادة الكاوية عبر النموذج.

 void surf (Input IN, inout SurfaceOutputStandard o) { // Albedo comes from a texture tinted by color fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; // Caustics sampling fixed2 uv = IN.uv_MainTex * _Caustics_ST.xy + _Caustics_ST.zw; fixed3 caustics = tex2D(_CausticsTex, uv).rgb; // Add o.Albedo.rgb += caustics; // Metallic and smoothness come from slider variables o.Metallic = _Metallic; o.Smoothness = _Glossiness; o.Alpha = ca; } 

النتائج الأولية مبينة أدناه:

الكاوية المتحركة

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

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

أسهل طريقة هي ببساطة تعويض النسيج بناءً على الوقت الحالي.

 // Caustics UV fixed2 uv = IN.uv_MainTex * _Caustics_ST.xy + _Caustics_ST.zw; uv += _CausticsSpeed * _Time.y; // Sampling fixed3 caustics = tex2D(_CausticsTex, uv).rgb; // Add o.Albedo.rgb += caustics; 

يحتوي الحقل _Time.y على وقت التشغيل الحالي بالثواني . إذا تحرك الانعكاس بسرعة كبيرة ، فيمكنك ضربها بعامل. لهذا ، يتم _CausticsSpeed متغير _CausticsSpeed من النوع float2 في التعليمة البرمجية المعروضة أعلاه.

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

النتائج المبينة أدناه لا تزال متواضعة جدا. هذا طبيعي: لا يزال أمامنا الكثير لنفعله لجعل الأفكار تبدو جميلة.

أخذ العينات متعددة

يصبح التأثير حيا إذا أخذت عينات من المادة الكاوية ليس مرة واحدة ، ولكن مرتين. إذا وضعتهم فوق بعضهم البعض ونقلتهم بسرعات مختلفة ، فستكون النتيجة مختلفة تمامًا.

أولاً ، نقوم بتكرار _Caustics_ST و _CausticsSpeed بحيث يكون لعينات _CausticsSpeed مقاييس مختلفة وعمليات إزاحة وسرعات مختلفة:

 [Header(Caustics)] _CausticsTex("Caustics (RGB)", 2D) = "white" {} // Tiling X, Tiling Y, Offset X, Offset Y _Caustics1_ST("Caustics 1 ST", Vector) = (1,1,0,0) _Caustics2_ST("Caustics 1 ST", Vector) = (1,1,0,0) // Speed X, Speed Y _Caustics1_Speed("Caustics 1 Speed", Vector) = (1, 1, 0 ,0) _Caustics2_Speed("Caustics 2 Speed", Vector) = (1, 1, 0 ,0) 

الآن وقد أصبح لدينا عينتان كاويتان ، يمكن خلطهما باستخدام عامل min . إذا كنت تأخذ فقط متوسط ​​القيمة ، فلن تكون النتيجة جيدة جدًا.

 // Caustics samplings fixed3 caustics1 = ... fixed3 caustics2 = ... // Blend o.Albedo.rgb += min(caustics1, caustics2); 

مثل هذا التغيير البسيط يحدث فرقًا كبيرًا:


للحفاظ على رمز جميل ، يمكنك أيضا التفاف رمز أخذ العينات الكاوية في وظيفتك الخاصة:

 // Caustics fixed3 c1 = causticsSample(_CausticsTex, IN.uv_MainTex, _Caustics1_ST, _Caustics1_Speed); fixed3 c2 = causticsSample(_CausticsTex, IN.uv_MainTex, _Caustics2_ST, _Caustics2_Speed); o.Albedo.rgb += min(c1, c2); 

فصل RGB

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

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

لنبدأ بإضافة خاصية _SplitRGB ، والتي تشير إلى قوة تأثير _SplitRGB :

 // Caustics UV fixed2 uv = IN.uv_MainTex * _Caustics_ST.xy + _Caustics_ST.zw; uv += _CausticsSpeed * _Time.y; // RGB split fixed s = _SplitRGB; fixed r = tex2D(tex, uv + fixed2(+s, +s)).r; fixed g = tex2D(tex, uv + fixed2(+s, -s)).g; fixed b = tex2D(tex, uv + fixed2(-s, -s)).b; fixed3 caustics = fixed3(r, g, b); 

يمكن تحديد مقدار إزاحة قنوات RGB بشكل تعسفي ، ولكن حتى مع هذا الإزاحة البسيطة ، يتم الحصول على صورة مقنعة للغاية:

الخلاصة والتنزيلات

إذا كنت مهتمًا بمعرفة كيفية إنشاء مواد كاوية غير ملحومة ، فعليك قراءة المقالة المثيرة للاهتمام "مواد كاوية دورية" .

في هذه الأثناء ، يواصل فلوريان العمل على تظليله الكاوية وقام ببعض التحسينات المثيرة للاهتمام التي يمكن رؤيتها.


تتوفر حزمة كاملة لهذا البرنامج التعليمي في Patreon ، وهي تشمل جميع الأصول اللازمة لإعادة إنشاء هذه التقنية. تم تصدير الحزمة من Unity 2019.2 وتتطلب Postprocessing Stack v2.

• الأصول القياسية : ملف شادر فقط
• الأصول المدفوعة : المشهد الكامل ، بما في ذلك الملمس والمواد الكاوية.