WebGL

Pada modul ini kita akan bereksperimen membuat animasi yang keren. Contoh script di ambil dari github https://github.com/akella/webGLImageTransitions/blob/master/js/demo2.js Untuk menggunakan animasi ini, kita cukup buka file js/shaders/fragment.glsl, lalu ubah menjadi code seperti berikut. Jika Anda jalankan, efeknya cukup keren. Kesimpulan Untuk menggabungkan WebGL dengan HTML, hal yang perlu diperhatikan adalah Menyamakan dimensi WebGL dengan HTML. Membuat … Read more

Sebelum memulai tutorial ini, kita akan install library gsap untuk mempermudah coding. Efek animasi ripple akan dipicu saat mouse hover diatas image. Agar event mouse hover dapat dihubungkan dengan WebGL, diperlukan object Raycaster. Buka file js/app.js, lalu tambahkan code import gsap. Pada method constructor tambahkan inisialisasi object Raycaster dan variable untuk menyimpan data mouse. Pada … Read more

Pada modul ini kita akan menggabungkan event mouse scroll antara HTML dan WebGL. Kita tidak bisa menggunakan standard event listener dari browser karena akan terjadi lagging. (Browser listener akan ditrigger lebih cepat dibandingkan proses perhitungan posisi pada WebGL). Untuk itu kita gunakan custom event listener untuk event mouse scroll. Anda bisa menggunakan custom scroll library … Read more

Karena kita akan membuat efek animasi ripple pada masing-masing image, kita perlu merender object three.js tepat disetiap image. Buka file js/app.js, pada fungsi constructor tambahkan perintah untuk mengambil data gambar dari web. kemudian tambahkan fungsi addImages() untuk mengumpulkan informasi dari image dan membuat object Plane yang disesuaikan dengan ukuran tiap image. Kemudian fungsi setPosition(). Fungsi … Read more