ii

WEB APLIKASI PROFIL PROPERTY BERBASIS 3DDENGAN MENGGUNAKAN FRAMEWORK WEBGL

DAN LIBRARY THREE.JS

TUGAS AKHIR

Diajukan Guna Memenuhi Sebagian Persyaratan Dalam Rangka MenyelesaikanPendidikan Sarjana Strata Satu (S1) Program Studi Teknologi Informasi

GEDE RISKA WIRADARMANIM: 1204505080

JURUSAN TEKNOLOGI INFORMASIFAKULTAS TEKNIK

UNIVERSITAS UDAYANA2016

iii

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

vi

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.

vii

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

viii

ABSTRAK

Arsitek merupakan salah satu bisnis jasa dalam membangun desainproperty untuk menampilkan menjadi nyata. Kemampuan seorang arsitek untukmerancang pembangunan suatu property menuntut adanya sebuah visualisasiobjek sebagai pratinjau rancangan kepada klien. Maket difungsikan sebagai carauntuk mempromosikan rancang property, namun pada perkembangannya biayapembuatan maket masih dianggap terlalu besar dan kerap membebanipengembang ditambah waktu penyelesaian yang lama. Pemanfaatan media digitalpada era pembangunan saat ini masih kurang dalam hal mempromosikan karyaarsitektur secara akurat dan mendetail, membuat informasi yang diterimakonsumen kurang maksimal, oleh karena itu diperlukan teknologi yang tepatguna. Teknologi komputerisasi memungkinkan membangun teknologi 3D diatasbrowser sebagai sarana promosi karya seni arsitektur berbasiskan 3D. TeknologiWebGL memberikan banyak manfaat kepada pihak arsitek, perusahaan konstruksimaupun pengembang property. Teknologi WebGL juga membuat hasil karyaterlihat lebih nyata, seperti program 3D yang banyak terdapat dipasaran.Teknologi berbasis cloud dapat diterapkan pada banyak kasus, salah satunyabisnis property.

Kata Kunci : WebGL, 3D, Arsitek, Property, Desain

ix

ABSTRACT

Architect is one of business services in creating property design to make itbecome a reality. To design a property development, an architect requires theability to visualize the object as a preview design to clients. A mock-up is a wayto promote a design property, but as time goes on, the cost in making mock-up istoo big and it is usually takes a long time to finish a mock-up, sometimes itburdens the developer. The utilizations of digital medias in this century, are stillnot enough in promoting an accurately and detailed architectural work, make theinformation that received by the consumers not optimal, because of it, it is neededappropriate technologies. Computerized technology enables to build the 3Dtechnology on the browser as a promotional tool-based architecture 3D artwork.The WebGL technology gives a lot of advantages to the architect’s side, theconstruction company’s side and also the property developer’s side. The WebGLtechnology also makes the architectural work looks real, like 3D programs that arein market. The cloud-based technology can be used in many cases, such asproperty business.

Keywords : WebGL, 3D, Architect, Property, Design

x

DAFTAR ISI

LEMBAR PERNYATAAN ................................................................................. iiiLEMBAR PENGESAHAN TUGAS AKHIR .................................................... ivBERITA ACARA TUGAS AKHIR..................................................................... vKATA PENGANTAR.......................................................................................... viABSTRAK .......................................................................................................... viiiABSTRACT ........................................................................................................... ixDAFTAR ISI.......................................................................................................... xDAFTAR GAMBAR........................................................................................... xiiDAFTAR TABEL .............................................................................................. xivDAFTAR KODE PROGRAM ........................................................................... xvBAB I PENDAHULUAN...................................................................................... 11.1 Latar Belakang ................................................................................................. 11.2 Rumusan Masalah ............................................................................................ 31.3 Tujuan .............................................................................................................. 31.4 Manfaat ............................................................................................................ 31.5 Batasan Masalah .............................................................................................. 41.6 Sistematika Penulisan ...................................................................................... 4BAB II TINJAUAN PUSTAKA........................................................................... 62.1 State of the Art ................................................................................................. 6

2.1.1 Perancangan Web aplikasi profil property berbasis 3D.......................... 62.1.2 Diagram Ishikawa (Fishbone) ................................................................ 7

2.2 WebGL............................................................................................................. 82.2.1 Rancangan dan Sejarah........................................................................... 92.2.2 Definisi Teknis WebGL .......................................................................... 9

2.3 Three.js Javascript 3D Engine....................................................................... 112.3.1 Fitur There.js ........................................................................................ 112.3.2 Simple Page .......................................................................................... 13

2.4 Interaksi.......................................................................................................... 162.4.1 Dekteksi Hit, Picking, dan Proyeksi ..................................................... 16

2.5 Integrasi.......................................................................................................... 182.5.1 Kombinasi Dinamis HTML dan WebGL .............................................. 182.5.2 Anotasi Layar 3D Menggunakan Posisi Layar 2D............................... 18

2.6 Perangkat Lunak yang Digunakan ................................................................. 192.6.1 Autodesk Maya 2016 Student Version................................................. 19

BAB III METODOLOGI DAN PERANCANGAN SISTEM ......................... 213.1 Tempat dan Waktu Penelitian ........................................................................ 213.2 Alur Penelitian ............................................................................................... 213.3 Sumber data ................................................................................................... 233.4 Gambaran Umum........................................................................................... 233.5 User Interface ................................................................................................ 263.6 User Experience ............................................................................................. 34BAB IV PEMBAHASAN DAN ANALISIS SISTEM...................................... 36

xi

4.1 Konfigurasi Hardware dan Software............................................................. 364.2 Pengujian Antarmuka Aplikasi ...................................................................... 364.3 Analisis Frame rate Per Second ..................................................................... 504.4 Uji Coba pada Device .................................................................................... 51

4.4.1 Perangkat Laptop/PC............................................................................ 524.4.2 Perangkat Smartphone.......................................................................... 534.4.3 Perangkat Smart TV ............................................................................. 55

4.5 Analisa Kecepatan.......................................................................................... 56BAB V PENUTUP............................................................................................... 595.1 Simpulan ........................................................................................................ 595.2 Saran .............................................................................................................. 60DAFTAR PUSTAKA.......................................................................................... 61

xii

DAFTAR GAMBAR

Gambar 2. 1 Diagram Ishikawa (fishbone) ............................................................. 8Gambar 2. 2 Hasil Render Penerepan Sederhana There.js.................................... 14Gambar 2. 3 Objek 3D Sederhana......................................................................... 14Gambar 2. 4 Kamera, Viewport dan Proyeksi ...................................................... 17Gambar 2. 5 Autodesk Maya 2016 Student Version............................................. 19Gambar 3. 1 Flowchart Alur Penelitian................................................................ 22Gambar 3. 2 Gambaran Umum Sistem Web Aplikasi. ......................................... 23Gambar 3. 3 Fishbone ........................................................................................... 24Gambar 3. 4 Exterior Property 3D ....................................................................... 26Gambar 3. 5 Interior Property 3D (lantai1).......................................................... 27Gambar 3. 6 Texure Jendela.................................................................................. 28Gambar 3. 7 Texure Furniture............................................................................... 29Gambar 3. 8 Interior Lantai 2 ............................................................................... 30Gambar 3. 9 Interior lantai 3................................................................................. 31Gambar 3. 10 Interior lantai 4............................................................................... 32Gambar 3. 11 Texture Image................................................................................. 33Gambar 3. 12 UV Editor ....................................................................................... 34Gambar 3.13 Wireframe dan UX Design Web Aplikasi Profil Property .............. 35Gambar 4. 1 Tampilan beranda web aplikasi........................................................ 37Gambar 4. 2 Tampilan beranda web aplikasi........................................................ 38Gambar 4. 3 Tampilan beranda web aplikasi........................................................ 38Gambar 4. 4 Tampilan beranda web aplikasi........................................................ 39Gambar 4. 5 Tampilan beranda web aplikasi........................................................ 40Gambar 4. 6 Upload Window ............................................................................... 40Gambar 4. 7 Library menu.................................................................................... 41Gambar 4. 8 Thumbnail Preview .......................................................................... 42Gambar 4. 9 Preview 3D property ........................................................................ 42Gambar 4. 10 Pemilihan Lighting......................................................................... 43Gambar 4. 11 Ambient Light ................................................................................ 44Gambar 4. 12 Directional Light ............................................................................ 45Gambar 4. 13 Point Light...................................................................................... 46Gambar 4. 14 Spot Light ....................................................................................... 47Gambar 4. 15 Area Light ...................................................................................... 48Gambar 4. 16 Category Menu............................................................................... 49Gambar 4. 17 Frame rate per Second.................................................................... 50Gambar 4. 18 Gedung Teknologi Informasi ......................................................... 51Gambar 4. 19 Pengujian 3D Ekterior Gedung Teknologi Informasi .................... 52Gambar 4. 20 Pengujian 3D Interior Gedung Teknologi Informasi ..................... 53Gambar 4. 21 Uji Exterior pada Perangkat Smartphone....................................... 54Gambar 4. 22 Uji Coba Interior Perangkat Smartphone ....................................... 55Gambar 4. 23 Uji Coba pada Perangkat Smart TV............................................... 56

xiii

Gambar 4. 24 Grafik Pengujian FPS sesuai keadaan cahaya................................ 57

xiv

DAFTAR TABEL

Tabel 4. 1 Tabel Pengujian FPS sesuai keadaan cahaya ....................................... 56

\

xv

DAFTAR KODE PROGRAM

Kode Program 2. 1 Contoh Penerapan Three.js.................................................... 13Kode Program 2. 2 Objek 3D Sederhana .............................................................. 16