Selamat datang di bab ini tentang Efek Visual (VFX) dalam Three.js dan React Three Fiber. Dalam bab ini, Anda akan belajar bagaimana menciptakan efek visual menakjubkan yang akan membuat adegan 3D Anda menjadi lebih hidup.

Tujuan saya adalah membantu Anda memulai dengan VFX dan menginspirasi Anda untuk menciptakan efek Anda sendiri. Saya menghabiskan berjam-jam melakukan cross-referensi berbagai sumber daya, bereksperimen, mencari pendekatan yang tepat agar Anda dapat belajar dalam beberapa jam apa yang mungkin memakan waktu minggu atau bulan.

Praktik proyek TSL GPGPU yang akan kita bangun bersama.

Seni VFX

VFX adalah singkatan dari Visual Effects. Ini adalah seni menciptakan efek untuk meningkatkan pengalaman visual dari sebuah film, video game, atau dalam kasus kita, pengalaman web 3D kita.

VFX dapat digunakan untuk menciptakan efek yang realistis, seperti ledakan, api, air, asap, atau efek fantastis, seperti mantra sihir, teleportasi, dan banyak lagi.

Dalam konteks kita, meskipun Anda tidak membangun game, VFX dapat digunakan untuk menambahkan sentuhan ekstra pada proyek Anda. Dapat digunakan untuk menciptakan pengalaman yang lebih imersif, membuat adegan lebih menarik, atau menciptakan tampilan yang lebih halus. Pada akhirnya membangun proyek yang lebih profesional dan menarik secara visual.

Misalnya, proyek Anda memiliki fitur seret & lepas. Anda dapat menambahkan efek partikel saat pengguna menjatuhkan item, atau saat item diseret. Ini akan membuat interaksi menjadi lebih menarik dan menyenangkan.

Dengan memasuki dunia VFX, bersiaplah untuk melihat video game dan film dari sudut pandang yang berbeda. Anda akan mulai memperhatikan efek yang digunakan untuk menciptakan apa yang Anda lihat di layar.

Komposisi antara berbagai jenis efek

Sebuah efek terdiri dari satu atau lebih elemen. Elemen ini bisa berupa partikel, shader, tekstur, mesh, jejak, dan banyak lagi. Dengan menggabungkan elemen-elemen ini, Anda dapat menciptakan efek yang kompleks dan indah.

Kita akan belajar bagaimana menciptakan masing-masing elemen ini dengan Three.js dan React Three Fiber dalam pelajaran-pelajaran berikutnya. Namun, pertama-tama, mari kita lihat masing-masing elemen tersebut.

Partikel

Partikel adalah elemen kecil yang dipancarkan dari sebuah sumber. Mereka dapat digunakan untuk menciptakan efek seperti api, angin, hujan, salju, mantra sihir, dan lainnya.

Dengan bermain-main dengan jumlah partikel dan properti mereka, seperti ukuran, tekstur, warna, kecepatan, dan masa hidup, Anda dapat menciptakan jumlah efek yang tak terbatas.

Mereka bisa berupa sprite (gambar 2D yang selalu menghadap kamera) atau objek 3D.

Praktik pratinjau dari pelajaran kembang api.

Mesh/Geometri

Karena kita sering berpikir tentang partikel sebagai titik atau sprite, saya rasa penting untuk menyebutkan bahwa mesh juga dapat digunakan untuk menciptakan efek. Misalnya batu yang muncul dari tanah, atau portal yang terbuka.

Dengan bermain-main dengan geometri, material, dan shader, Anda dapat menciptakan efek unik yang menonjol.

Dalam permainan penyihir yang akan kita bangun bersama, lihat bagaimana pecahan es dari tanah menambah keseluruhan efek.

Jejak

Jejak adalah jenis efek yang menciptakan garis di belakang suatu objek. Mereka dapat digunakan untuk menciptakan efek seperti komet, sinar laser, atau angin.

Mereka memberikan kesan gerakan dan dapat digunakan untuk menciptakan perasaan kecepatan atau arah.

Untuk membuatnya, kita dapat menggunakan partikel atau mesh (seperti garis atau tabung). Kita akan mempelajari kedua metode tersebut dalam pelajaran berikut.

Kita akan bermain dengan jejak untuk menciptakan efek komet dan lebih banyak lagi.

Shaders/Tekstur

Kita sudah mempelajari tentang shaders di bab khusus. Dalam konteks VFX, shaders dapat diterapkan pada partikel, mesh, atau keseluruhan scene untuk membuatnya bergerak, mengubah warna, mendistorsi, dan lain-lain. Satu-satunya batasan adalah imajinasi Anda.

Dengan menggabungkan shaders dengan tekstur, Anda dapat menciptakan efek yang lebih kompleks. Tekstur dapat digunakan untuk menambahkan detail pada efek Anda, seperti noise, pola, atau gambar.

SFX

SFX adalah singkatan dari Sound Effects, dan meskipun tidak langsung terkait dengan VFX, ini merupakan bagian penting dari pengalaman. Dengan menambahkan efek suara ke VFX Anda dan mensinkronkannya dengan efek visual, Anda dapat menciptakan pengalaman yang lebih imersif dan kohesif.

Kami tidak akan mempelajari cara membuat efek suara dalam kursus ini, tetapi kami akan mempelajari teknik menarik untuk memutar suara yang terpusat pada ruang dalam ruang 3D.

CPU vs GPU

Saat membuat VFX, terutama di lingkungan terbatas seperti web, penting untuk memperhatikan kinerja efek Anda.

Ketika membuat VFX, Anda ingin memindahkan sebanyak mungkin pekerjaan ke GPU. Ini berarti Anda ingin menggunakan shaders, tekstur, dan teknik yang dipercepat oleh GPU lainnya untuk menciptakan efek Anda.

Untuk efek sederhana, seperti beberapa partikel, Anda bisa menggunakan CPU. Namun, untuk efek yang kompleks, seperti ribuan partikel, Anda akan ingin menggunakan GPU.

Kami akan mempelajari teknik-teknik CPU dan GPU dalam kursus ini, tetapi kami akan fokus pada teknik-teknik GPU sebanyak mungkin. Ini akan memastikan bahwa efek Anda berjalan lancar di sebagian besar perangkat.

Kami akan membuat mesin VFX GPU sederhana yang memungkinkan kita untuk membuat efek kompleks dengan mudah. Kami juga akan mengenal WebGPU dengan TSL dengan proyek GPGPU yang menyenangkan.

Melangkah lebih jauh

VFX adalah bidang yang luas, dan ada banyak teknik serta efek yang tidak akan kita bahas dalam kursus ini. Namun, dengan mempelajari dasar-dasarnya, Anda akan dapat menciptakan berbagai macam efek.

Sumber Daya

Meskipun ekosistem Three.js jarang pada VFX, ada banyak sumber daya tersedia untuk pengembangan game, yang dapat diterapkan pada Three.js. Unity, Unreal, dan Godot adalah mesin yang hebat untuk belajar lebih lanjut tentang VFX.

Seperti biasa, merujuk silang berbagai sumber adalah cara yang bagus untuk belajar. Berikut beberapa sumber daya untuk memulai:

• Gabriel Aguiar Saluran YouTube memiliki tutorial hebat tentang VFX di Unity dan sekarang Godot. Saya juga merekomendasikan kursusnya di Udemy yang bernama Visual Effects for Games in Unity - Beginner To Intermediate.

• Brackeys Saluran YouTube memiliki tutorial hebat tentang VFX di Unity (dan sekarang Godot setelah istirahat panjang).

• Coreb Games Saluran YouTube seperti yang sebelumnya tetapi dengan Unreal Engine.

• VFX Apprentice Saluran YouTube atau website mengandung banyak video tentang VFX dan prinsip-prinsipnya.

Cobalah untuk mereplika efek yang Anda lihat dalam tutorial ini di Three.js dan React Three Fiber. Anda akan banyak belajar dengan melakukannya.

ArtStation atau Pinterest juga tempat yang bagus untuk menemukan inspirasi.

Perpustakaan

Sayangnya, Three.js tidak memiliki mesin VFX bawaan seperti Unity atau Unreal. Namun, ada beberapa perpustakaan yang dapat membantu Anda membuat VFX di Three.js:

• Quarks VFX adalah perpustakaan VFX paling canggih untuk Three.js. Ini didasarkan pada implementasi Unity Shuriken yang memungkinkan Anda mengimpor VFX Unity di Three.js. Ini adalah perpustakaan berbayar tetapi dapat menghemat banyak waktu tergantung pada proyek dan kebutuhan Anda.
• VFX Composer Suite dari Hendrik Mans adalah perpustakaan hebat untuk membuat VFX di Three.js. Ini gratis dan open-source tetapi kurang terpelihara dibandingkan Quarks VFX.
• Wawa VFX perpustakaan yang kita bangun bersama dalam kursus ini. Ini adalah mesin VFX sederhana yang memungkinkan Anda membuat efek kompleks dengan mudah. Ini gratis dan open-source. Saya berencana untuk mengonversi ke TSL di masa mendatang. Jangan ragu untuk berkontribusi padanya.

Kesimpulan

Saya berharap Anda sama bersemangatnya dengan saya untuk menyelami dunia VFX. Saya tidak sabar untuk melihat apa yang akan Anda ciptakan dengan pengetahuan yang akan Anda dapatkan di bab ini.