7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

WebGL Dengan Three.js: Textures & Particles

Scroll to top
Read Time: 6 mins

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Sejak diperkenalkan, grafik 3D di browser telah menjadi topik yang populer. Tetapi jika Anda membuat aplikasi menggunakan WebGL lama yang polos, itu akan membutuhkan waktu yang sangat lama. Tetapi sekarang kita memiliki beberapa library yang sangat bermanfaat yang dapat kita manfaatkan, seperti Three.js. Jadi dalam seri ini saya akan menunjukkan kepada Anda cara membuat pengalaman 3D yang menakjubkan untuk browser.

Saya berharap Anda memiliki pemahaman dasar tentang ruang 3D sebelum Anda mulai membaca tutorial ini, karena saya tidak akan menjelaskan hal-hal seperti koordinat, vektor, dll.


Persiapan

Kami akan mulai dengan kode dari bagian sebelumnya dari seri ini. Juga, ambil aset yang saya berikan dan letakkan di folder yang sama dengan aplikasi Anda. Sekarang, karena kita akan menggunakan gambar di sini Anda harus meletakkan aplikasi Anda di beberapa server statis (mungkin lokal), karena kecuali memulai browser dengan akses file yang diaktifkan dari file (misalnya menggunakan --allow-file-access- from-file flag di Chrome) CORS tidak akan membiarkan anda memuatnya dari file. Itu saja yang perlu anda lakukan sebelum melanjutkan.


Langkah 1: Memuat Tekstur

Jika anda pernah merasa bosan yang akan anda lakukan dengan membuat sesuatu menggunakan OpenGL murni, anda mungkin ingat betapa sakitnya untuk memuat tekstur. Untungnya, Three.js hadir dengan fungsi yang bagus yang akan memuat dan mengatur tekstur untuk kita. Tambahkan baris ini sebelum definisi materi kubus kita:

Ini benar-benar semua yang harus anda lakukan agar tekstur anda dimuat.

Dalam aplikasi dunia nyata, Anda harus melakukan pramuat tekstur seperti gambar biasa dan menunjukkan kepada pengguna beberapa bilah pemuatan mewah untuk memberi tahu mereka bahwa anda sedang memuat (Three.js akan menggunakan gambar cache kemudian).


Langkah 2: Painting Cube

Sekarang kita akan menerapkan tekstur ke kubus kita. Ini juga mudah, Anda hanya perlu mengganti definisi warna dalam materi kubus agar terlihat seperti ini:

Atribut map mengatur tekstur. Sekarang Anda dapat membuka browser dan Anda akan melihat sebuah kubus yang berputar dan bertekstur:

textured_cubetextured_cubetextured_cube

Anda juga dapat mewarnai tekstur, cukup tambahkan definisi warna dalam opsi material, seperti itu:

Dan sekarang kubus menyala biru:

textured_colorized_cubetextured_colorized_cubetextured_colorized_cube

Dengan cara ini Anda dapat memiliki beberapa objek berbeda dengan tekstur yang sama jika hanya warna yang berubah.


Langkah 3: Banyak Bahan

Anda dapat mengatur bahan yang berbeda untuk setiap wajah kubus. Untuk mencapai itu, Anda harus mengubah definisi seluruh material. Pertama, tentukan susunan material. Setiap elemen dalam array akan sesuai dengan material dari satu wajah. Mereka masuk dalam urutan ini: kanan, kiri, atas, bawah, depan dan belakang:

Seperti yang Anda lihat setiap wajah memiliki materi itu sendiri, sehingga Anda dapat mengatur berbagai tekstur, warna, dan atribut lainnya untuk masing-masing. Selanjutnya, ubah jenis bahan kubus ke THREE. MeshFaceMaterial:

Anda hanya perlu meneruskan array material sebagai parameter. Di browser Anda akan melihat bahwa setiap sisi kubus memiliki warna yang berbeda:

each_side_differenteach_side_differenteach_side_different

Langkah 4: partikel!

Katakanlah Anda ingin membuat efek kepingan salju yang berputar di aplikasi Anda. Jika Anda membuat setiap keping salju sebagai jaring, Anda akan mendapatkan fps yang sangat rendah. Di situlah partikel ikut bermain. Mereka jauh lebih rumit, dan menggambar mereka sebagai keseluruhan sistem partikel membuat mereka sangat efisien.

Mulailah dengan membuat geometri untuk partikel kami:

THREE.Geometry adalah objek geometri dasar, tanpa bentuk apa pun. Sekarang kita harus menentukan posisi setiap partikel dalam sistem. Biarkan sepenuhnya acak:

Lingkaran ini akan membuat 2000 partikel yang ditempatkan secara acak dan menempatkan semuanya dalam geometri. Selanjutnya, Anda harus mendefinisikan materi partikel:

Perhatikan bahwa kami menggunakan THREE.ParticleBasicMaterial, yang hanya untuk partikel. Dalam opsi kami hanya menentukan warna dan ukuran setiap partikel. Akhirnya, Anda dapat membuat sistem partikel dan menambahkannya ke TKP:

Sekarang, untuk membuat adegan terlihat lebih baik, mari kita putar partikel ke arah berlawanan dengan yang kubus berputar (ubah fungsi render agar terlihat seperti ini):

Kami memindahkan clock.getDelta ke variabel, karena jika Anda menggunakannya seperti itu:

Sistem partikel tidak akan berputar, karena panggilan kedua akan mengembalikan angka mendekati nol (ingat bahwa itu mendapatkan waktu dari panggilan terakhir).

Sekarang buka peramban dan Anda akan melihat sebuah kubus dan partikel berputar:

cube_with_particlescube_with_particlescube_with_particles

Mari gabungkan kedua hal yang telah Anda pelajari dalam tutorial ini dan mengubah kotak putih yang jelek menjadi kepingan salju yang nyata. Pertama, muat tekstur snowflake:

Sekarang, ubah material partikel untuk menggunakan tekstur. Juga, aktifkan transparansi dan buat partikel lebih besar sehingga kita bisa melihat bentuknya:

Jika Anda membuka peramban, Anda akan melihat beberapa kepingan salju bagus mengalir di sekitar kubus:

particles_snowflakesparticles_snowflakesparticles_snowflakes

Langkah 5: asap

Efek asap sangat mudah dicapai dan terlihat bagus. Mulai dengan membuat geometri, seperti halnya kepingan salju:

Satu-satunya perbedaan di sini adalah bahwa kita memilih posisi dari prisma segi empat dengan dimensi 32x32x230. Sekarang, mari kita memuat tekstur dan menentukan materinya:

Dalam definisi material, ada opsi blending. Ini memberitahu penyaji bagaimana seharusnya membuat satu objek pada yang lain. Dengan THREE.AdditiveBlending nilai warna tumpang tindih yang saling tumpang tindih akan ditambahkan satu sama lain yang akan menghasilkan asap yang lebih terang di area dengan kepadatan partikel yang lebih tinggi. Kami juga mengatur warnanya menjadi hampir hitam, sehingga asap terlihat lebih alami.

Akhirnya, buat sistem partikel, pindahkan sedikit ke kiri dan tambahkan ke adegan:

Anda juga harus mengatur smoke.sortParticles menjadi true. Ketika salah, latar belakang sprite dapat digambar sebagai hitam. Jika Anda membuka peramban, Anda akan melihat pilar asap masih ada di sebelah kubus:

smoke_stillsmoke_stillsmoke_still

Untuk menganimasikan asap kita harus melingkupi semua partikel dan memindahkannya sedikit. Tambahkan kode ini ke fungsi render:

Dalam loop, kita menambahkan delta * 50 ke posisi y dari partikel. Selanjutnya kita periksa apakah partikel lebih tinggi dari 230, jika demikian kita secara acak memilih posisi barunya di suatu tempat di bagian bawah tiang asap. Akhirnya, hal yang paling penting: pengaturan bendera __dirtyVertices geometri ke true.

Untuk meningkatkan kinerja, Three.js adalah cache objek untuk menghindari membangun semua panggilan WebGL lagi setiap frame, jadi jika kita mengubah sesuatu dalam geometri objek kita harus membiarkan penyaji tahu bahwa itu telah berubah. Pada dasarnya, bendera __dirtyVertices hanya akan mencapai elemen.

Jika Anda membuka browser sekarang, Anda akan melihat asap animasi yang mulus di sebelah kubus.


Kesimpulan

Dalam tutorial ini Anda telah belajar bagaimana menggunakan tekstur dan partikel. Seperti sebelumnya, jangan takut untuk sedikit bereksperimen dengan aplikasi Anda. Jika Anda memiliki masalah lihatlah dokumentasi. Di artikel berikutnya saya akan mengajari Anda cara memuat model dan menganimasikannya.

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 Code 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.