WEB APLIKASI PROFIL PROPERTY BERBASIS 3D DENGAN MENGGUNAKAN FRAMEWORK WEBGL DAN LIBRARY THREE.JS
TUGAS AKHIR
Diajukan Guna Memenuhi Sebagian Persyaratan Dalam Rangka Menyelesaikan Pendidikan Sarjana Strata Satu (S1) Program Studi Teknologi Informasi
GEDE RISKA WIRADARMA NIM: 1204505080
JURUSAN TEKNOLOGI INFORMASI FAKULTAS TEKNIK UNIVERSITAS UDAYANA 2016 ii
LEMBAR PERNYATAAN
Dengan ini saya menyatakan bahwa dalam Tugas Akhir ini tidak terdapat karya yang pernah diajukan untuk memperoleh gelar kesarjanaan di suatu perguruan tinggi dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu dalam naskah ini dan disebutkan dalam daftar pustaka.
26 Pebruari 2016 Jimbaran, 28 Juni 2016
Gede Riska Wiradarma
iii
KATA PENGANTAR
Puji dan syukur penulis panjatkan kehadapan Tuhan Yang Maha Esa, karena atas Berkat RahmatNya, akhirnya penulis dapat menyelesaikan Tugas Akhir ini. Tugas Akhir yang berjudul “Web Aplikasi Profil Property Berbasis 3D dengan menggunakan Framework WebgGL dan Library Three.js” ini disusun sebagai syarat untuk memenuhi sebagian persyaratan menyelesaikan Program Sarjana S-1 pada Program Studi Teknologi Informasi Universitas Udayana. Dalam penyusunan Tugas Akhir ini, penulis mendapatkan petunjuk dan bimbingan dari berbagai pihak. Sehubungan dengan hal tersebut pada kesempatan ini penulis menyampaikan ucapan terima kasih kepada : 1.
Bapak Prof. Ir. Ngakan Putu Gede Suardana, MT.,Ph.D. selaku Dekan Fakultas Teknik Universitas Udayana.
2.
Bapak Dr. Eng. I Putu Agung Bayupati, ST., MT. selaku Ketua Jurusan Teknologi Informasi Universitas Udayana.
3.
Bapak I Nyoman Piarsa, S.T., M.T. selaku dosen pembimbing I dan Bapak Prof. Dr. I Kt. Gd. Darma Putra, S.Kom.,M.T. selaku dosen pembimbing II yang telah banyak memberikan bimbingan dan masukan dalam penyusunan tugas akhir ini.
4.
Bapak Putu Wira Buana, S.Kom.,M.T. selaku dosen pembimbing akademik, yang telah memberikan bimbingan selama menempuh pendidikan di Jurusan Teknologi Informasi Universitas Udayana.
5.
Kedua orang tua dan keluarga yang telah memberikan dukungan dan motivasi dalam pembuatan tugas akhir ini.
6.
Teman seperjuangan dan segenap civitas di Jurusan Teknologi Informasi Universitas Udayana yang telah memberikan sumbangan ide, pemikiran, dan dukungan dalam penyusunan tugas akhir ini.
vi
Penulis menyadari tugas akhir ini masih jauh dari sempurna. Akhir kata penulis memohon maaf jika ada kesalahan dalam penulisan tugas akhir ini.
Denpasar, 28 Juni 2016 Penulis
Gede Riska Wiradarma
vii
ABSTRAK
Arsitek merupakan salah satu bisnis jasa dalam membangun desain property untuk menampilkan menjadi nyata. Kemampuan seorang arsitek untuk merancang pembangunan suatu property menuntut adanya sebuah visualisasi objek sebagai pratinjau rancangan kepada klien. Maket difungsikan sebagai cara untuk mempromosikan rancang property, namun pada perkembangannya biaya pembuatan maket masih dianggap terlalu besar dan kerap membebani pengembang ditambah waktu penyelesaian yang lama. Pemanfaatan media digital pada era pembangunan saat ini masih kurang dalam hal mempromosikan karya arsitektur secara akurat dan mendetail, membuat informasi yang diterima konsumen kurang maksimal, oleh karena itu diperlukan teknologi yang tepat guna. Teknologi komputerisasi memungkinkan membangun teknologi 3D diatas browser sebagai sarana promosi karya seni arsitektur berbasiskan 3D. Teknologi WebGL memberikan banyak manfaat kepada pihak arsitek, perusahaan konstruksi maupun pengembang property. Teknologi WebGL juga membuat hasil karya terlihat lebih nyata, seperti program 3D yang banyak terdapat dipasaran. Teknologi berbasis cloud dapat diterapkan pada banyak kasus, salah satunya bisnis property. Kata Kunci : WebGL, 3D, Arsitek, Property, Desain
viii
ABSTRACT
Architect is one of business services in creating property design to make it become a reality. To design a property development, an architect requires the ability to visualize the object as a preview design to clients. A mock-up is a way to promote a design property, but as time goes on, the cost in making mock-up is too big and it is usually takes a long time to finish a mock-up, sometimes it burdens the developer. The utilizations of digital medias in this century, are still not enough in promoting an accurately and detailed architectural work, make the information that received by the consumers not optimal, because of it, it is needed appropriate technologies. Computerized technology enables to build the 3D technology on the browser as a promotional tool-based architecture 3D artwork. The WebGL technology gives a lot of advantages to the architect’s side, the construction company’s side and also the property developer’s side. The WebGL technology also makes the architectural work looks real, like 3D programs that are in market. The cloud-based technology can be used in many cases, such as property business. Keywords : WebGL, 3D, Architect, Property, Design
ix
DAFTAR ISI
LEMBAR PERNYATAAN ................................................................................. iii LEMBAR PENGESAHAN TUGAS AKHIR .................................................... iv BERITA ACARA TUGAS AKHIR..................................................................... v KATA PENGANTAR.......................................................................................... vi ABSTRAK .......................................................................................................... viii ABSTRACT ........................................................................................................... ix DAFTAR ISI.......................................................................................................... x DAFTAR GAMBAR........................................................................................... xii DAFTAR TABEL .............................................................................................. xiv DAFTAR KODE PROGRAM ........................................................................... xv BAB I PENDAHULUAN...................................................................................... 1 1.1 Latar Belakang ................................................................................................. 1 1.2 Rumusan Masalah ............................................................................................ 3 1.3 Tujuan .............................................................................................................. 3 1.4 Manfaat ............................................................................................................ 3 1.5 Batasan Masalah .............................................................................................. 4 1.6 Sistematika Penulisan ...................................................................................... 4 BAB II TINJAUAN PUSTAKA........................................................................... 6 2.1 State of the Art ................................................................................................. 6 2.1.1 Perancangan Web aplikasi profil property berbasis 3D.......................... 6 2.1.2 Diagram Ishikawa (Fishbone) ................................................................ 7 2.2 WebGL............................................................................................................. 8 2.2.1 Rancangan dan Sejarah........................................................................... 9 2.2.2 Definisi Teknis WebGL .......................................................................... 9 2.3 Three.js Javascript 3D Engine....................................................................... 11 2.3.1 Fitur There.js ........................................................................................ 11 2.3.2 Simple Page .......................................................................................... 13 2.4 Interaksi.......................................................................................................... 16 2.4.1 Dekteksi Hit, Picking, dan Proyeksi..................................................... 16 2.5 Integrasi.......................................................................................................... 18 2.5.1 Kombinasi Dinamis HTML dan WebGL .............................................. 18 2.5.2 Anotasi Layar 3D Menggunakan Posisi Layar 2D ............................... 18 2.6 Perangkat Lunak yang Digunakan ................................................................. 19 2.6.1 Autodesk Maya 2016 Student Version................................................. 19 BAB III METODOLOGI DAN PERANCANGAN SISTEM ......................... 21 3.1 Tempat dan Waktu Penelitian ........................................................................ 21 3.2 Alur Penelitian ............................................................................................... 21 3.3 Sumber data ................................................................................................... 23 3.4 Gambaran Umum........................................................................................... 23 3.5 User Interface ................................................................................................ 26 3.6 User Experience............................................................................................. 34 BAB IV PEMBAHASAN DAN ANALISIS SISTEM ...................................... 36 x
4.1 4.2 4.3 4.4
Konfigurasi Hardware dan Software............................................................. 36 Pengujian Antarmuka Aplikasi ...................................................................... 36 Analisis Frame rate Per Second ..................................................................... 50 Uji Coba pada Device .................................................................................... 51 4.4.1 Perangkat Laptop/PC............................................................................ 52 4.4.2 Perangkat Smartphone.......................................................................... 53 4.4.3 Perangkat Smart TV ............................................................................. 55 4.5 Analisa Kecepatan.......................................................................................... 56 BAB V PENUTUP............................................................................................... 59 5.1 Simpulan ........................................................................................................ 59 5.2 Saran .............................................................................................................. 60 DAFTAR PUSTAKA .......................................................................................... 61
xi
DAFTAR GAMBAR
Gambar 2. 1 Diagram Ishikawa (fishbone) ............................................................. 8 Gambar 2. 2 Hasil Render Penerepan Sederhana There.js.................................... 14 Gambar 2. 3 Objek 3D Sederhana......................................................................... 14 Gambar 2. 4 Kamera, Viewport dan Proyeksi ...................................................... 17 Gambar 2. 5 Autodesk Maya 2016 Student Version............................................. 19 Gambar 3. 1 Flowchart Alur Penelitian................................................................ 22 Gambar 3. 2 Gambaran Umum Sistem Web Aplikasi. ......................................... 23 Gambar 3. 3 Fishbone ........................................................................................... 24 Gambar 3. 4 Exterior Property 3D ....................................................................... 26 Gambar 3. 5 Interior Property 3D (lantai1).......................................................... 27 Gambar 3. 6 Texure Jendela.................................................................................. 28 Gambar 3. 7 Texure Furniture............................................................................... 29 Gambar 3. 8 Interior Lantai 2 ............................................................................... 30 Gambar 3. 9 Interior lantai 3................................................................................. 31 Gambar 3. 10 Interior lantai 4............................................................................... 32 Gambar 3. 11 Texture Image................................................................................. 33 Gambar 3. 12 UV Editor ....................................................................................... 34 Gambar 3.13 Wireframe dan UX Design Web Aplikasi Profil Property.............. 35 Gambar 4. 1 Tampilan beranda web aplikasi........................................................ 37 Gambar 4. 2 Tampilan beranda web aplikasi........................................................ 38 Gambar 4. 3 Tampilan beranda web aplikasi........................................................ 38 Gambar 4. 4 Tampilan beranda web aplikasi........................................................ 39 Gambar 4. 5 Tampilan beranda web aplikasi........................................................ 40 Gambar 4. 6 Upload Window ............................................................................... 40 Gambar 4. 7 Library menu .................................................................................... 41 Gambar 4. 8 Thumbnail Preview .......................................................................... 42 Gambar 4. 9 Preview 3D property ........................................................................ 42 Gambar 4. 10 Pemilihan Lighting......................................................................... 43 Gambar 4. 11 Ambient Light ................................................................................ 44 Gambar 4. 12 Directional Light ............................................................................ 45 Gambar 4. 13 Point Light...................................................................................... 46 Gambar 4. 14 Spot Light....................................................................................... 47 Gambar 4. 15 Area Light ...................................................................................... 48 Gambar 4. 16 Category Menu............................................................................... 49 Gambar 4. 17 Frame rate per Second.................................................................... 50 Gambar 4. 18 Gedung Teknologi Informasi ......................................................... 51 Gambar 4. 19 Pengujian 3D Ekterior Gedung Teknologi Informasi .................... 52 Gambar 4. 20 Pengujian 3D Interior Gedung Teknologi Informasi ..................... 53 Gambar 4. 21 Uji Exterior pada Perangkat Smartphone....................................... 54 Gambar 4. 22 Uji Coba Interior Perangkat Smartphone ....................................... 55 Gambar 4. 23 Uji Coba pada Perangkat Smart TV............................................... 56 xii
Gambar 4. 24 Grafik Pengujian FPS sesuai keadaan cahaya................................ 57
xiii
DAFTAR TABEL
Tabel 4. 1 Tabel Pengujian FPS sesuai keadaan cahaya ....................................... 56
\
xiv
DAFTAR KODE PROGRAM
Kode Program 2. 1 Contoh Penerapan Three.js.................................................... 13 Kode Program 2. 2 Objek 3D Sederhana .............................................................. 16
xv
