Tugas Besar 1 IF3260 Grafika Komputer - 2D Web-based Primitive Elements Modeler Created using WebGL
Aplikasi yang dibangun berhasil untuk menerapkan WebGL murni dalam pengembangan web yang memungkinkan pengguna untuk menggambar, menyunting, dan memvisualisasikan beragam model geometri pada sebuah kanvas. Hal ini mencakup pembuatan fungsi WebGL non-primitif secara independen. Program yang dibuat mengimplementasikan fungsi untuk memodifikasi model dasar seperti garis, persegi, persegi panjang, dan poligon, termasuk kapasitas untuk mengubah ukuran, menambah, atau menghapus titik pada poligon. Setiap model dapat menjalani minimal dua transformasi geometri, seperti translasi, dilatasi, rotasi, atau shear, serta mampu untuk menggerakkan titik sudut melalui slider atau drag and drop, dan mengubah warna titik-titik sudut. Aplikasi ini juga mampu untuk menyimpan dan memuat ulang model yang telah dibuat, sehingga dapat di-edit kembali. Aplikasi juga berhasil untuk mewujudkan setidaknya satu fitur lanjutan misalnya, algoritma untuk menggambar poligon yang konsisten, integrasi animasi, atau fitur penguncian untuk aspek tertentu dari model.
Interaksi pengguna dengan kanvas dimungkinkan melalui penggunaan berbagai peralatan yang disediakan di sisi kiri kanvas. Pengguna diberikan kebebasan untuk memilih jenis objek yang ingin mereka ciptakan, dengan opsi yang tersedia dalam bentuk tombol-tombol tertentu (misalnya tombol untuk garis, persegi, persegi panjang, dan poligon). Selain itu, fitur tambahan seperti rotasi, translasi, penskalaan, pemilihan, warna, dan penghapusan vertex membantu pengguna mengedit kreasi mereka dengan lebih lanjut. Untuk informasi lebih detil mengenai fitur-fitur ini, pengguna dapat membaca lebih lanjut pada dokumen berikut
Di samping itu, kanvas dilengkapi dengan tombol untuk membersihkan area kerja serta tombol untuk mengekspor dan mengimpor file. Fungsi load model memungkinkan pengguna menyimpan objek-objek dari kanvas ke dalam file berformat .json. Adapun fungsi impor, yang didukung oleh tombol pilihan file, memungkinkan pengguna untuk memilih dan memuat file tertentu ke dalam kanvas. Proses impor dimulai dengan pembersihan kanvas untuk menghilangkan objek-objek sebelumnya, memastikan bahwa hanya model baru yang diimpor yang akan ditampilkan.
Clone repositori ini dari terminal dengan menjalankan command berikut.
$ git clone https://github.com/GAIB20/tugas-besar-grafkom-1-apa-aja.gitKemudian masuk ke direktori src dan double click atau buka index.html pada browser yang mendukung WebGL developer extension.
Berikut adalah beberapa model yang berhasil untuk dibuat.
 |
 |
| Model Line | Model Square |
 |
 |
| Model Rectangle | Model Polygon |
Berikut adalah pembagian tugas yang kami lakukan.
| Task | 13521108 | 13521127 | 13521143 |
|---|---|---|---|
| Model dan Metode Spesialnya | |||
| Model Garis (ubah panjang) | ✅ | ||
| Persegi (ubah panjang sisi) | ✅ | ||
| Persegi panjang (ubah panjang atau ubah lebar) | ✅ | ||
| Polygon (penambahan dan penghapusan titik sudut) | ✅ | ||
| Fitur Utama Model | |||
| Transformasi geometri minimal 2 dari: translasi, dilatasi, rotasi, shear | ✅ | ✅ | ✅ |
| Menggerakkan salah satu titik sudut dengan slider atau drag and drop | ✅ | ||
| Mengubah warna salah satu atau semua titik sudut | ✅ | ||
| Save dan load ulang sebuah model yang telah dibuat | ✅ | ||
| Fitur Lanjutan Model | |||
| Algoritma convex hull pada polygon | ✅ | ||
| Integrasi animasi pada salah satu fitur yang ada | ✅ | ||
| Fitur penguncian pada salah satu aspek | ✅ | ||
| Menghasilkan model baru hasil irisan atau union dari 2 model | |||
| Lain-lain | |||
| Tampilan Aplikasi Web | ✅ | ||
| Setup Lingkungan WebGL | ✅ | ✅ | |
| Laporan Tugas Besar | ✅ | ✅ | ✅ |
| NIM | Nama Lengkap |
|---|---|
| 13521108 | Michael Leon Putra Widhi |
| 13521127 | Marcel Ryan Antony |
| 13521143 | Raynard Tanadi |