WebGL

Pada bagian kedua, kita akan menyamakan dimensi dari objek HTML dengan object three.js. Jadi bila kita create plane dengan perintah seperti berikut Maka pada web browser pun akan ditampilkan kurang lebih 100 x 100 pixel. Untuk menyamakan dimensi, kita akan mengatur fov, near dan far serta position kamera. Untuk dokumentasi detail di https://threejs.org/docs/#api/en/cameras/PerspectiveCamera Buka file … Read more

Akhirnya kita sampai dari tujuan tutorial ini, yaitu membuat halaman HTML lebih menarik dengan menggunakan animasi dari WebGL menggunakan three.js. Hasil akhir dari project ini adalah image akan memiliki efek ripple seperti gelombang air. Pertama buka file index.html, lalu ganti dengan code dibawah Tambahkan direktori css, lalu tambahkan css rule berikut: Download image di https://drive.google.com/file/d/17iDx1Cnyh7_iEe5q4em25rIVXEG-qrNR/view?usp=sharing … Read more

Pada tutorial ini akan dibahas penggunaan image texture pada three.js. Buat direktori img pada root project, kemudian simpan file image yang Anda inginkan. Untuk menggunakan image pertama harus kita import dahulu. Buka file js/app.js, lalu tambahkan perintah import. Image dapat digunakan pada saat ShaderMaterial dibuat. Berikut isi lengkap file js/app.js Untuk menggunakan image texture, diperlukan … Read more

Kita dapat menghubungkan vertex shader dengan fragment shader melalui tipe variable khusus, yaitu varying. Misalnya, hasil perhitungan noise akan kita share antara vertex shader dan fragment shader. Pertama kita buka file js/shaders/vertex.glsl, lalu tambahkan variable vNoise sebagai varying float. kemudian buat variable float noise yang akan berisi perhitungan dari fungsi cnoise(). Kemudian assign value vNoise … Read more