Implementasi Augmented Reality Berbasis Web Sebagai Strategi Pemasaran Penjualan Mobil dengan Metode Occlusion Based Detection

(1)

i

Implementasi Augmented Reality Berbasis Web Sebagai Strategi

Pemasaran Penjualan Mobil dengan Metode

Occlusion Based Detection

Diajukan Untuk Memenuhi

Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang

Riski Tobuhu 07560407

JURUSAN TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH MALANG

2013

(2)

ii

LEMBAR PERSETUJUAN

IMPLEMENTASI AUGMENTED REALITY BERBASIS WEB

SEBAGAI STRATEGI PEMASARAN PRODUK

PENJUALAN MOBIL DENGAN METODE

OCCLUSION BASED DETECTION

TUGAS AKHIR

Sebagai Persyaratan Guna Meraih Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang

Menyetujui,

Pembimbing I Pembimbing II

Eko Budi Cahyono, S.Kom.,M.T Hardianto Wibowo, S.Kom NIP : 108.9504.0330 NIDN : 0721038602

Mengetahui,

Ketua Jurusan Teknik Informatika

Eko Budi Cahyono, S.Kom.,MT NIP 108.9504.0330

(3)

iii

LEMBAR PENGESAHAN

IMPLEMENTASI AUGMENTED REALITY BERBASIS WEB

SEBAGAI STRATEGI PEMASARAN PRODUK

PENJUALAN MOBIL DENGAN METODE

OCCLUSION BASED DETECTION

TUGAS AKHIR

Sebagai Persyaratan Guna Meraih Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang

Disusun Oleh: Riski Tobuhu

07560407

Tugas Akhir ini telah diuji dan dinyatakan lulus melalui sidang majelis penguji pada tanggal 23 Januari 2013

Menyetujui,

Penguji I Penguji II

Wahyu Andhyka, S.Kom Nur Hayatin, SST NIDN : 0720068701 NIP : 108.0907.0476

Mengetahui,

Ketua Jurusan Teknik Informatika

Eko Budi Cahyono, S.Kom.,MT. NIP 108.9504.0330

(4)

iv

SURAT PERNYATAAN

Yang bertanda tangan di bawah ini:

Nama : Riski Tobuhu

Tempat,Tanggal/Lahir : Gorontalo, 25 Maret 1988 NIM : 07560407

Fakultas/Jurusan : Teknik/Informatika

Menyatakan bahwa karya ilmiah/skripsi/tugas akhir penulis yang berjudul:

“Implementasi Augmented Reality Berbasis Web Sebagai Strategi Pemasaran Produk Penjualan Mobil dengan Metode

Occlusion Based Detection ”

Adalah bukan merupakan karya tulis orang lain, baik sebagian maupun keseluruhan, kecuali dalam bentuk kutipan yang telah kami sebutkan sumbernya. Demikian surat pernyataan ini kami buat dengan sebenar-benarnya dan apabila pernyataan ini tidak benar, kami siap mendapatkan sanksi akademis.

Malang, Januari 2013 Yang Menyatakan

Riski Tobuhu

Mengetahui,

Pembimbing I Pembimbing II

Eko Budi Cahyono, S.Kom.,MT. Hardianto Wibowo, S.Kom NIP 108.9504.0330 NIDN : 0721038602

(5)

v

LEMBAR PERSEMBAHAN

Dalam kesempatan ini, ijinkanlah penulis menyampaikan rasa terima kasih kepada:

1. Allah SWT yang telah melimpahkan rahmat serta hidayah-Nya.

2. Kedua orang tua, mama dan papa, yang memberikan dukungan moril maupun materil. Pengorbanan dan kasih sayang serta doa beliau berdua tidak dapat dinilai dengan apapun juga.

3. Bpk. Eko Budi Cahyono, S.Kom.,MT selaku Ketua Jurusan Teknik Informatika Universitas Muhammadiyah Malang, dan selaku pembimbing I, terima kasih telah memberikan bimbingan, saran, semangat serta nasehat. 4. Bpk. Hardianto, S.Kom selaku pembimbing II, terima kasih telah

memberikan bimbingan, saran, masukan, semangat serta nasehat sehingga Tugas Akhir ini terselesaikan dengan baik.

5. Teman-teman jurusan Teknik Informatika angkatan 2007 senasib dan seperjuangan yang memberi bantuan secara langsung maupun tidak langsung ( Rino, Yulia, Muhib ).

6. Teman-teman forum A.R.T ( Augmented Reality Team ) yang memberikan masukan, ide, serta solusi dalam menyelesaikan Tugas Akhir saya. Terima kasih yang sebesar-besarnya Mas Fathah atas bimbingan projectnya.

7. Teman-teman HPMIG ( Himpunan Mahasiswa Indonesia Gorontalo ), terima kasih atas canda tawa selama ini.

8. Specially for Vika Djula, yang tidak berhenti memberi semangat dan selalu sabar mendengar keluh kesahku.

9. Serta semua pihak yang tidak bisa penulis sebutkan satu persatu, terima kasih atas bantuan serta semangat yang selalu diberikan.

(6)

vi

KATA PENGANTAR

Dengan mengucapkan puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan hidayah selama pembuatan Tugas Akhir ini, sehingga Tugas Akhir yang berjudul:

“IMPLEMENTASI AUGMENTED REALITY BERBASIS WEB SEBAGAI STRATEGI PEMASARAN PRODUK

PENJUALAN MOBIL DENGAN

METODE OCCLUSION BASED DETECTION”

Pembuatan dan penulisan Tugas Akhir ini sebagai salah satu persyaratan untuk menyelesaikan studi di Universitas Muhammadiyah Malang Jurusan Teknik Informatika.

Selama penyusunan Tugas Akhir ini, banyak hambatan yang ditemui oleh penulis. Dengan rahmat Allah SWT dan bimbingan dari dosen pembimbing serta kemauan yang keras sehingga semua hambatan dan permasalahan dapat teratasi.

Penulis menyadari dalam pembuatan buku Proyek Akhir ini masih banyak kekurangan pada proses pengerjaan. Penulis berharap semoga buku Proyek Akhir ini menjadi sesuatu yang bermanfaat bagi pembaca. Penulis berharap saran dan kritik yang membangun dari pembaca.

Malang, Januari 2013 Penulis,

(7)

vii

DAFTAR ISI

LEMBAR PERSETUJUAN ... i

LEMBAR PENGESAHAN ... ii

LEMBAR PERSEMBAHAN ... iii

SURAT PERNYATAAN ... iv

ABSTRAK ... v

ABSTRACT ... vi

KATA PENGANTAR ... vii

DAFTAR ISI ... viii

DAFTAR GAMBAR ... xi

DAFTAR TABEL ... xiii

BAB I PENDAHULUAN 1.1 Latar Belakang Masalah ... 1

1.2 Rumusan Masalah ... 2

1.3 Tujuan Masalah ... 2

1.4 Batasan Masalah ... 3

1.5 Metodologi Penelitian ... 3

1.6 Sistematika Penulisan ... 3

BAB II DASAR TEORI 2.1 Augmented reality ... 5

2.1.1 Teknik Display Augmented reality ... 5

2.1.2 Penggunaan Augmented reality ... 8

2.2 Pemodelan Tiga Dimensi (3D) ... 10

2.2.1 Definisi Obyek 3 Dimensi ... 10

2.2.2 Konsep Dasar Pemodelan 3 Dimensi ... 11

2.3 Aplikasi Berbasis Web ... 13

2.3.1 Flash Develop ... 13

2.3.2 Adobe Flex ... 14

2.3.3 Action Script ... 15

(8)

viii

2.4 Library Augmented Reality pada Flash ... 17

2.4.1 FLARToolKit ... 17 2.4.2 Away3D ... 21 2.4.3 FLARManager ... 21 2.4.4 DAE Format ... 22 2.4.5 Marker ... 22 2.5 Lingkungan Multi-Marker ... 22

BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Analisa Masalah ... 24

3.1.1 Alur Perancangan Tugas Akhir ... 24

3.1.2 Inisialisasi ... 25 3.1.3 Inisialisasi Model 3D ... 25 3.1.4 Inisialisasi FLARManager ... 26 3.1.5 Inisialisasi Engine 3D ... 26 3.1.6 Tracking Marker ... 26 3.1.7 Rendering Obyek 3D ... 27 3.1.8 Kebutuhan Fungsional ... 27 3.2 Perancangan Sistem ... 27

3.2.1 Desain Interaksi Multi-Marker dan Occlusion ... 28

3.2.2 Desain Interface Web ... 34

3.2.3 Perancangan dan Pembuatan Marker ... 36

3.2.4 Desain Interface Multi-Marker ... 38

BAB IV IMPLEMENTASI DAN PENGUJIAN 4.1 Implementasi ... 40

4.1.1 Pembuatan Obyek Marker ... 40

4.1.2 Pembuatan Obyek Tiga Dimensi (3D) ... 43

4.1.3 Pembuatan Antarmuka Aplikasi ... 45

4.1.4 Pembuatan Desain Web ... 46

4.1.5 Implementasi Aplikasi Augmented Reality ... 49

4.1.6 Interaksi Multi-Marker Augmented Reality ... 54

(9)

ix

4.2 Pengujian ... 62

4.2.1 Lingkungan Uji Coba ... 63

4.2.2 Uji Coba Sistem ... 63

4.3 Hasil Analisis Multi-Marker dengan Occlusion Detection ... 73

BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan ... 75

5.2 Saran ... 75

DAFTAR PUSTAKA DAFTAR LAMPIRAN BIOGRAFI PENULIS

(10)

x

DAFTAR GAMBAR

Gambar 2.1 : Pembentukan citra untuk display augmneted reality ... 6

Gambar 2.2 : Contoh see-through HMD, dibuat oleh Hughes Electronics .... 7

Gambar 2.3 : Contoh Augmneted Reality dengan handphone ... 8

Gambar 2.4 : Koordinat 3 dimensi ... 10

Gambar 2.5 : Occlusion yang terjadi karena interaksi antar obyek (a) None (b) Proximity (c) Intersection (d) Containment………. 15

Gambar 2.6 : (a) Terjadi Event (b) Tidak terjadi Event ... 16

Gambar 2.7 : Pipeline FLARToolkit ... 18

Gambar 2.8 : Perbandingan antara image ideal dan image yang disebabkan oleh faktor distorsi ... 18

Gambar 2.9 : Hubungan antara koordinat marker dengan koordinat kamera 20

Gambar 3.1 : Alur perancangan sistem ... 28

Gambar 3.2 : Proses interaksi multi-marker dan occlusion ... 29

Gambar 3.3 : Use Case sistem ... 30

Gambar 3.4 : Diagram Activity tanpa occlusion ... 31

Gambar 3.5 : Diagram Activity dengan occlusion ... 32

Gambar 3.6 : Diagram Sequence dengan occlusion ... 33

Gambar 3.7 : Desain interface web ... 34

Gambar 3.8 : Diagram interaksi user pada web AR ... 34

Gambar 3.9 : Proses kompilasi pada web AR ... 34

Gambar 3.10 : Contoh marker ... 34

Gambar 3.11 : Contoh marker yang kurang baik i) simetris horizontal, vertical, diagonal. ii) simetris diagonal. iii) simetris horizontal dan vertical ... 38

(11)

xi

Gambar 3.12 : Interface Muli-Marker ... 39

Gambar 4.1 : Desain marker pada aplikasi corel draw ... 40

Gambar 4.2 : Kart marker ... 41

Gambar 4.3 : Capture marker / Tracking gambar ... 42

Gambar 4.4 : Penyimpanan file pattern dan JPEG ... 42

Gambar 4.5 : Pemodelan mobil menggunakan 3DS MAX 9 ... 43

Gambar 4.6 : Proses export .3ds ke *.fbx ... 44

Gambar 4.7 : Proses export .fbx ke *.DAE ... 45

Gambar 4.8 : Perancangan Antarmuka awal Aplikasi ... 46

Gambar 4.9 : Menu Utama Web AR ... 47

Gambar 4.10 : Menu Panduan AR ... 47

Gambar 4.11 : Menu Kategori Mobil ... 48

Gambar 4.12 : Menu Profil ... 49

Gambar 4.13 : Sistem koordinat lingkungan AR ... 62

Gambar 4.14 : Marker pada Jarak Terdekat ... 64

Gambar 4.15 : Marker pada Jarak Jauh ... 64

Gambar 4.16 : Marker pada cahaya yang gelap ... 65

Gambar 4.17 : Marker pada cahaya yang sedang ... 65

Gambar 4.18 : Marker pada cahaya terang ... 66

Gambar 4.19 : Marker pada cahaya yang terlalu terang ... 66

Gambar 4.20 : Tampilan obyek dan warna pertama ... 71

Gambar 4.21 : Tampilan obyek dan warna kedua ... 72

Gambar 4.22 : Tampilan obyek dan warna ketiga ... 72

(12)

xii

DAFTAR TABEL

Tabel 4.1: Pengujian kemiringan 900 ... 67

Tabel 4.2: Pengujian kemiringan 600 ... 68

(13)

xxix

DAFTAR PUSTAKA

[1] Danto, Walesa. 2010. “Analisis Metode Occlusion Based pada Augmented

Reality”. Institut Teknologi Telkom, Bandung.

[2] Andriyadi, Anggi. 2010. ”Tutorial Memasukkan Tekstur Objek 3D di

Augmented Reality”

[3] Gorbala, Brega. Hariadi, Mochamad. 2010. “Aplikasi Augmented Reality

Untuk Katalog Penjualan Rumah”

[4] Rino, Anwar. 2012. “Desain Rumah Interaktif Virtual 3 Dimensi

Menggunakan Teknologi Multi Touch Marker Augmented reality”

[5] Darussalam, Muhammad. 2010. “Deteksi Berbasis Marker untuk

Mengambil (Capture) Gambar”.

[6] Zulkarnaen, Risky. 2005. “Perancangan Aplikasi Viewer Model 3D

Interaktif Berbasis Web dengan Teknologi Augmented Reality”.

Universitas Sumatra Utara, Medan.

[7] Mohammad, Fathah. Facebook Interview. November 2012.

[8] http://blog.tartiflop.com/2008/11/first-steps-in-away3d-part-2-animation/, di akses November 2012.

[9] http://revalis.blogspot.com/2010/11/augmented-reality-with-away3d-and.html, di akses November 2012.

[10] http://harsanalif.wordpress.com/2009/05/30/beginning-flash-3d-with-away3d/, di akses Oktober 2012.

[11] http://abiyasa.com/blog/2011/08/12/setting-up-flashdevelop-4-and-away3d-4/, di akses November 2012.

[12] http://www.webdesignermag.co.uk/tutorials/get-started-with-ar/3/, di akses November 2012.

[13] http://words.transmote.com/wp/flarmanager/inside-flarmanager/loading-collada-models/, di akses Oktober 2012.