WEB APLIKASI PROFIL PROPERTY BERBASIS 3D DENGAN MENGGUNAKAN FRAMEWORK WEBGL DAN LIBRARY THREE.JS

Transkripsi

1 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: JURUSAN TEKNOLOGI INFORMASI FAKULTAS TEKNIK UNIVERSITAS UDAYANA 2016 ii

2 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

3

4

5 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

6 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

7 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

8 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

9 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 Latar Belakang Rumusan Masalah Tujuan Manfaat Batasan Masalah Sistematika Penulisan... 4 BAB II TINJAUAN PUSTAKA State of the Art Perancangan Web aplikasi profil property berbasis 3D Diagram Ishikawa (Fishbone) WebGL Rancangan dan Sejarah Definisi Teknis WebGL Three.js Javascript 3D Engine Fitur There.js Simple Page Interaksi Dekteksi Hit, Picking, dan Proyeksi Integrasi Kombinasi Dinamis HTML dan WebGL Anotasi Layar 3D Menggunakan Posisi Layar 2D Perangkat Lunak yang Digunakan Autodesk Maya 2016 Student Version BAB III METODOLOGI DAN PERANCANGAN SISTEM Tempat dan Waktu Penelitian Alur Penelitian Sumber data Gambaran Umum User Interface User Experience BAB IV PEMBAHASAN DAN ANALISIS SISTEM x

10 4.1 Konfigurasi Hardware dan Software Pengujian Antarmuka Aplikasi Analisis Frame rate Per Second Uji Coba pada Device Perangkat Laptop/PC Perangkat Smartphone Perangkat Smart TV Analisa Kecepatan BAB V PENUTUP Simpulan Saran DAFTAR PUSTAKA xi

11 DAFTAR GAMBAR Gambar 2. 1 Diagram Ishikawa (fishbone)... 8 Gambar 2. 2 Hasil Render Penerepan Sederhana There.js Gambar 2. 3 Objek 3D Sederhana Gambar 2. 4 Kamera, Viewport dan Proyeksi Gambar 2. 5 Autodesk Maya 2016 Student Version Gambar 3. 1 Flowchart Alur Penelitian Gambar 3. 2 Gambaran Umum Sistem Web Aplikasi Gambar 3. 3 Fishbone Gambar 3. 4 Exterior Property 3D Gambar 3. 5 Interior Property 3D (lantai1) Gambar 3. 6 Texure Jendela Gambar 3. 7 Texure Furniture Gambar 3. 8 Interior Lantai Gambar 3. 9 Interior lantai Gambar Interior lantai Gambar Texture Image Gambar UV Editor Gambar 3.13 Wireframe dan UX Design Web Aplikasi Profil Property Gambar 4. 1 Tampilan beranda web aplikasi Gambar 4. 2 Tampilan beranda web aplikasi Gambar 4. 3 Tampilan beranda web aplikasi Gambar 4. 4 Tampilan beranda web aplikasi Gambar 4. 5 Tampilan beranda web aplikasi Gambar 4. 6 Upload Window Gambar 4. 7 Library menu Gambar 4. 8 Thumbnail Preview Gambar 4. 9 Preview 3D property Gambar Pemilihan Lighting Gambar Ambient Light Gambar Directional Light Gambar Point Light Gambar Spot Light Gambar Area Light Gambar Category Menu Gambar Frame rate per Second Gambar Gedung Teknologi Informasi Gambar Pengujian 3D Ekterior Gedung Teknologi Informasi Gambar Pengujian 3D Interior Gedung Teknologi Informasi Gambar Uji Exterior pada Perangkat Smartphone Gambar Uji Coba Interior Perangkat Smartphone Gambar Uji Coba pada Perangkat Smart TV xii

12 Gambar Grafik Pengujian FPS sesuai keadaan cahaya xiii

13 DAFTAR TABEL Tabel 4. 1 Tabel Pengujian FPS sesuai keadaan cahaya \ xiv

14 DAFTAR KODE PROGRAM Kode Program 2. 1 Contoh Penerapan Three.js Kode Program 2. 2 Objek 3D Sederhana xv