WebGL

Untuk menambahkan animasi, kita perlu menambahkan informasi time. Buka file app.js, lalu tambahkan property time pada deklarasi shader. Lalu untuk update value dari time, kita lakukan pada pada fungsi render() (masih pada file app.js). Tambahkan variable time pada file js/shaders/vertex.glsl, seperti berikut Lalu gunakan variable time pada pengaturan newPos.z Jika Anda buka web browser, maka … Read more

Pada modul ini kita akan menggunakan Perlin 3D Noise untuk memanipulasi vertex. Buka file js/shaders/vertex.glsl, lalu tambahkan fungsi Perlin 3D noise. Fungsi dibuat oleh Stefan Gustavson, source: https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83 Kemudian pada fungsi main, ubah pengaturan posisi dengan menggunakan fungsi cnoise. Berikut isi lengkap file js/shaders/vertex.glsl Buka terminal lalu, jalankan parcel index.html, sesuai ekspektasi, maka object plane … Read more

Sangat disarankan untuk membuat aplikasi WebGL dengan menggunakan web server. Anda dapat menggunakan web server favorit Anda. Pada tutorial ini digunakan node.js dengan Parcel karena parcel berfungsi sebagai bundler dan web server. Pada direktori project, install three.js dengan menggunakan npm install. Lalu pada root direktori, buat file index.html, tambahkan code berikut sebagai template awal. Kemudian … Read more