Three.js r183: PostProcessing menjadi RenderPipeline
Three.js r183 dirilis pada 18 Februari, dan perubahan arsitekturnya lebih besar daripada kebanyakan rilis minor. Perubahan utamanya: PostProcessing telah berganti nama menjadi RenderPipeline. Ini bukan sekadar perubahan nama. Nama tersebut mencerminkan evolusi kelas ini dari pengelolaan pascapemrosesan sederhana menjadi sistem pipeline lengkap yang menangani beberapa tahap rendering dan buffer riwayat.
Pengantar Three.js WebGPU dan sistem node shader TSL
RenderPipeline menggantikan PostProcessing
Kelas RenderPipeline yang baru dirancang khusus untuk WebGPURenderer. Kelas ini mengelola seluruh konfigurasi pipeline rendering dan rangkaian efek pascapemrosesan, serta menentukan keluaran akhir melalui outputNode. Properti outputColorTransform mengontrol pemetaan rona dan transformasi ruang warna bawaan.
Hal ini penting karena nama lama PostProcessing menyesatkan. Dengan integrasi anti-aliasing temporal (TRAA) untuk pencahayaan volumetrik, refleksi ruang layar dengan stabilitas temporal, dan dukungan pipeline HDR yang menggunakan buffer keluaran HalfFloatType, kelas tersebut sudah melakukan jauh lebih banyak daripada sekadar pascapemrosesan. Nama barunya mencerminkan fungsi sebenarnya.
Clock ditandai usang, Timer hadir
Kelas Clock kini ditandai usang dan digantikan oleh kelas baru bernama Timer. Jika Anda menggunakan Clock dalam loop animasi, mulailah bermigrasi. Timer baru menyediakan API yang lebih rapi untuk fungsi pelacakan waktu yang sama.
BatchedMesh memperoleh kontrol per instans
BatchedMesh kini mendukung opasitas per instans dan material wireframe. Ini merupakan tambahan penting untuk adegan dunia terbuka dan gim pembangunan kota, saat Anda perlu memudarkan masing-masing instans masuk dan keluar tanpa membuat material terpisah. Artinya, Anda juga dapat menerapkan rendering wireframe secara selektif pada instans tertentu untuk keperluan debugging atau efek visual bergaya.
Pascapemrosesan WebGPU di Three.js dengan React Three Fiber
Peningkatan material
MeshLambertMaterial dan MeshPhongMaterial kini mendukung pencahayaan berbasis gambar (IBL) dari scene.environment. Sebelumnya, material yang lebih ringan ini tidak dapat menggunakan peta lingkungan untuk pencahayaan ambien, sehingga developer harus beralih ke MeshStandardMaterial yang lebih berat. Kini Anda dapat menggunakan IBL dengan material lama saat akurasi PBR tidak diperlukan.
MeshPhysicalMaterial menambahkan dukungan clearcoat untuk lampu area persegi panjang. Jika Anda merender cat mobil atau permukaan mengilap yang diterangi lampu area, lapisan clearcoat kini merespons dengan benar.
Optimalisasi performa
Matrix4.decompose() kini menyimpan hasil perhitungan determinan dalam cache, sedangkan invert() telah dioptimalkan. Keduanya dipanggil ribuan kali per frame dalam adegan dengan banyak objek, sehingga akumulasi penghematannya menjadi signifikan.
Spesifikasi TSL dan node clipSpace
Three.js r183 memperkenalkan dokumen spesifikasi TSL formal (TSL.md) dan node clipSpace baru. TSL (Three.js Shading Language) memungkinkan Anda menulis kode shader dalam JavaScript yang dikompilasi menjadi WGSL untuk WebGPU atau GLSL untuk WebGL. Spesifikasi baru ini memformalkan API sistem node, sehingga pustaka pihak ketiga lebih mudah dikembangkan di atasnya.
Node clipSpace memberikan akses langsung ke koordinat ruang klip dalam TSL, yang berguna untuk efek ruang layar dan teknik proyeksi khusus.