Three.js और React Three Fiber में विजुअल इफ़ेक्ट्स (VFX) पर इस अध्याय में आपका स्वागत है। इस अध्याय में, आप आश्चर्यजनक विजुअल इफ़ेक्ट्स बनाना सीखेंगे जो आपके 3D दृश्यों को जीवंत बना देंगे।

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

हम मिलकर बनाने जा रहे हैं TSL GPGPU प्रोजेक्ट का पूर्वावलोकन।

VFX की कला

VFX का मतलब विजुअल इफ़ेक्ट्स है। यह मूवी, वीडियो गेम, या हमारी 3D वेब अनुभवों की दृश्य अनुभव को बढ़ाने के लिए प्रभाव बनाने की कला है।

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

हमारे संदर्भ में, भले ही आप एक गेम न बना रहे हों, VFX का उपयोग आपकी परियोजनाओं में वह अतिरिक्त समृद्धि जोड़ने के लिए किया जा सकता है। इसका उपयोग अधिक पदार्थयुक्त अनुभव बनाने के लिए, आपके दृश्यों को अधिक आकर्षक बनाने के लिए, या अधिक पॉलिश किए गए दिखने के लिए किया जा सकता है। अंततः अधिक पेशेवर और दृश्यात्मक आकर्षक परियोजनाएं बनाना।

मान लीजिए कि आपकी परियोजना में एक खींचें और छोड़ें सुविधा है। जब उपयोगकर्ता कोई वस्तु छोड़ता है, या जब वस्तु को चारों ओर खींचा जाता है, तो आप एक कण इफ़ेक्ट जोड़ सकते हैं। यह अंतरक्रिया को अधिक आकर्षक और मजेदार बना देगा।

VFX की दुनिया में प्रवेश करते समय, वीडियो गेम और मूवी को एक अलग परिप्रेक्ष्य में देखने के लिए तैयार रहें। आप स्क्रीन पर जो कुछ देखते हैं उसे बनाने के लिए उपयोग किए जाने वाले प्रभावों को नोटिस करना शुरू करेंगे।

कई प्रकार के प्रभावों के बीच संयोजन

एक प्रभाव एक या अधिक तत्वों से बना होता है। ये तत्व कण, shaders, बनावट, meshes, trails और अधिक हो सकते हैं। इन तत्वों को मिलाकर आप जटिल और सुंदर प्रभाव बना सकते हैं।

हम Three.js और React Three Fiber के साथ इन तत्वों में से प्रत्येक को बनाने का तरीका आगामी पाठों में सीखेंगे। लेकिन पहले, आइए उनमें से प्रत्येक पर एक नज़र डालें।

कण

कण छोटे तत्व होते हैं जो एक स्रोत से निकलते हैं। इनका उपयोग आग, हवा, बारिश, बर्फ, जादुई मंत्र इत्यादि जैसे प्रभाव बनाने के लिए किया जा सकता है।

कणों की संख्या और उनके गुणों जैसे उनके आकार, texture, रंग, गति और जीवनकाल से खेलकर, आप अनगिनत प्रभाव बना सकते हैं।

वे स्प्राइट्स हो सकते हैं (2D छवियाँ जो हमेशा कैमरे की ओर मुंह करती हैं), या 3D वस्तुएं।

आतिशबाज़ी के पाठ का पूर्वावलोकन।

Meshes/Geometry

जैसा कि हम अक्सर कणों को बिंदुओं या स्प्राइट्स के रूप में सोचते हैं, मुझे लगता है कि meshes का उल्लेख करना महत्वपूर्ण है जो प्रभाव बनाने के लिए भी उपयोग किए जा सकते हैं। उदाहरण के लिए, जमीन से बाहर निकलते हुए पत्थर, या खुलता हुआ portal।

geometry, material, और shaders के साथ खेलकर, आप ऐसे अनोखे प्रभाव बना सकते हैं जो अलग दिखते हैं।

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

Trails

Trails एक प्रकार का प्रभाव है जो किसी वस्तु के पीछे एक रेखा बनाता है। इनका उपयोग धूमकेतु, लेज़र बीम, या हवा जैसे प्रभाव बनाने के लिए किया जा सकता है।

वे गति का प्रभाव देते हैं और गति या दिशा का आभास बनाने के लिए उपयोग किए जा सकते हैं।

इन्हें बनाने के लिए हम कणों या meshes (जैसे रेखाएं या नलिकाएं) का उपयोग कर सकते हैं। हम आगामी पाठों में दोनों तरीकों को सीखेंगे।

हम trails के साथ खेलकर धूमकेतु प्रभाव और अधिक बनाएंगे।

शेडर्स/टेक्सचर

हम शेडर्स के बारे में पहले ही समर्पित अध्याय में सीख चुके हैं। VFX के संदर्भ में, शेडर्स का उपयोग कणों, meshes या पूरे दृश्य पर किया जा सकता है ताकि उन्हें स्थानांतरित किया जा सके, रंग बदला जा सके, विकृत किया जा सके, और भी बहुत कुछ। केवल आपकी कल्पना ही इसकी सीमा है।

शेडर्स को टेक्सचर के साथ मिलाकर, आप और भी जटिल प्रभाव बना सकते हैं। टेक्सचर का उपयोग आपके प्रभावों में विवरण जोड़ने के लिए किया जा सकता है, जैसे कि शोर, पैटर्न, या चित्र।

SFX

SFX का अर्थ है साउंड इफेक्ट्स, और जबकि यह सीधे VFX से संबंधित नहीं है, यह अनुभव का एक महत्वपूर्ण हिस्सा है। अपने VFX में साउंड इफेक्ट्स जोड़कर और उन्हें विज़ुअल इफेक्ट्स के साथ सिंक्रनाइज़ करके, आप एक अधिक इमर्सिव और सामंजस्यपूर्ण अनुभव बना सकते हैं।

हम इस पाठ्यक्रम में साउंड इफेक्ट्स बनाना नहीं सीखेंगे, लेकिन हम 3D स्थान में स्थानिक ध्वनियाँ बजाने की एक दिलचस्प तकनीक सीखेंगे।

CPU बनाम GPU

VFX बनाते समय, खासकर वेब जैसी सीमित पर्यावरण में, अपने प्रभावों के प्रदर्शन के प्रति सावधान रहना महत्वपूर्ण है।

VFX बनाते समय, आप जितना संभव हो सके GPU पर काम को स्थानांतरित करना चाहेंगे। इसका मतलब है कि आप शेडर्स, टेक्सचर, और अन्य GPU-अक्सेलरेटेड तकनीकों का उपयोग करके अपने प्रभावों को बनाना चाहेंगे।

सरल प्रभावों के लिए, जैसे कुछ कण, आप CPU का उपयोग कर सकते हैं। हालांकि, जटिल प्रभावों के लिए, जैसे हजारों कण, आप GPU का उपयोग करना चाहेंगे।

हम इस पाठ्यक्रम में CPU और GPU दोनों तकनीकों को सीखेंगे, लेकिन हम यथासंभव GPU तकनीकों पर ध्यान केंद्रित करेंगे। इससे यह सुनिश्चित होगा कि आपके प्रभाव अधिकांश उपकरणों पर सुचारू रूप से चलें।

हम एक साधारण GPU VFX इंजन बनाएंगे जो हमें आसानी से जटिल प्रभाव बनाने की अनुमति देगा। हम TSL के साथ एक प्यारे GPGPU प्रोजेक्ट के साथ WebGPU की भी खोज करेंगे।

आगे बढ़ना

VFX एक विशाल क्षेत्र है, और ऐसी कई तकनीकें और प्रभाव हैं जिन्हें हम इस पाठ्यक्रम में कवर नहीं करेंगे। हालांकि, बुनियादी बातें सीखकर, आप प्रभावों की एक विस्तृत श्रृंखला बना सकते हैं।

संसाधन

जबकि Three.js पारिस्थितिकी तंत्र VFX पर थोड़ा दुर्लभ है, गेम विकास के लिए कई संसाधन उपलब्ध हैं, जिन्हें Three.js पर लागू किया जा सकता है। Unity, Unreal, और Godot VFX के बारे में अधिक जानने के लिए बेहतरीन इंजन हैं।

जैसा कि हमेशा होता है, विभिन्न संसाधनों का क्रॉस-रेफरेंस करना सीखने का एक बेहतरीन तरीका है। यहां कुछ संसाधन हैं, जो आपको शुरू करने में मदद करेंगे:

• Gabriel Aguiar YouTube चैनल पर Unity और Godot में VFX पर बेहतरीन ट्यूटोरियल्स हैं। मैं उनके Udemy के कोर्स Visual Effects for Games in Unity - Beginner To Intermediate की भी सिफारिश करता हूं।

• Brackeys YouTube चैनल पर Unity (और Godot) में VFX पर बेहतरीन ट्यूटोरियल्स हैं।

• Coreb Games YouTube चैनल पिछले चैनलों की तरह ही है लेकिन Unreal Engine के साथ।

• VFX Apprentice YouTube चैनल या वेबसाइट पर VFX और उसके सिद्धांतों पर कई वीडियो हैं।

इन ट्यूटोरियल्स में देखे गए प्रभावों को Three.js और React Three Fiber में रिप्लिकेट करने की कोशिश करें। ऐसा करने से आप काफी कुछ सीखेंगे।

ArtStation या Pinterest भी प्रेरणा पाने के लिए बेहतरीन स्थान हैं।

लाइब्रेरीज़

दुर्भाग्यवश, Three.js में Unity या Unreal की तरह एक बिल्ट-इन VFX इंजन नहीं है। हालांकि, कुछ लाइब्रेरीज़ हैं जो Three.js में VFX बनाने में मदद कर सकती हैं:

• Quarks VFX Three.js के लिए सबसे उन्नत VFX लाइब्रेरी है। यह Unity Shuriken इंप्लीमेंटेशन पर आधारित है, जिससे आप Unity VFXs को Three.js में इम्पोर्ट कर सकते हैं। यह एक पेड लाइब्रेरी है लेकिन यह आपके प्रोजेक्ट और आवश्यकताओं के आधार पर आपको काफी समय बचा सकती है।
• VFX Composer Suite से Hendrik Mans एक बेहतरीन लाइब्रेरी है Three.js में VFX बनाने के लिए। यह मुफ्त और ओपन-सोर्स है लेकिन Quarks VFX से कम मेंटेन है।
• Wawa VFX लाइब्रेरी जो हमने इस पाठ्यक्रम में साथ में बनाई है। यह एक साधारण VFX इंजन है जो आपको आसानी से जटिल प्रभाव बनाने की अनुमति देता है। यह मुफ्त और ओपन-सोर्स है। भविष्य में इसे TSL में परिवर्तित करने का मेरा इरादा है। इसमें सहयोग करने के लिए स्वतंत्र महसूस करें।

निष्कर्ष

मुझे आशा है कि आप VFX की दुनिया में गोता लगाने के लिए उतने ही उत्साहित हैं जितना मैं हूं। मुझे इस ज्ञान के साथ देखना अच्छा लगेगा कि आप इस अध्याय में क्या बनाएंगे।