/3D-Hollow-Object

Primary LanguageJavaScript

IF3260_Tugas2_K01_G08

Link Laporan : https://docs.google.com/document/d/1NQ_qKItZkTnZ2BSv-eVpohRgoLaGFqDER0cgsk9pvxQ/edit?usp=sharing

Deskripsi Singkat

Dalam tugas ini, dibuat sebuah aplikasi berbasis web untuk melakukan manipulasi pada hollow object yang juga dibuat. Kode dibuat dalam bahasa Javascript dan menggunakan API WebGL. WebGL merupakan API Javascript untuk me-render grafika 2 dan 3 dimensi menggunakan browser. Kami menggunakan browser Google Chrome dengan mengaktifkan WebGL developer extension yang telah tersedia.

Cara Menjalankan

Berikut merupakan langkah-langkah untuk menjalankan proyek ini:

  1. Clone atau download as zip repository ini.
  2. Buka folder pada VS Code.
  3. Jika belum menginstal ekstensi Live Server, install extension Live Server melalui Ctrl+Shift+X lalu cari Live Server.
  4. Buka file index.html, lalu klik F1.
  5. Web akan terbuka pada browser default (kami menggunakan Chrome).

Hollow Objects

  1. Hollow Cube (Ilham Prasetyo Wibowo / 13520013)
  2. Hollow Triangular Prism (Maharani Ayu Putri Irawan / 13520019)
  3. Hollow Cuboid (Yohana Golkaria Nainggolan / 13520053)

Transformasi

Ada 3 transformasi yang bisa dilakukan pada 3D Hollow Object yang dibuat, yakni:

  1. Translasi
  2. Rotasi
  3. Scaling

Untuk melakukan transformasi ini, ketika sebuah bangun sudah di-load, geser slider, baik pada arah x, y, maupun z untuk setiap jenis transformasi. Efek akan langsung terlihat pada canvas.

Input & Output

Untuk melakukan load hollow object pada canvas, gunakan input file yang tersedia di panel kanan.

  1. Klik Choose file
  2. Pilih file berekstensi .json yang telah disediakan pada /model
  3. Klik Load
  4. Model sudah ter-load pada canvas

Untuk menyimpan 3D hollow object, gunakan button yang tersedia di panel kanan

  1. Jika ingin menyimpan dengan nama file tertentu, masukkan nama file pada input teks yang tersedia (tanpa ekstensi).
  2. Klik save.
  3. Model tersimpan pada Downloads dengan nama default hollowobject.json atau dengan nama file custom yang telah dimasukkan pada input teks dengan ekstensi JSON.

Spesifikasi Lanjutan

Kami mengimplementasikan spek lanjutan berikut:

  1. Manual Shading
    Fitur manual shading diimplementasikan menggunakan modified model Phong dengan memperhitungkan ambient, diffuse, dan specular reflection pada fragment shader dengan dipengaruhi oleh normal bidang.
  2. Save
    Fitur save diimplementasikan dengan mengaplikasikan matriks transformasi pada titik-titik objek 3D dan normals-nya. Lalu, dibuat file JSON dan disimpan dengan Blob.

Dibuat Oleh

@ilhamwibowo @rannnayy @Yohanagn