ABSTRAK
Bali merupakan salah satu tujuan wisata yang sangat berkembang di Indonesia. Kedatangan wisatawan yang berlibur ke Bali menyebabkan meningkatnya kebutuhan hunian lengkap dengan fasilitasnya. Tingkat hunian hotel ataupun villa di Bali cenderung meningkat drastis pada saat liburan panjang. Munculnya hunian hotel dan villa baru saat ini menimbulkan tingkat persaingan bagi pelaku usaha, sehingga dibutuhkan sebuah ketepatan penggunaan strategi komunikasi pemasaran yang baik dalam memasarkan produk agar dapat menarik perhatian konsumen. Aplikasi Web Augmented Reality Villa dapat membantu memvisualisasikan hunian villa dalam bentuk 3-dimensi sehingga terlihat lebih menarik dan praktis. Penggunaan brosur sebagai informasi tertulis dan penerapan teknologi augmented reality pada Aplikasi Web Augmented Reality Villa bertujuan untuk membangun suatu aplikasi yang dapat memberikan informasi mengenai villa kepada pengunjung. Perancangan Aplikasi Web Augmented Reality Villa menggunakan library FlarToolkit. Berdasarkan hasil pengujian menunjukkan aplikasi dapat menampilkan objek 3-dimensi villa dengan melakukan scanning marker pada brosur yang sudah berisi marker. Kata kunci : augmented reality, marker, 3-dimensi, villa, brosur
viii
ABSTRACT
Bali is one of the highly developed tourist destination in Indonesia. The arrival of tourists having holiday in Bali led to increase residential needs with complete amenities. The occupancy rate of hotel and villa in Bali is increase significantlly during the long vacation. The emergence of new villa and hotel occupancy raises the level of competition in business, so it needs a correct use good marketing communication strategy in marketing the product in order to attract the attention of consumers. Web Application Augmented Reality Villa can help visualize the residential villa in three-dimensional shapes that look more attractive and practical. The use of brochures as written information and the application of augmented reality technology on the Web Application Augmented Reality Villa aims to develop an application that can provide information about the villa to visitors. Web Application uses Augmented Reality Villa designed by FlarToolkit library. Based on the test results show the application can display 3dimensional objects by scanning marker villa in a brochure which already contain marker. Keywords: augmented reality, marker, 3-dimension,villa, brochure
DAFTAR ISI PERNYATAAN ..................................................................................................... ii 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 BAB I PENDAHULUAN ...................................................................................... 1 1.1 Latar Belakang ............................................................................................ 1 1.2 Rumusan Masalah ....................................................................................... 2 1.3 Tujuan Penelitian......................................................................................... 2 1.4 Manfaat Penelitian....................................................................................... 3 1.5 Batasan Masalah .......................................................................................... 3 BAB II KAJIAN PUSTAKA ................................................................................ 5 2.1 State Of The Art Review ............................................................................. 5 2.2 Augmented reality ....................................................................................... 7 2.2.1 Perangkat dan Cara Kerja Augmented Reality ....................................... 8 2.3 HTML5...................................................................................................... 10 2.4 FlarToolkit ................................................................................................. 11 2.5 Pengolahan Citra Digital ........................................................................... 12 2.6 Sistem Informasi ....................................................................................... 13 2.7 Sistem Informasi Berbasis Web ................................................................ 13 2.8 Adobe Photoshop ...................................................................................... 14 2.9 Adobe Dreamweaver CS3 ......................................................................... 15 2.10 Adobe Flash............................................................................................... 17 2.11 Google SketchUp ...................................................................................... 17 2.12 3DS Max ................................................................................................... 18 2.13 Villa ........................................................................................................... 19 BAB III METODOLOGI DAN PERANCANGAN SISTEM ......................... 22 3.1 Tempat dan Waktu Penelitian ................................................................... 22 3.2 Alur Penelitian........................................................................................... 22 3.3 Data ........................................................................................................... 24 3.3.1 Sumber Data ......................................................................................... 24 3.3.2 Metode Pengumpulan Data .................................................................. 24 3.4 Gambaran Umum Sistem .......................................................................... 24 3.4.1 Diagram Use Case ................................................................................ 25 3.5 Rancangan Sistem ..................................................................................... 25 3.5.2 Activity Diagram Menu Scan Marker .................................................. 27 3.6 Rancangan Antarmuka .............................................................................. 28 3.6.1 Rancangan Antarmuka Halaman Utama .............................................. 28 3.6.2 Rancangan Antarmuka Halaman Scan Marker .................................... 29 3.6.3 Rancangan Antarmuka Halaman Services ........................................... 29 i
3.6.4 Rancangan Antarmuka Halaman Rooms.............................................. 30 3.6.5 Rancangan Antarmuka Halaman Gallery ............................................. 31 3.6.6 Rancangan Antarmuka Halaman Contact............................................. 32 3.7 Perancangan Objek 3-dimensi Villa .......................................................... 32 3.7.1 Tahap Image Referencing ..................................................................... 33 3.7.2 Tahap Pembuatan Dinding .................................................................... 33 3.7.3 Tahap Pembuatan Lantai....................................................................... 34 3.7.4 Tahap Pembuatan Pintu dan Jendela ..................................................... 35 3.7.5 Tahap Modeling Exterior dan Interior .................................................. 35 3.7.6 Tahap Texturing .................................................................................... 36 3.8 Desain dan Pembuatan Brosur .................................................................. 37 3.9 Desain dan Pembuatan Marker.................................................................. 40 BAB IV PEMBAHASAN DAN ANALISA HASIL ......................................... 45 4.1 Gambaran Umum Aplikasi........................................................................ 45 4.2 Hasil Perancangan ..................................................................................... 46 4.2.1 Tampilan Halaman Utama .................................................................... 47 4.2.2 Tampilan Halaman Scan Marker .......................................................... 50 4.2.3 Tampilan Halaman Services ................................................................. 51 4.2.4 Tampilan Halaman Rooms ................................................................... 51 4.2.5 Tampilan Halaman Gallery .................................................................. 53 4.2.6 Tampilan Halaman Contact .................................................................. 54 4.3 Uji Coba Aplikasi Web Augmented Reality Villa .................................... 55 4.4 Analisa Sistem Aplikasi ............................................................................ 57 4.5 Perhitungan dan Penyajian Data ............................................................... 58 4.5.1 Aspek Kesesuaian Proses ..................................................................... 58 4.5.2 Aspek User Interface dan Fitur............................................................. 59 BAB V PENUTUP ............................................................................................... 61 5.1 Simpulan.................................................................................................... 61 5.2 Saran .......................................................................................................... 61 DAFTAR PUSTAKA .......................................................................................... 62
ii
DAFTAR GAMBAR Gambar 2.1 Contoh Marker .................................................................................... 9 Gambar 2.2 HTML5.............................................................................................. 11 Gambar 2.3 Tampilan Adobe Photoshop .............................................................. 14 Gambar 2.4 Logo Adobe Dreamweaver CS3 ........................................................ 15 Gambar 2.5 Adobe Flash....................................................................................... 17 Gambar 2.6 Google SketchUp ............................................................................... 18 Gambar 2.7 3D Studio Max................................................................................... 19 Gambar 2.8 Tampilan Exterior Villa .................................................................... 20 Gambar 2.9 Tampilan Interior Villa ..................................................................... 20 Gambar 3.1 Flowchart Alur Penelitian ................................................................. 23 Gambar 3.2 Diagram Use case. ............................................................................. 25 Gambar 3.3 Struktur Flowchart Aplikasi .............................................................. 26 Gambar 3.4 Activity Diagram Menu Scan Marker ............................................... 27 Gambar 3.5 Rancangan Antarmuka Halaman Home ............................................ 28 Gambar 3.6 Rancangan Antarmuka Halaman Scan Marker ................................. 29 Gambar 3.7 Rancangan Antarmuka Halaman Services ........................................ 30 Gambar 3.8 Rancangan Antarmuka Halaman Rooms .......................................... 30 Gambar 3.9 Rancangan Antarmuka Halaman Gallery.......................................... 31 Gambar 3.10 Rancangan Antarmuka Halaman Contact ....................................... 32 Gambar 3.11 Tahap Image Referencing ............................................................... 33 Gambar 3.12 Tahap Pembuatan Dinding .............................................................. 34 Gambar 3.13 Tahap Pembuatan Lantai ................................................................. 34 Gambar 3.14 Tahap Pembuatan Pintu dan Jendela .............................................. 35 Gambar 3.15 Tahap Modeling Exterior dan Interior ............................................ 36 Gambar 3.16 Tahap Texturing .............................................................................. 36 Gambar 3.17 Membuat Layer Background........................................................... 37 Gambar 3.18 Tahap Pembuatan Tema Background ............................................. 38 Gambar 3.19 Tahap Pembuatan Header dan Footer ............................................. 38 Gambar 3.20 Tahap Pembuatan Garis .................................................................. 39 Gambar 3.21 Tahap Penambahan Photo ............................................................... 39 Gambar 3.22 Penambahan Informasi Berupa Teks............................................... 40 Gambar 3.23 Desain Marker ................................................................................. 40 Gambar 3.24 Tampilan Aplikasi Marker Generator ............................................. 41 Gambar 3.25 Tampilan Load Marker Image......................................................... 42 Gambar 3.26 Tampilan Preview Marker............................................................... 43 Gambar 3.27 Tampilan Save As Marker............................................................... 44 Gambar 4.1 Gambaran Umum Penggunaan Aplikasi Augmented Reality Villa. . 46 Gambar 4.2 Tampilan Halaman Utama (a) ........................................................... 48 Gambar 4.3 Tampilan Halaman Utama (b) ........................................................... 49 Gambar 4.4 Tampilan Halaman Scan Marker....................................................... 50 Gambar 4.5 Tampilan Halaman Services.............................................................. 51 Gambar 4.6 Tampilan Halaman Rooms ................................................................ 52 Gambar 4.7 Tampilan Halaman Gallery ............................................................... 53 iii
Gambar 4.8 Tampilan Halaman Contact............................................................... 54 Gambar 4.9 Tampilan Halaman Scan Marker....................................................... 55 Gambar 4.10 Tampilan Kotak Dialog Adobe Flash Player Setting ...................... 56 Gambar 4.11 Tampilan Video Webcam................................................................ 56 Gambar 4.12 Tampilan Rendering Video Augmented Reality ............................. 57 Gambar 4.13 Diagram Aspek Kesuaian Proses .................................................... 59 Gambar 4.14 Diagram Aspek User Interface dan Fitur ........................................ 60
iv
DAFTAR TABEL Tabel 4.1 Aspek Kesesuaian Proses ...................................................................... 58 Tabel 4.2 Aspek User Interface dan Fitur ............................................................. 59
v
BAB I PENDAHULUAN Bagian pendahuluan memamaparkan ide yang mendasari perancangan serta beberapa poin penting yang terkait dengan perancangan yang akan dilakukan antara lain latar belakang, rumusan masalah, batasan masalah, tujuan, manfaat yang diharapkan, metodologi penelitian, dan sistematika penulisan. 1.1 Latar Belakang Bali merupakan salah satu tujuan wisata yang sangat berkembang di Indonesia, tidak hanya alam dan budayanya yang menjadi kelebihan dari Bali tetapi karakter dan perilaku masyarakat yang sangat menghormati satu sama lain, ramah terhadap sesama dan pendatang, sangat religius, dan bersama-sama berusaha menjaga citra pulau Bali yang sudah dikenal pasar nasional maupun internasional (Utama, I Gst. Bagus Rai, 2013). Menurut Dinas Pariwisata Pemerintah Provinsi Bali, jutaan wisatawan asing maupun
wisatawan
lokal
berdatangan
tiap
tahunnya
ke
pulau
Bali
(http://www.disparda.baliprov.go.id/). Kedatangan wisatawan yang berlibur ke Bali membutuhkan hunian dengan segala kelengkapan fasilitas. Tingkat hunian hotel ataupun villa di Bali rata-rata pertahun selalu penuh pada saat liburan panjang. Hampir semua hotel mendulang untung di masa liburan. Para pelaku usaha hotel dan villa bersaing ketat untuk menarik pengunjung dan meraup untung sebesar-besarnya. Munculnya hunian hotel dan villa baru saat ini menimbulkan tingkat persaingan bagi pelaku usaha, sehingga dibutuhkan sebuah ketepatan penggunaan strategi komunikasi pemasaran yang baik dalam memasarkan produk agar dapat menarik perhatian konsumen. Selama ini, brosur digunakan sebagai salah satu media pemasaran hunian hotel atau villa. Informasi pada brosur umumnya hanya menampilkan gambar dan teks sehingga terkesan monoton. Berdasarkan hal tersebut penulis memiliki ide untuk memanfaatkan keunggulan augmented reality
sebagai penunjang media pemasaran dan informasi hunian di Bali khususnya hunian villa. Augmented reality adalah penggabungan dunia nyata dan virtual, bersifat interaktif secara real time, dan bentuknya merupakan animasi 3-dimensi. Interaktif disini yang dimaksud adalah adanya interaksi dari user ke augmented reality tersebut (Dhiyatmika, I Dw. Gd. Wahya, 2015). Augmented reality atau yang biasa disebut dengan AR bukan merupakan teknologi baru. Seiring berjalannya waktu, augmented reality berkembang sangat pesat sehingga memungkinkan pengembangan aplikasi ini diberbagai bidang termasuk pada bidang bisnis hunian. Keunggulan augmented reality dimanfaatkan pada proyek tugas akhir ini untuk membantu memvisualisasikan konsep abstrak lebih intuitif untuk meningkatkan pemahaman dalam menggambarkan suatu model objek. Augmented reality diterapkan dalam website pemasaran sebuah villa, dimana villa tersebut ditampilkan dalam bentuk objek 3-dimensi sehingga terlihat lebih menarik dan praktis. Augmented reality dibangun berbasis web sehingga lebih efisien karena dapat diakses tanpa harus melakukan instalasi aplikasi terlebih dahulu. 1.2 Rumusan Masalah Berdasarkan latar belakang masalah tersebut dapat dibuat suatu rumusan masalah, yaitu: a. Bagaimana menjadikan suatu teknologi augmented reality agar bisa bermanfaat bukan hanya dalam bidang komputer tetapi dalam bidang lain yaitu bidang bisnis, khususnya bisnis hunian villa? b. Bagaimana aplikasi web augmented reality villa mampu digunakan sebagai alternatif penunjang promosi villa? 1.3 Tujuan Penelitian Tujuan yang dapat diambil dari permasalahan tugas akhir yaitu sebagai berikut : a. Menjadikan teknologi Augmented Reality bermanfaat di bidang bisnis, khususnya bisnis hunian villa.
b. Menjadikan aplikasi web augmented reality villa sebagai alternatif penunjang promosi villa. 1.4 Manfaat Penelitian Manfaat yang diharapkan yaitu dapat membantu para pelaku bisnis dalam memasarkan propertinya kepada konsumen, serta dapat membantu para pengunjung untuk mengetahui dengan baik bentuk villa yang akan mereka pesan. Promosipun menjadi lebih menarik sehingga menimbulkan hubungan emosional yang lebih mendalam antara konsumen dengan brand. 1.5 Batasan Masalah Dalam penulisan tugas akhir ini pembahasan masalah memiliki batasan pada permasalahan berikut: a. Aplikasi ini bekerja pada basis augmented reality dengan library FlarToolkit sebagai komponen pembuatannya. b. Aplikasi ini berfungsi untuk menampilkan virtualisasi villa dalam bentuk bangunan 3-dimensi. c. Aplikasi ini berjalan berbasis web. d. User menggunakan aplikasi untuk melakukan scanning marker dan melihat objek 3-dimensi villa. 1.6 Sistematika Penulisan Sistematika penulisan dari penulisan tugas akhir ini dapat dijelaskan sebagai berikut : BAB I
: Pendahuluan Bab I berisikan mengenai gambaran umum dari penulisan yang didalamnya membahas mengenai latar belakang masalah, rumusan masalah, tujuan penelitian, manfaat penelitian, batasan masalah, hingga mengenai sistematika penulisan.
BAB II
: Kajian Pustaka Bab II berisikan mengenai berbagai macam teori penunjang dalam memecahkan permasalahan, yakni mulai dari pembahasan mengenai augmented reality dan teori penunjang lainnya.
BAB III : Metodologi dan Perancangan Sistem Bab III membahas mengenai metode dan perancangan sistem pada penelitian ini yang meliputi tempat dan waktu penelitian, alur penelitian, sumber data, gambaran umum dan perancangan sistem. BAB IV : Pengujian dan Analisa Hasil Bab IV berisikan mengenai gambaran umum hasil aplikasi web augmented reality villa dan implementasinya kedalam media informasi web villa, serta uji coba aplikasi augmented reality. BAB V
: Penutup Bab V berisikan simpulan yang diambil dari hasil pembahasan tentang tampilan aplikasi serta saran yang ditujukan untuk pengembangan fitur dari aplikasi web augmented reality villa lebih lanjut.
