مرحبًا بك في هذا الفصل حول المؤثرات البصرية (VFX) في Three.js و React Three Fiber. في هذا الفصل، ستتعلم كيفية إنشاء مؤثرات بصرية مذهلة ستجعل مشاهدك ثلاثية الأبعاد تنبض بالحياة.

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

معاينة لمشروع TSL GPGPU الذي سنبنيه معًا.

فن VFX

VFX هو اختصار لـ Visual Effects، وهو فن إنشاء مؤثرات لتعزيز التجربة البصرية لفيلم أو لعبة فيديو، أو بالنسبة لنا لمشاريعنا على الويب ثلاثية الأبعاد.

يمكن استخدام VFX لإنشاء مؤثرات واقعية، مثل الانفجارات والنار والماء والدخان، أو مؤثرات خيالية، مثل التعويذات السحرية والتنقل الآني، وأكثر من ذلك بكثير.

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

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

عند دخولك عالم VFX، كن مستعداً لرؤية ألعاب الفيديو والأفلام بصورة مختلفة. ستبدأ بملاحظة المؤثرات البصرية المستخدمة لإنشاء ما تراه على الشاشة.

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

يتكون التأثير من عنصر واحد أو أكثر. هذه العناصر يمكن أن تكون جزيئات، shaders، textures، meshes، trails، والمزيد. من خلال دمج هذه العناصر، يمكنك إنشاء مؤثرات معقدة وجميلة.

سنتعلم كيفية إنشاء كل من هذه العناصر باستخدام Three.js و React Three Fiber في الدروس القادمة. ولكن أولاً، دعونا نلقي نظرة على كل منها.

الجزيئات

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

من خلال اللعب بعدد الجزيئات وخصائصها، مثل حجمها وملمسها ولونها وسرعتها وعمرها، يمكنك إنشاء عدد لا نهائي من التأثيرات.

يمكن أن تكون Sprites (صور ثنائية الأبعاد دائمًا تواجه الكاميرا) أو كائنات ثلاثية الأبعاد.

عرض مسبق لدرس الألعاب النارية.

Meshes/Geometry

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

من خلال اللعب في الشكل والـ material والـ shaders، يمكنك إنشاء تأثيرات فريدة ومميزة.

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

Trails

الـ Trails هي نوع من التأثير الذي يُنشئ خطًا خلف الكائن. يمكن استخدامها لإنشاء تأثيرات مثل المذنب أو شعاع الليزر أو الرياح.

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

لإنشائها، يمكننا استخدام الجزيئات أو الـ Meshes (مثل الخطوط أو الأنابيب). سنتعلم كلتا الطريقتين في الدروس التالية.

سنلعب مع الـ Trails لنخلق تأثير مذنب وأكثر.

Shaders/Texures

لقد تعلمنا بالفعل عن shaders في الفصل المخصص لها. في سياق VFX، يمكن تطبيق shaders على particles أو meshes أو المشهد بأكمله لجعلها تتحرك، تتغير لونها، تتشوه، والمزيد. الحد الوحيد هو خيالك.

من خلال الجمع بين shaders وtextures، يمكنك إنشاء تأثيرات أكثر تعقيدًا. يمكن استخدام textures لإضافة تفاصيل إلى التأثيرات الخاصة بك، مثل الضوضاء أو الأنماط أو الصور.

SFX

SFX تعني تأثيرات صوتية، وعلى الرغم من أنها ليست مرتبطة مباشرة بـ VFX، إلا أنها جزء مهم من التجربة. بإضافة تأثيرات صوتية إلى الـ VFX وبمزامنتها مع المؤثرات البصرية، يمكنك إنشاء تجربة أكثر إغمارًا وتماسكًا.

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

المعالجة بواسطة CPU مقابل GPU

عند إنشاء VFX، وخاصة في بيئة محدودة مثل الويب، من المهم أن تكون واعيًا لأداء تأثيراتك.

عند إنشاء VFX، تريد تخفيف الحمل قدر الإمكان إلى GPU. هذا يعني أنك تريد استخدام shaders وtextures والتقنيات المعجلة في GPU لإنشاء تأثيراتك.

بالنسبة للتأثيرات البسيطة، مثل بعض الجزيئات، يمكنك استخدام CPU. ومع ذلك، من أجل التأثيرات المعقدة، مثل آلاف الجزيئات، سترغب في استخدام GPU.

سنتعلم تقنيات كل من CPU وGPU في هذه الدورة، لكننا سنركز على تقنيات GPU قدر الإمكان. هذا سوف يضمن أن تأثيراتك تعمل بسلاسة على معظم الأجهزة.

سوف نقوم بإنشاء محرك VFX بسيط للـ GPU والذي سيسمح لنا بإنشاء تأثيرات معقدة بسهولة. كما سنكتشف WebGPU مع TSL بمشروع GPGPU رائع.

اكتساب المزيد

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

موارد

في حين أن نظام Three.js البيئي قليل بالـ VFX، إلا أن هناك العديد من الموارد المتاحة لتطوير الألعاب، ويمكن تطبيقها على Three.js. Unity وUnreal وGodot هي محركات رائعة لمعرفة المزيد عن الـ VFX.

كالعادة، التبديل بين مصادر متعددة هو وسيلة رائعة للتعلم. إليك بعض الموارد التي تساعدك على البدء:

• قناة Gabriel Aguiar على YouTube تحتوي على دروس رائعة عن VFX في Unity والآن Godot. أوصي أيضًا بدورته على Udemy المسماة Visual Effects for Games in Unity - Beginner To Intermediate.

• قناة Brackeys على YouTube تحتوي على دروس رائعة عن VFX في Unity (والآن Godot بعد غياب طويل).

• قناة Coreb Games على YouTube مشابهة للقنوات السابقة ولكن مع Unreal Engine.

• قناة أو موقع VFX Apprentice تحتوي على العديد من الفيديوهات حول VFX ومبادئها.

حاول تكرار التأثيرات التي تراها في هذه الدروس في Three.js وReact Three Fiber. ستتعلم الكثير من خلال القيام بذلك.

ArtStation أو Pinterest هي أيضًا أماكن رائعة للعثور على الإلهام.

مكتبات

لسوء الحظ، Three.js لا يحتوي على محرك VFX مدمج مثل Unity أو Unreal. ومع ذلك، هناك بعض المكتبات التي يمكن أن تساعدك في إنشاء VFX في Three.js:

• Quarks VFX هي مكتبة الـ VFX الأكثر تقدمًا لـ Three.js. تستند إلى تنفيذ Unity Shuriken مما يتيح لك استيراد VFXs Unity في Three.js. هي مكتبة مدفوعة ولكن يمكن أن توفر لك الكثير من الوقت بناءً على مشروعك واحتياجاتك.
• VFX Composer Suite من Hendrik Mans هي مكتبة رائعة لإنشاء VFX في Three.js. هي مجانية ومفتوحة المصدر ولكنها أقل صيانة من Quarks VFX.
• Wawa VFX هي المكتبة التي بنيناها معًا في هذه الدورة. هي محرك VFX بسيط يسمح لك بإنشاء تأثيرات معقدة بسهولة. هي مجانية ومفتوحة المصدر. أخطط لتحويلها إلى TSL في المستقبل. لا تتردد في المساهمة فيها.

خاتمة

آمل أن تكونوا متحمسين مثلي لاستكشاف عالم VFX. لا أطيق الانتظار لرؤية ما ستقومون بإنشائه بالمعرفة التي ستكتسبونها في هذا الفصل.