Implementasi Augmented Reality Pada Perancangan Sistem Katalog Digiprocreative Berbasis Android

IMPLEMENTASI

AUGMENTED REALITY

PADA PERANCANGAN SISTEM

KATALOG DIGIPROCREATIVE

BERBASIS ANDROID

SKRIPSI

MARCO KARIM SOLIN

091401033

PROGRAM STUDI S1 ILMU KOMPUTER

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGIINFORMASI

UNIVERSITAS SUMATERA UTARA

MEDAN

2014

IMPLEMENTASI AUGMENTED REALITY PADA PERANCANGAN SISTEM KATALOG DIGIPROCREATIVE BERBASIS ANDROID

SKRIPSI

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar Sarjana Komputer

MARCO KARIM SOLIN 091401033

PROGRAM STUDI S1 ILMU KOMPUTER

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA

MEDAN 2014

iii

PERSETUJUAN

Judul : IMPLEMENTASI AUGMENTED REALITY PADA PERANCANGAN SISTEM KATALOG DIGIPROCREATIVE BERBASIS ANDROID

Kategori : SKRIPSI

Nama : MARCO KARIM SOLIN

NomorIndukMahasiswa : 091401033

Program Studi : SARJANA (S1) ILMU KOMPUTER Departemen : ILMU KOMPUTER

Fakultas : FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI (FASILKOM-TI) UNIVERSITAS SUMATERA UTARA

Diluluskan di Medan, Juli 2014 Komisi Pembimbing :

Pembimbing 2 Pembimbing 1

Amer Sharif, S.Si, M.Kom Ade Candra, ST, M.Kom

NIP.- NIP.197909042009121002

Diketahui/Disetujui oleh

Program Studi S1 IlmuKomputer Ketua,

Dr. Poltak Sihombing, M.Kom NIP. 196203171991031001

iv

PERNYATAAN

IMPLEMENTASI AUGMENTED REALITY PADA PERANCANGAN SISTEM KATALOG DIGIPROCREATIVE BERBASIS ANDROID

SKRIPSI

Saya mengakui bahwa skripsi ini adalah hasil kerja saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juli 2014

Marco Karim Solin NIM 091401033

iv

PENGHARGAAN

Segala puji dan syukur penulis ucapkan kepada Allah SWT yang senantiasa melimpahkan rahmat dan karunia-Nya sehingga skripsi ini dapat diselesaikan.

Ucapan terima kasih penulis sampaikan kepada semua pihak yang telah membantu penulis dalam menyelesaikan skripsi ini baik secara langsung maupun tidak langsung. Pada kesempatan ini penulis ingin mengucapkan terima kasih yang sebesar-besarnya kepada :

1. Bapak Ade Candra, ST, M.Kom selaku Dosen Pembimbing I yang telah memberikan bimbingan, saran dan masukan kepada penulis dalam pengerjaan skripsi ini.

2. Bapak Amer Sharif, S.Si, M.Kom selaku Dosen Pembimbing II yang telah memberikan bimbingan, saran dan masukan kepada penulis dalam pengerjaan skripsi ini.

3. Bapak Dr. Poltak Sihombing, M.Kom selaku Ketua Program Studi Ilmu Komputer Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara serta Dosen Pembanding I dan yang telah memberikan kritik dan saran dalam penyempurnaan skripsi ini.

4. Ibu Dian Rachmawati, S.Si, M.Kom selaku Dosen Pembanding II yang telah memberikan kritik dan saran dalam penyempurnaan skripsi ini. 5. Ibu Maya Silvi Lydia, B.Sc, M.Sc selaku Sekretaris Program Studi

Ilmu Komputer, Dekan dan Pembantu Dekan Fakultas Ilmu Komputer dan Teknologi Informasi, semua dosen dan semua pegawai di Program Studi S1 Ilmu Komputer Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Sumatera Utara.

6. Ayahanda Anjur Solin dan Ibunda Mariam Siregar tercinta yang telah memberikan doa, motivasi, perhatian serta kasih sayang yang tulus serta pengorbanan yang tidak ternilai harganya.

7. Kakak penulis yang tersayang Santi Mawati Solin, serta kepada seluruh keluarga besar penulis yang telah memberikan doa, dukungan dan perhatiannya kepada penulis.

v 8. Widya Karolina Sembiring, S.Kom yang telah memberikan doa,

semangat, dukungan, saran dan perhatiannya kepada penulis.

9. Teman-teman seperjuangan dari grup A.R.T (Augmented Reality Team) secara khusus Febrian M Fajar, Andria K. Wahyudi, Zulfahmi Eridinal, Mario Fernando Rentor, Muhammad Gyan M, yang telah memberikan masukan-masukan dalam menyelesaikan skripsi ini. 10.Teman-teman seperjuangan mahasiswa S1-Ilmu Komputer stambuk

2009 secara khusus Tedja Mukti Raharja, Ismail Fata Lubis, yang telah memberikan semangat dan menjadi teman diskusi penulis dalam menyelesaikan skripsi ini.

11.Semua pihak yang terlibat langsung ataupun tidak langsung yang tidak dapat penulis ucapkan satu per satu yang telah membantu penyelesaian skripsi ini.

Penulis menyadari bahwa skripsi ini masih terdapat kekurangan. Oleh karena itu, kepada pembaca agar kiranya memberikan kritik dan saran yang bersifat membangun demi kesempurnaan skripsi ini. Sehingga dapat bermanfaat bagi kita semuanya.

Medan, Mei 2014 Penulis

vii

ABSTRAK

Penjualan pakaian merupakan salah satu lahan bisnis yang sangat berkembang saat ini. Untuk mendapatkan pelanggan dan keuntungan yang banyak dibutuhkan strategi penjualan yang baik mulai dari segi pelayanan hingga sistem penjualan. Sistem katalog merupakan salah satu pelayanan untuk mempermudah konsumen dalam memilih barang yang diinginkan. Teknologi

augmented reality merupakan salah satu cara untuk membuat sistem katalog menjadi lebih menarik. Augmented Reality merupakan penggabungan benda-benda nyata dan maya di lingkungan nyata, berjalan secara interaktif dalam waktu nyata, dan terdapat integrasi antarbenda dalam tiga dimensi. Pada penelitian ini, metode yang digunakan adalah Natural Features Tracking. Hasil penelitian menunjukkan bahwa setiap marker yang dideteksi oleh kamera menampilkan objek baju 3 dimensi sesuai dengan objek aslinya. Dengan adanya sistem katalog yang menggunakan teknologi augmented reality ini, akan memudahkan konsumen dalam menentukan pilihan untuk membeli baju yang diinginkan tanpa harus pergi ke lokasi pembelian.

viii

ABSTRACT

Sales of clothing is one of the highly developed business area at this time. To get a lot of customers and profits, it takes a good sales strategy, start in terms of services to the sales system. Catalog system is one of the services to facilitate customers to select the desired item. Augmented Reality is one way to make the system more attractive catalog. Augmented Reality is the incorporation of real objects and the virtual in the real environment, runs interactively in real time, and there is integration between objects in three dimensions. In this study, the method used is Natural Features Tracking. The results showed that each marker is detected by the camera, display 3-dimensional objects clothes according to the original object. With the catalog system that uses augmented reality technology, will enable consumers to make a choice to buy the clothes you want without having to go to the location of purchase.

ix

DAFTAR ISI

Halaman

Persetujuan iii

Pernyataan iv

Penghargaan v

Abstrak vii

Abstract viii

Daftar Isi ix

Daftar Tabel xi

Daftar Gambar xii

Bab 1 Pendahuluan 1

1.1 Latar Belakang 1

1.2 Rumusan Masalah 3

1.3 Batasan Masalah 3

1.4 Tujuan Penelitian 4

1.5 Manfaat Penelitian 4

1.6 Metode Penelitian 4

1.7 Sistematika Penulisan 5

Bab 2 Landasan Teori 6

2.1 Augmented Reality 6

2.1.1 Marker 8

2.1.2 Vuforia Qualcomm Augmented Reality 10 2.1.3 Natural Features Tracking 13 2.1.4 Qualcomm Company Augmented Reality (QCAR) 14 2.1.4.1 QCAR API Reference 14

2.2 Android 15

2.3 Objek 3 Dimensi 17

Bab 3 Analisis dan Perancangan Sistem 19

3.1 Analisis Sistem 19

3.1.1 Analisis Masalah 19 3.1.2 Analisis Persyaratan 20 3.1.2.1 Persyaratan Fungsional 20 3.1.2.2 Persyaratan Non-Fungsional 21

3.2 Pemodelan Sistem 21

3.2.1 Use Case Diagram 21 3.2.2 Activity Diagram 22

x 3.2.3 Sequence Diagram 23

3.2.4 Class Diagram 24

3.3 Flowchart 25

3.3.1 Flowchart Umum Sistem 25 3.3.2 Flowchart Identifikasi Marker 27

3.4 PerancanganAntar Muka 28

3.4.1 FormCover 28

3.4.2 Form Menu Utama 29

3.4.3 FormLoading 30

Bab 4 Implementasi dan Pengujian 32

4.1 Implementasi Sistem 32

4.1.1 Menampilkan interface awal 32 4.1.2 Registrasi Marker 33 4.1.3 Implementasi Natural Features Tracking 39

4.2 Pengujian Sistem 40

4.2.1 Spesifikasi Perangkat Keras Smartphone 40 4.2.2 Tampilan Halaman Cover 40 4.2.3 Tampilan Menu Utama 41 4.2.4 Pengujian Identifikasi Marker Pertama 42 4.2.5 Pengujian Identifikasi Marker Kedua 44

Bab 5 Kesimpulan 46

5.1 Kesimpulan 46

5.2 Saran 46

Daftar Pustaka 47

Lampiran 49

xi

DAFTAR TABEL

Halaman Tabel 3.1 Spesifikasi Use Case Mendeteksi Marker 22 Tabel 3.2 Rincian Rancangan Interface Form Cover 29 Tabel 3.3 Rincian Rancangan Interface Form Menu Utama 30 Tabel 3.4 Rincian Rancangan Interface Form Proses Loading 31

xii

DAFTAR GAMBAR

Halaman Gambar 2.1 Desain Antar Muka Aplikasi Perkusi AR 8

Gambar 2.2 Contoh Marker 10

Gambar 2.3 Hasil Augmentasi Objek 3D Menggunakan Vuforia 10 Gambar 2.4 Arsitektur Library QCAR SDK 11 Gambar 3.1 Diagram Ishikawa Untuk Analisis Masalah 20

Gambar 3.2 Use Case Diagram 21

Gambar 3.3 Activity Diagram 23

Gambar 3.4 Sequence Diagram 24

Gambar 3.5 Class Diagram 25

Gambar 3.6 Flowchart Umum Sistem 26

Gambar 3.7 Flowchart Proses Identifikasi Marker 27

Gambar 3.8 InterfaceForm Cover 28

Gambar 3.9 InterfaceForm Menu Utama 29

Gambar 3.10 InterfaceForm Proses Loading 31

Gambar 4.1 Tampilan Splashscreen 32

Gambar 4.2 CodingSplashscreen menggunakan XML 33

Gambar 4.3 Form Login 34

Gambar 4.4 Form Target Manager 34

Gambar 4.5 Form Create Database 34

Gambar 4.6 Hasil Create Database 35

Gambar 4.7 Form Add New Target 35

Gambar 4.8 Hasil Add Target 36

Gambar 4.9 FormDownload Marker 37

Gambar 4.10 Coding Load Dataset 37

Gambar 4.11 Marker Pertama 38

Gambar 4.12 Marker Kedua 38

Gambar 4.13 Coding Inisialisasi Tracking 39

Gambar 4.14Halaman Cover 41

Gambar 4.15Halaman Menu Utama 42

Gambar 4.16Tampilan Depan dari Marker Pertama 43 Gambar 4.17Tampilan Samping dari Marker Pertama 43 Gambar 4.18 Tampilan Depan dari Marker Kedua 44 Gambar 4.19 Tampilan Samping dari Marker Kedua 45

vii

ABSTRAK

Penjualan pakaian merupakan salah satu lahan bisnis yang sangat berkembang saat ini. Untuk mendapatkan pelanggan dan keuntungan yang banyak dibutuhkan strategi penjualan yang baik mulai dari segi pelayanan hingga sistem penjualan. Sistem katalog merupakan salah satu pelayanan untuk mempermudah konsumen dalam memilih barang yang diinginkan. Teknologi

augmented reality merupakan salah satu cara untuk membuat sistem katalog menjadi lebih menarik. Augmented Reality merupakan penggabungan benda-benda nyata dan maya di lingkungan nyata, berjalan secara interaktif dalam waktu nyata, dan terdapat integrasi antarbenda dalam tiga dimensi. Pada penelitian ini, metode yang digunakan adalah Natural Features Tracking. Hasil penelitian menunjukkan bahwa setiap marker yang dideteksi oleh kamera menampilkan objek baju 3 dimensi sesuai dengan objek aslinya. Dengan adanya sistem katalog yang menggunakan teknologi augmented reality ini, akan memudahkan konsumen dalam menentukan pilihan untuk membeli baju yang diinginkan tanpa harus pergi ke lokasi pembelian.

viii

ABSTRACT

Sales of clothing is one of the highly developed business area at this time. To get a lot of customers and profits, it takes a good sales strategy, start in terms of services to the sales system. Catalog system is one of the services to facilitate customers to select the desired item. Augmented Reality is one way to make the system more attractive catalog. Augmented Reality is the incorporation of real objects and the virtual in the real environment, runs interactively in real time, and there is integration between objects in three dimensions. In this study, the method used is Natural Features Tracking. The results showed that each marker is detected by the camera, display 3-dimensional objects clothes according to the original object. With the catalog system that uses augmented reality technology, will enable consumers to make a choice to buy the clothes you want without having to go to the location of purchase.

2

BAB 1 PENDAHULUAN

1.1 Latar Belakang

Penjualan pakaian merupakan salah satu lahan bisnis yang sangat berkembang saat ini. Hal ini dapat dibuktikan dengan semakin banyaknya toko-toko yang menjual berbagai jenis pakaian. Untuk mendapatkan pelanggan dan keuntungan yang banyak dibutuhkan strategi penjualan yang baik mulai dari segi pelayanan hingga sistem penjualan. Sistem katalog merupakan salah satu pelayanan untuk mempermudah pelanggan dalam memilih barang yang diinginkan. Untuk membuat sistem katalog lebih menarik dapat digunakan teknologi Augmented Reality.

Augmented Reality merupakan penggabungan benda-benda nyata dan maya di lingkungan nyata, berjalan secara interaktif dalam waktu nyata, dan terdapat integrasi antarbenda dalam tiga dimensi. AR adalah cara baru dan menyenangkan dimana manusia berinteraksi dengan komputer, karena dapat membawa objek virtual ke lingkungan pengguna, memberikan pengalaman visualisasi yang alami dan menyenangkan. Tidak seperti realitas maya yang sepenuhnya menggantikan kenyataan, namun Augmented Reality hanya menambahkan atau melengkapi kenyataan dengan library QCAR (Qualcomm Company Augmented Reality) API dan marker sehingga citra atau objek dalam bentuk 3 dimensi akan muncul pada kamera android[8].

Untuk mencitrakan suatu gambar tiga dimensi, sistem Augmented Reality

terlebih dahulu harus melakukan penglihatan atau vision terhadap lingkungan yang padanya akan dicitrakan objek virtual. Kemudian, dilakukanlah proses tracking terhadap objek spesifik atau yang disebut marker, yang menentukan letak citraan objek virtual tersebut. Lalu, objek tersebut akan dikenali, atau dianalisis. Dalam penelitian ini akan menggunakan markerless sebagai marker karena

2 dengan markerless tidak perlu menggunakan marker konvensional berbentuk hitam-putih melainkan menggunakan marker berwarna atau bergambar tanpa perlu bingkai hitam disekeliling markernya. Untuk membuat marker pada Vuforia, harus mendaftarkan terlebih dahulu objek yang akan dijadikan sebagai marker ke webiste Vuforia. Hal ini dilakukan karena belum tersedia tools untuk membuat marker sendiri pada ide eclipse atau unity[8].

Untuk melakukan proses tracking digunakan metode Natural Features Tracking. Dalam metode ini informasi yang diperlukan untuk tujuan pelacakan dapat diperoleh dengan cara optical-flow berbasis pencocokan template atau korespondensi fitur. Optical-flow atau aliran optik adalah pola gerakan jelas sebuah benda, permukaan, dan tepi dalam adegan visual yang disebabkan oleh gerakan relatif antara pengamat (mata atau kamera) dan adegan. Korespondensi fitur bekerja lebih baik dan lebih efektif dari pada pencocokan template karena mereka bergantung pada pencocokan fitur lokal.

Pada penelitian Zaki, Achmad, Universitas Pamulang dengan judul “Perancangan dan Implementasi Katalog Interaktif untuk Media Penjualan Furniture Berbasis Teknologi Augmented Reality”. Dalam implementasinya aplikasi dibuat untuk menggantikan katalog yang masih berbasis kertas dengan katalog yang lebih interaktif dengan menggunakan teknologi Augmented Reality

berbasis android[14].

Pada Penelitian Rohmah, Ulfah, Universitas Gunadarma Depok dengan judul skripsinya “Aplikasi Augmented Reality Tata Surya (Semua Planet Mengelilingi Matahari) Menggunakan Mobile Android”. Dalam implementasinya aplikasi dibuat untuk mempermudah masyarakat dalam mempelajari ilmu tata surya tanpa harus repot menggunakan komputer atau pun buku. Aplikasi ini dibuat menggunakan tekologi Augmented Reality dan Unity Extention v1.0.0.[11].

Pada Penelitian Fauzi Putra, Fahreza, dkk, Politeknik Caltex Riau dengan judul jurnalnya “Aplikasi Pembelajaran Metamorfosis Berbasis Android Augmented Reality”. Dalam implementasinya aplikasi dibuat untuk memberikan

2 visualisasi yang lebih interaktif dibandingkan dengan gambar dua dimensi yang biasanya digunakan untuk pembelajaran peserta didik. Pada aplikasi ini terdapat tiga buah scene metamorfosis yaitu, metamorfosis capung, katak dan kupu-kupu yang pada masing-masing fase digambarkan dalam bentuk objek tiga dimensi[6].

Berdasarkan latar belakang yang telah penulis uraikan diatas, maka akan dilakukan penelitian dengan judul “Implementasi Augmented Reality Pada Perancangan Sistem Katalog Digiprocreative Berbasis Android”. Penelitian akan dilakukan di perusahaan Digiprocreative yang beralamat di Jl. Arief Rahman Hakim No.100 Medan Sumatera Utara.

1.2 Rumusan Masalah

Yang menjadi rumusan masalah dalam penelitian ini adalah bagaimana membuat suatu aplikasi katalog baju yang lebih interaktif bagi konsumen dengan teknologi

Augmented Reality.

1.3 Batasan Masalah

Untuk fokusnya penelitian ini, penulis memberi batasan sebagai berikut : 1. Metode yang digunakan adalah Natural Features Tracking.

2. Output yang dihasilkan hanya 2 objek baju 3D.

3. Marker yang digunakan adalah markerless berupa kertas Design Katalog. 4. Library yang digunakan adalah library QCAR API.

5. Bahasa pemrograman yang akan digunakan adalah bahasa pemrograman C++ dan Java, dimana C++ digunakan untuk pemrograman sistem dan Java digunakan untuk UI(User Interface).

6. Software yang digunakan untuk mendukung pembuatan aplikasi ini adalah Blender untuk membuat objek 3 dimensi, Photoshop untuk membuat design

marker, Perl untuk meng-convert file .obj menjadi file header ( file .h) dan Cygwin Terminal untuk meng-compile program.

7. Sistem yang dibangun adalah berbasis Android.

2

Tujuan dari penelitian ini adalah untuk membangun suatu aplikasi katalog baju menggunakan teknologi Augmented Reality berbasis Android.

1.5 Manfaat Penelitian

Manfaat dari penelitian ini diharapkan dapat mempermudah dalam pemasaran produk serta meningkatkan penjualan dari produk-produk Digiprocreative.

1.6 Metode Penelitian

Metode penelitian yang dilakukan dalam penelitian ini adalah : 1. Studi Literatur

Dilakukan peninjauan terhadap buku, jurnal, artikel, maupun makalah yang membahas tentang Augmented Reality berbasis Android dan semua teori yang berkaitan dengan Augmented Reality.

2. Analisis dan Perancangan

Masalah-masalah yang ada dianalisis sehingga dapat dilakukan suatu perancangan dengan baik, seperti pembuatan flowchart, UI(User Interface), UML dan perancangan sistem katalog menggunakan Augmented Reality. 3. Implementasi

Augmented Reality diimplementasikan sebagai aplikasi untuk memunculkan objek baju 3D dari marker yang berupa katalog.

4. Pengujian

Dilakukan pengujian terhadap keberhasilan proses memunculkan objek 3D dari hasil pelacakan marker katalog.

5. Dokumentasi

Selama proses analisis dan perancangan sistem hingga pengujian, dilakukan pendokumentasian yang berupa laporan skripsi.

2

1.7 Sistematika Penulisan

Untuk membuat penulisan lebih terstruktur, maka penulisan ini dibagi menjadi lima bab, yaitu :

BAB 1 : PENDAHULUAN

Pada bab ini berisi penjelasan mengenai latar belakang masalah, perumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, metodeologi penelitian dan sistematika penulisan.

BAB 2 : LANDASAN TEORI

Pada bab ini berisi penjelasan mengenai teori-teori yang terkait dengan penelitian ini diantaranya adalah teori Augmented Reality, Natural Features Tracking, dan teori pendukung lainnya.

BAB 3 : ANALISIS DAN PERANCANGAN

Pada bab ini berisi penjelasan tentang analisis masalah yang dibangun dalam sistem dan menganalisis tentang hal-hal yang dibutuhkan dalam membangun sistem ini, kemudian dilanjutkan dengan tahapan perancangan sistem yang berupa perancangan interface sistem.

BAB 4 : IMPLEMENTASI DAN PENGUJIAN

Pada bab ini berisi tentang implementasi sistem yang berdasarkan tahapan perancangan dengan menggunakan bahasa pemrograman Java dan C++. Kemudian dilanjutkan dengan tahapan pengujian sistem untuk menguji apakah sistem sudah berjalan sesuai dengan perancangan.

BAB 5 : KESIMPULAN DAN SARAN

Pada bab ini berisi kesimpulan yang diperoleh dalam penelitian dan saran yang diberikan untuk pengembangan lebih lanjut.

22

BAB 2

LANDASAN TEORI

2.1 Augmented Reality

Augmented Reality (AR) adalah kombinasi antara dunia maya (virtual) dan dunia nyata (real) yang dibuat oleh komputer. Obyek virtual dapat berupa teks, animasi, model 3D atau video yang digabungkan dengan lingkungan sebenarnya sehingga pengguna merasakan obyek virtual berada dilingkungannya. AR adalah cara baru dan menyenangkan dimana manusia berinteraksi dengan komputer, karena dapat membawa obyek virtual ke lingkungan pengguna, memberikan pengalaman visualisasi yang alami dan menyenangkan.Augmented Reality (AR) merupakan salah satu cabang di bidang teknologi yang belum terlalu lama, namun memiliki perkembangan yang sangat cepat. Perkembangan Augmented Reality pada industri

mobile phone juga mempunyai perkembangan yang paling cepat[7].

Menurut penjelasan Haller, Billinghurst, dan Thomas (2007), riset Augmented Reality bertujuan untuk mengembangkan teknologi yang memperbolehkan penggabungan secara real-time terhadap digital content yang dibuat oleh komputer dengan dunia nyata. Augmented Reality memperbolehkan pengguna melihat objek maya tiga dimensi yang diproyeksikan terhadap dunia nyata. (Emerging Technologies of Augmented Reality: Interface and Design)[8].

Ronald T.Azuma (1997) mendefinisikan augmented reality sebagai penggabungan benda-benda nyata dan maya di lingkungan nyata, berjalan secara interaktif dalam waktu nyata, dan terdapat integrasi antar benda dalam tiga dimensi, yaitu benda maya terintegrasi dalam dunia nyata[2].

22

Penggabungan benda nyata dan maya dimungkinkan dengan teknologi tampilan yang sesuai, interaktivitas dimungkinkan melalui perangkat-perangkat input tertentu, dan integrasi yang baik memerlukan penjejakan yang efektif. Selain menambahkan benda maya dalam lingkungan nyata, realitas tertambah juga berpotensi menghilangkan benda-benda yang sudah ada. Menambah sebuah lapisan gambar maya dimungkinkan untuk menghilangkan atau menyembunyikan lingkungan nyata dari pandangan pengguna. Misalnya, untuk menyembunyikan sebuah meja dalam lingkungan nyata, perlu digambarkan lapisan representasi tembok dan lantai kosong yang diletakkan di atas gambar meja nyata, sehingga menutupi meja nyata dari pandangan pengguna[1].

Menurut penjelasan Lester Madden (2011), definisi Augmented Reality

sebagai suatu teknologi yaitu:

1. Kombinasi dunia nyata dengan komputer grafis. 2. Memberikan interaksi dengan objek secara real-time. 3. Tracks objek secara real-time.

4. Memberikan pengenalan gambar atau objek. 5. Memberikan konteks real-time atau data[9].

Ada dua langkah dalam proses aplikasi Augmented Reality, yaitu:

1. Aplikasi perlu menentukan keadaan dunia nyata saat ini dan menentukan keadaan dunia maya saat ini.

2. Aplikasi perlu untuk menampilkan dunia maya dalam registration (pendaftaran) dengan dunia nyata dengan cara yang akan menyebabkan peserta untuk merasakan elemen dunia maya sebagai bagian dari dunia nyatanya dan kemudian kembali ke langkah 1 untuk beralih ke langkah selanjutnya[4].

Menurut Saphiro dan Stockman (2001, p530-p532) Pembuatan sistem Augmented Reality membutuhkan :

22 2. Korespondensi antara dunia nyata dengan model 3D melalui kalibrasi.

3. Tracking digunakan menentukan sudut pandangan pengguna terhadap dunia nyata. 4. Real-Time Display yang digabungkan dengan citra asli dan juga grafik komputer

yang dibuat berdasarkan model.

5. Waktu respon terhadap gerakan dan akurasi antara gambar dan grafik sangat mempengaruhi keefektifan sistem[8].

Gambar 2.1 Desain Antar Muka Aplikasi Perkusi AR (Sumber: [5])

2.1.1 Marker

Marker merupakan wadah untuk menampilkan objek 3D yang akan kita munculkan. Ada beberapa jenis marker yang sudah berkembang hingga saat ini seperti Marker Based Tracking dan Markerless.

1. Marker Based Tracking

Marker Based Tracking merupakan ilustrasi hitam dan putih persegi dengan batas hitam tebal dan latar belakang putih. Komputer akan mengenali posisi dan orientasi marker dan menciptakan dunia virtual 3D yaitu titik (0,0,0) dan 3 sumbu yaitu X,Y,Z.

22

Marker Based Tracking ini sudah lama dikembangkan sejak 1980-an dan pada awal 1990-an mulai dikembangkan untuk penggunaan Augmented Reality.

2. Markerless

Salah satu metode Augmented Reality yang saat ini sedang berkembang adalah metode “Markerless Augmented Reality”, dengan metode ini pengguna tidak perlu lagi menggunakan sebuah marker untuk menampilkan elemen-elemen digital. Seperti yang saat ini dikembangkan oleh perusahaan Augmented Reality terbesar di dunia Total Immersion, mereka telah membuat berbagai macam teknik Markerless Tracking sebagai teknologi andalan mereka, seperti Face Tracking, 3D Object Tracking, dan Motion Tracking[15].

Dalam penelitian ini penulis menggunakan markerless sebagai marker untuk menampilkan objek 3D. Untuk membuat marker tersebut pada Vuforia, kita harus mendaftarkan terlebih dahulu objek yang akan dijadikan sebagai marker ke website

Vuforia. Hal ini dilakukan karena belum tersedia tool untuk membuat marker sendiri pada ide eclipse atau unity. Langkah-langkah pendaftaran marker adalah sebagai berikut:

1. Login ke vuforia 2. Klik target manager

3. Jika database kita belum ada, maka klik terlebih dahulu create database.

4. Klik database yang telah kita buat tadi untuk menambahkan objek kedalamnya.

5. Pilih add target

6. Isi setiap field pada form add new target sesuai dengan ketentuan yang ada. 7. Klik add.

8. Selesai.

Untuk mendownload objek yang sudah kita daftarkan sebagai marker dapat dilakukan dengan cara:

22 1. Centang objek yang akan digunakan sebagai marker.

2. Klik download selected targets.

3. Pada form download selected target pilih sesuai dengan yang dibutuhkan. 4. Klik create.

5. Tunggu beberapa saat hingga proses pembuatan database untuk objek yang dipilih selesai.

Gambar 2.2 Contoh Marker

2.1.2 Vuforia Qualcomm Augmented Reality

Vuforia Qualcomm merupakan library yang digunakan sebagai pendukung adanya Augmented reality pada android. Vuforia menganalisa gambar dengan menggunakan pendeteksi marker dan menghasilkan informasi 3D dari marker yang sudah dideteksi via API. Programmer juga dapat menggunakannya untuk membangun objek 3D virtual pada kamera. Contoh pembuatan objek 3D dengan menggunakan vuforia adalah seperti pada Gambar 2.3 dibawah ini.

22

Gambar 2.3 Hasil Augmentasi Objek 3D Menggunakan Vuforia

Gambar 2.3 adalah pengembangan aplikasi menggunakan platform Qualcomm AR. Platform tersebut terdiri dari 2 komponen diantaranya adalah :

1. Target Management System

Mengizinkan pengembang melakukan upload gambar yang sudah diregistrasi oleh

marker dan kemudian melakukan download target gambar yang akan dimunculkan.

2. QCAR SDK Vuforia

Mengijinkan pengembang untuk melakukan koneksi antara aplikasi yang sudah dibuat dengan library static i.e libQCAR.a pada iOS atau libQCAR.so pada android.

Gambar 2.4 di bawah ini memberikan gambaran umum pembangunan aplikasi dengan Qualcomm AR Platform. Platform ini terdiri dari SDK QCAR dan Target System Management yang dikembangkan pada portal QdevNet. Seorang pengembang meng-upload gambar masukan untuk target yang ingin dilacak dan kemudian men-download sumber daya target, yang dibundel dengan App. SDK QCAR menyediakan sebuah objek yang terbagi - libQCAR.so - yang harus dikaitkan dengan app[5].

22 Vuforia adalah Augmented Reality Software Development Kit (SDK) untuk perangkat mobile yang memungkinkan pembuatan aplikasi Augmented Reality. Dulunya lebih dikenal dengan QCAR (Qualcomm Company Augmented Reality). Ini menggunakan teknologi Computer Vision untuk mengenali dan melacak gambar planar (Target Image) dan objek 3D sederhana, seperti kotak, secara real-time. Vuforia menyediakan Application Programming Interface (API) di C++, Java, Objective-C. SDK mendukung pembangunan untuk IOS dan Android menggunakan Vuforia karena itu kompatibel dengan berbagai perangkat mobile termasuk iPhone(4/4S), iPad, dan ponsel Android dan tablet yang menjalankan Android OS versi 2.2 atau yang lebih besar dan prosesor ARMv6 atau 7 dengan FPU (Floating Point Unit) kemampuan pengolahan. Qualcomm Augmented Reality memberikan beberapa keuntungan seperti :

a. Teknologi computer vision untuk menyelaraskan gambar yang tercetak dan objek 3D.

b. Mendukung beberapa alat development seperti Eclipse, Android, Xcode.

Selain itu, QCAR juga menawarkan development dan distribusi yang gratis. Vuforia SDK memerlukan beberapa komponen penting agar dapat bekerja dengan baik. Komponen tersebut antara lain :

a. Kamera

Kamera dibutuhkan untuk memastikan bahwa setiap frame ditangkap dan diteruskan secara efisien ke tracker. Para developer hanya tinggal memberi tahu kamera kapan mereka mulai menangkap dan berhenti.

b. Image Converter

Mengkonversi format kamera (misalnya YUV12) kedalam format yang dapat dideteksi oleh OpenGL (misalnya RGB565) dan untuk tracking (misalnya

luminance). c. Tracker

Mengandung algoritma computer vision yang dapat mendeteksi dan melacak objek dunia nyata yang ada pada video kamera.

22 d. Video Background Renderer

Me-render gambar dari kamera yang tersimpan di dalam state object. Performa dari

video background renderer sangat bergantung pada device yang digunakan. e. Application Code

Menginisialisai semua komponen di atas dan melakukan tiga tahapan penting dalam

aplication code seperti :

1. Query state object pada target baru yang terdeteksi atau marker. 2. Update logika aplikasi setiap input baru dimasukkan.

3. Render grafis yang ditambahkan (augmented). f. Target Resources

Dibuat menggunakan on-line Target Management System. Assets yang diunduh berisi sebuah konfigurasi xml – config.xml – yang memungkinkan developer untuk mengkonfigurasi beberapa fitur dalam trackable dan binary file yang berisi database trackable[8].

2.1.3 Natural Features Tracking

Qualcomm sebagai salah satu pengembang Augmented Reality melakukan proses pendeteksian marker menggunakan pengenalan pola gambar. Metode yang digunakan dalam QCAR adalah Natural Features Tracking dengan metode FAST Corner Detection yaitu pendeteksian dengan mencari titik-titik (interest point) atau sudut-sudut (corner) pada suatu gambar. Istilah corner dan interest point sering digunakan secara bergantian. Pertama-tama dilakukan pendeteksian tepi (edge), kemudian dilakukan analisa tepi untuk mendapatkan pendeteksian sudut (corner) secara tepat. Algoritma ini kemudian dikembangkan, sehingga deteksi tepi secara eksplisit tidak lagi diperlukan. Misalnya mendeteksi kelengkungan dalam gradient gambar. Pada saat itu juga ternyata bagian-bagian yang tidak berbentuk sudut (corner) terdeteksi juga sebagai bagian dari gambar, misalnya titik-titik kecil pada latar belakang gelap mungkin terdeteksi[8].

22

Feature tracking adalah proses untuk menemukan posisi yang sesuai pada gambar berturut-turut ke titik-titik gambar pada gambar pertama. Ukuran korespondensi didasarkan pada kesamaan pada lingkungan gambar jendela ukuran tetap.

Feature tracking merupakan langkah proses awal yang diperlukan dari masalah struktur dari gerak yang menemukan struktur 3D yang diambil dari gambar dari waktu ke waktu. Karena fitur yang cocok adalah satu-satunya informasi awal untuk penglihatan lebih lanjut berbasis inferensi, skema pelacakan berbasis titik konvensional mencoba untuk mencari banyak poin fitur sebanyak mungkin. Kebanyakan skema sebelumnya Natural Feature Tracking telah difokuskan pada deskripsi dan pencocokan fitur antara dua gambar berturut-turut. Metode mereka mengekstrak satu set baru fitur titik dari masing-masing gambar yang baru muncul, bukannya mempertimbangkan fitur yang dicocokkan sebelumnya. Ekstraksi dan pencocokan titik yang baru ditetapkan memakan waktu dan harus dihindari terutama ketika metode ini digunakan untuk aplikasi real-time.

Dalam penglihatan aplikasi berbasis augmented reality tujuan Natural Features Tracking adalah untuk menghitung homograpi antara adegan planar dan gambar yang diproyeksikan. Untuk memastikan adanya pola, harus ada sejumlah besar titik fitur untuk pola planar dan juga jumlah titik fitur yang cukup harus disesuaikan dengan poin dalam gambar yang diproyeksikan. Untuk mengidentifikasi wilayah persegi panjang pola diproyeksikan, homograpi yang dihitung dari titik pasang dicocokkan. Sebuah aplikasi memanfaatkan homograpi untuk layanan lebih lanjut pengolahan tertentu[9].

2.1.4 Qualcomm Company Augmented Reality (QCAR)

Qualcomm Company Augmented Reality (QCAR) merupakan sebuah SDK yang memberikan pengalaman menarik kepada para developer untuk menciptakan AR

22

mobile. Dengan memberikan generasi baru yaitu interaktif 3D, Qualcomm Augmented Reality memberikan beberapa keuntungan, seperti:

a. Teknologi komputer vision untuk menyelaraskan gambar yang tercetak dan object 3D.

b. Mendukung beberapa alat development seperti Eclipse, (AndroidTM), Xcode.

Selain itu, QCAR juga menawarkan development dan distribusi yang gratis[3].

2.1.4.1 QCAR API Reference

API reference berisi informasi tentang hirarki kelas dan fungsi member dari QCAR SDK. Sistem dari QCAR SDK ditampilkan seperti pada gambar 2.4, menyediakan : callbackevent. Contoh : sebuah image baru yang tersedia.

a. High-level access ke perangkat keras. Contoh : Kamera start/ stop. b. MultipleTrackables

1) ImageTargets

2) Multi Targets

3) FrameMarkers

c. Interaksi secara langsung dengan dunia nyata[3].

2.2 Android

Android adalah sebuah sistem operasi untuk perangkat mobile berbasis linux yang mencakup sistem operasi, middleware, dan aplikasi. Android menyediakan platform terbuka bagi para pengembang untuk menciptakan aplikasi mereka. Android merupakan sistem operasi mobile open source dan dapat dimanufaktur untuk dikustomisasi sehingga tidak ada konfigurasi yang pasti mengenai software dan hardware-nya[12].

22 Sejak pertama kali muncul sampai sekarang, Android telah memiliki sejumlah pembaharuan. Pembaharuan ini dilakukan untuk memperbaiki bug dan menambah fitur-fitur yang baru.

Terdapat beberapa versi android yaitu mulai dari versi 1.1 yang dirilis pada 9 Februari 2009, versi 1.5(Cupcake) pada 30 April 2009, versi 1.6(Donut) pada 15 September 2009, versi 2.0/2.1(Eclair) pada 26 Oktober 2009, versi 2.2(Froyo) pada 20 Mei 2010, versi 2.3(Gingerbread) pada 6 Desember 2010, versi 3.0(Honeycomb) pada Februari 2011, hingga versi yang terbaru yaitu versi 4.0(Ice Cram Sandwich) pada 19 Oktober 2011[13].

Versi-versi yang ada pada android yaitu : 1. Android versi 1.1

Pada tanggal 9 Maret 2009, Google merilis Android versi 1.1. Android ini dilengkapi dengan pembaruan estetis pada aplikasi, jam alarm, voice search, pengiriman pesan dengan Gmail, dan pemberitahuan email.

2. Android versi 1.5 (Cupcake)

Pada pertengahan Mei 2009, Google kembali merilis telepon seluler dengan menggunakan Android dan SDK (Software Development Kit). Terdapat beberapa pembaruan termasuk juga penambahan beberapa fitur dalam seluler versi ini, yaitu kemampuan merekam dan menonton video dengan kamera, mengunggah video ke

youtube dan gambar ke Picasa langsung dari telepon, dukungan Bluetooth A2DP, kemampuan terhubung secara otomatis ke headset Bluetooth, animasi layar, dan

keyboard pada layar yang dapat disesuaikan sistem.

3. Android versi 1.6 (Donut)

Donut (versi 1.6) dirilis pada September 2009 dengan menampilkan proses pencarian yang lebih baik dibanding sebelumnya, penggunaan baterai indikator dan kontrol applet VPN. Fitur lainnya adalah galeri yang memungkinkan pengguna untuk memilih foto yang akan dihapus, kamera, camcorder dan galeri yang dintegrasikan,

22 CDMA/EVDO, 802.1x, VPN, Gestures, dan Text-to-speech engine, kemampuan

dial kontak, teknologi text to change speech 18 (tidak tersedia pada semua ponsel, pengadaan resolusi VWGA.

4. Android versi 2.0/2.1 (Eclair)

Pada 3 Desember 2009 kembali diluncurkan ponsel Android dengan versi 2.0/2.1 (Eclair), perubahan yang dilakukan adalah pengoptimalan hardware, peningkatan Google Maps 3.1.2, perubahan User Interface (UI) dengan browser baru dan dukungan HTML5, daftar kontak yang baru, dukungan flash untuk kamera 3,2 MP,

digital Zoom, dan Bluetooth 2.1.

5. Android versi 2.2 (Froyo: Frozen Yoghurt)

Pada 20 Mei 2010, Android versi 2.2 (Froyo) diluncurkan. Perubahan-perubahan umumnya terhadap versi-versi sebelumnya antara lain dukungan Adobe Flash 10.1, kecepatan kinerja dan aplikasi 2 sampai 5 kali lebih cepat, intergrasi V8 JavaScript engine yang dipakai Google Chrome yang mempercepat kemampuan rendering pada

browser, pemasangan aplikasi dalam SD Card, kemampuan WiFi Hotspot portabel, dan kemampuan pembaruan secara otomatis dalam aplikasi Android Market.

6. Android versi 2.3 (Gingerbread)

Pada 6 Desember 2010, Android versi 2.3 (Gingerbread) diluncurkan. Perubahan-perubahan umum yang didapat dari Android versi ini antara lain peningkatan kemampuan permainan (gaming), peningkatan fungsi copy paste, desain 19 ulang layar antar muka (User Interface), dukungan format video VP8 dan WebM, efek audio baru (reverb, equalization, headphone virtualization, dan bass boost),

dukungan kemampuan Near Field Communication (NFC), dan dukungan jumlah kamera yang lebih dari satu.

7. Android versi 3.0/3.1 (Honeycomb)

Android Honeycomb dirancang khusus untuk tablet. Android versi ini mendukung ukuran layar yang lebih besar. User Interface pada Honeycomb juga berbeda karena sudah didesain untuk tablet. Honeycomb juga mendukung multi-processor dan juga

22 akselerasi perangkat keras (hardware) untuk grafis. Tablet pertama yang dibuat dengan menjalankan Honeycomb adalah Motorola Xoom. Perangkat tablet dengan

platform Android 3.0 telah banyak hadir di Indonesia. Perangkat yang pertama muncul bernama Eee Pad Transformer produksi dari Asus yang masuk pasar Indonesia pada Mei 2011.

8. Android versi 4.0 (ICS: Ice Cream Sandwich)

Diumumkan pada tanggal 19 Oktober 2011, membawa fitur Ice Cream Sandwich

untuk smartphone dan menambahkan fitur baru termasuk membuka kunci dengan pengenalan wajah, jaringan data pemantauan penggunaan dan kontrol, terpadu kontak jaringan sosial, perangkat tambahan fotografi, mencari email secara offline, dan berbagi informasi dengan menggunakan NFC. Ponsel pertama yang menggunakan sistem operasi ini adalah Samsung Galxy Nexus.

9. Android versi 4.1 (Jelly Bean)

Android Jelly Bean yang diluncurkan pada acara Google I/O lalu membawa sejumlah keunggulan dan fitur baru. Penambahan baru diantaranya meningkatkan input keyboard, desain baru fitur pencarian, user interface yang baru dan pencarian melalui voice search yang lebih cepat[3].

2.3 Objek 3 Dimensi

Benda 3 dimensi (3D) adalah sebuah objek/ruang yang memiliki panjang, lebar dan tinggi yang memiliki bentuk. 3D tidak hanya digunakan dalam matematika dan fisika saja melainkan dibidang grafis, seni, animasi, komputer dan lain-lain. Konsep tiga dimensi atau 3D menunjukkan sebuah objek atau ruang memiliki tiga dimensi geometris yang terdiri dari: kedalaman, lebar dan tinggi. Contoh tiga dimensi suatu objek/benda adalah bola, piramida atau benda spasial seperti kotak sepatu. Istilah "3D" juga digunakan untuk menunjukkan representasi dalam grafis komputer (digital), dengan cara menghilangkan gambar stereoscopic atau gambar lain dalam

22 pemberian bantuan, dan bahkan efek stereo sederhana, yang secara konstruksi membuat efek 2D (dalam perhitungan proyeksi perspektif, shading).

Karakteristik 3D, mengacu pada tiga dimensi spasial, bahwa 3D menunjukkan suatu titik koordinat Cartesian X, Y dan Z. Penggunaan istilah 3D ini dapat digunakan di berbagai bidang dan sering dikaitkan dengan hal-hal lain seperti spesifikasi kualitatif tambahan (misalnya: grafis tiga dimensi, 3D video, film 3D, kacamata 3D, suara 3D). Istilah ini biasanya digunakan untuk menunjukkan relevansi jangka waktu tiga dimensi suatu objek, dengan gerakan perspektif untuk menjelaskan sebuah "kedalaman" dari gambar, suara, atau pengalaman taktil. Ketidakjelasan istilah ini menentukan penggunaannya dalam beberapa kasus yang tidak jelas juga yaitu penggunaannya tidak hanya pada contoh-contohdi atas melainkan (sering dalam iklan dan media).

Saat ini 3D digambarkan untuk mensimulasikan perhitungan berdasarkan layar proyeksi dua dimensi dan efek tiga-dimensi seperti monitor komputer atau televisi. Perhitungan ini memerlukan beban pengolahan besar sehingga beberapa komputer dan konsol memiliki beberapa tingkat percepatan grafis 3D untuk perangkat yang dikembangkan untuk tujuan ini. Komputer memiliki kartu grafis panggilan/tambahan untuk meningkatkan akselerasi 3D. Perangkat ini dibentuk dengan satu atau lebih prosesor (GPU) yang dirancang khusus untuk mempercepat perhitungan yang melibatkan tiga dimensi gambar yang mereproduksi pada layar dua dimensi dan dengan melepaskan beban pengolahan pada CPU atau Central Processing Unit komputer. Dalam komputasi, model tiga dimensi (angka atau grafis) dibuat tanpa membutuhkan perhitungan yang sangat kompleks, tetapi sangat banyak. 3D dapat direpresentasikan baik oleh prospek dari berbagai arah pada layar dua dimensi (yang membuat istilah "3D" tidak benar, layar dengan hanya dua dimensi), atau pada jenis perangkat atau kacamata film yang timbul dari LCD untuk melihat gambar yang berbeda pada setiap pandangan mata[1].

35

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1 Analisis Sistem

Analisis sistem merupakan fase awal dalam sebuah penelitian. Analisis sistem bertujuan untuk memberikan pemahaman terhadap kebutuhan sistem dan menggambarkan proses-proses yang ada di dalam sistem untuk menghasilkan keluaran yang sesuai dengan kebutuhan user.

3.1.1 Analisis Masalah

Masalah yang akan diselesaikan dengan menggunakan sistem ini adalah menampilkan objek baju 3 dimensi dengan menggunakan teknik Augmented Reality. Metode yang digunakan adalah Natural Features Tracking.

Analisis masalah yang digunakan untuk menampilkan objek 3 dimensi tersebut digambarkan dengan Diagram Ishikawa (fishbone Diagram) berikut ini. Bagian kepala atau segiempat yang berada di sebelah kanan merupakan masalah. Sementara di bagian tulang-tulangnya merupakan penyebab. Diagram Ishikawa dapat dilihat pada Gambar 3.1 berikut.

36

Metode User

Machine/Tools Material

Objek Baju 3D Natural Features Tracking

C++ Java

Smartphone

Ketidakpuasan user terhadap katalog design baju yang

kurang menarik

Kertas katalog sebagai marker

Menu Start untuk memulai aplikasi Augmented Reality

Kamera sebagai penerima input

Gambar 3.1 Diagram Ishikawa Untuk Analisis Masalah

3.1.2 Analisis Persyaratan

Analisis ini bertujuan untuk mengidentifikasi dan menyatakan persyaratan apa saja yang akan dibutuhkan oleh sistem agar dapat berjalan sesuai dengan yang diharapkan. Analisis Persyaratan ini meliputi analisis kebutuhan fungsional sistem dan analisis non-fungsional sistem. Fungsional sistem adalah aktivitas dan pelayanan yang harus dimiliki oleh sebuah sistem yang dapat berupa input,

output, proses maupun data yang tersimpan. Non-fungsional sistem adalah karakteristik atau batasan yang menentukan kepuasan sebuah sistem yakni seperti kinerja, kemudahan penggunaan, anggaran, serta tenggat waktu yang mampu bekerja tanpa mengganggu fungsionalitas sistem lainnya.

3.1.2.1 Persyaratan Fungsional

Persyaratan fungsional adalah aktivitas layanan yang harus diberikan oleh sebuah sistem. Berikut adalah fungsi-fungsi yang dapat dikerjakan oleh sistem.

1. Marker yang digunakan adalah markerless berupa kertas Design Katalog. 2. Sistem dapat mengidentifikasi marker yang digunakan dengan metode Natural

Features Tracking.

37

3.1.2.2 Persyaratan Non-Fungsional

Persyaratan non-fungsional berkaitan dengan fitur, karakteristik, dan batasan lainnya yang menentukan apakah sistem memuaskan atau tidak. Untuk membantu kinerja sistem secara lebih baik, terdapat kebutuhan non-fungsional sistem yaitu: 1. Sistem yang akan dibangun harus dapat menunjukkan hasil dari proses.

2. Efektifitas dan efisiensi dapat terlihat dari waktu respon antara pengguna

(user) dengan sistem.

3. Sistem yang akan dibangun harus sederhana dan mudah dipelajari oleh pengguna (user).

3.2 Pemodelan Sistem 3.2.1. Use Case Diagram

Use case diagram adalah suatu diagram yang mendeskripsikan interaksi antara

user (pengguna) sebuah sistem dengan suatu sistem tersendiri melalui sebuah cerita bagaimana sebuah sistem dipakai. Use case diagram terdiri dari sebuah aktor dan interaksi yang dilakukannya, aktor tersebut dapat berupa manusia, perangkat keras, sistem lain, ataupun yang berinteraksi dengan sistem. Use case diagram sistem ini dapat dilihat pada Gambar 3.2 berikut.

Mendeteksi Marker

User

Natural Features Tracking

<<Depend on>>

38

Spesifikasi use case untuk mendeteksi marker yang terdapat dalam diagram use case dapat dilihat pada Tabel 3.1.

Tabel 3.1 Spesifikasi Use Case Mendeteksi Marker

Name Mendeteksi Marker

Actors Pengguna

Trigger Pengguna memilih mengarahkan marker ke kamera mobile.

Preconditions Pengguna menggunakan aplikasi Augmented Reality berbasis Android.

Post Conditions Aplikasi akan menampilkan hasil objek baju 3 dimensi. Success Scenario 1. Pengguna mengeksekusi tombol Start.

2. Pengguna mengarahkan marker ke kamera mobile.

3. Sistem mendeteksi marker.

4. Sistem menampilkan objek baju 3 dimensi.

5. Pengguna dapat melihat hasil objek baju 3 dimensi pada layar mobile.

Alternative Flows

-

3.2.2 Activity Diagram

Activity diagram merupakan diagram yang berfungsi untuk menggambarkan logika procedural, jalan kerja suatu sistem. Diagram ini hampir memiliki peran yang sama dengan diagram alir yang mana memungkinkan siapapun yang melakukan proses untuk dapat memilih urutan dalam melakukannya sesuai keinginannya.

Activity diagram proses pendeteksian marker pada aplikasi ini dapat dilihat pada gambar 3.3 berikut.

39

User System

Mengarahkan marker ke kamera

Mendeteksi marker

Menampilkan Objek Baju 3D

Membuka Aplikasi Menampilkan Aplikasi

Apakah Marker Valid

?

T

Y

Gambar 3.3 Activity Diagram

3.2.3 Sequence Diagram

Sequence diagram merupakan diagram yang mengambarkan bagaimana objek-objek saling bersinergi dalam beberapa kebiasaan (behavior). Sequence diagram

menunjukkan sejumlah contoh maupun pesan yang berada atau melewati objek-objek tersebut didalam use case. Berikut ini merupakan gambaran dari sequence diagram dari aplikasi yang telah dirancang oleh penulis yang dapat dilihat pada Gambar 3.4.

40

User :Camera :ImageTarget :Trackable :DataSet

Marker()

Deteksi() getImageTarget()

ActiveDataSet()

getDataSet() Load3dObject()

Gambar 3.4 Sequence Diagram

3.2.4 Class Diagram

Class diagram adalah diagram yang menunjukan class-class yang ada dari sebuah sistem dan hubungannya secara logika. Class diagram menggambarkan struktur statis dari sebuah sistem. Karena itu class diagram merupakan tulang punggung atau kekuatan dasar dari hampir setiap metode berorientasi objek termasuk UML

(Unified Modelling Language). Berikut ini merupakan gambaran dari class diagram dari aplikasi yang telah dirancang oleh penulis yang dapat dilihat pada Gambar 3.5.

41 <<Java Class>> Texture com.qualcomm.QCARSamples.ImageTargets loadTextureFromApk(String,AssetManager) :Texture <<Java Class>> ImageTargetsRenderer com.qualcomm.QCARSamples.ImageTargets mIsActive : boolean

initRendering() : void updateRenderView() : void

GLES20 android..opengl

glEnableVertexAttribArray(vertexHandle); glEnableVertexAttribArray(textureCoordHandle); glActiveTexture(GL_TEXTURE0);

glDrawArrays(GL_TRIANGLES, 0, NumVerts);

mTextures mRenderer

setActivityPortraitMode(JNIEnv *, jobject, jboolean isPortrait) : void initTracker(JNIEnv *, jobject) : int

deinitTracker(JNIEnv *, jobject) : void loadTrackerData(JNIEnv *, jobject) : int destroyTrackerData(JNIEnv *, jobject) : int onQCARInitializedNative(JNIEnv *, jobject) : void ImageTargetsRenderer_renderFrame(JNIEnv *, jobject) : void configureVideoBackground() : void

initApplicationNative(JNIEnv* env, jobject obj, jint width, jint height) : void deinitApplicationNative(JNIEnv* env, jobject obj) : void

startCamera(JNIEnv *,jobject) : void stopCamera(JNIEnv *, jobject) : void setProjectionMatrix(JNIEnv *, jobject) : void

activateFlash(JNIEnv*, jobject, jboolean flash) : jboolean autofocus(JNIEnv*, jobject) : jboolean

setFocusMode(JNIEnv*, jobject, jint mode) : jboolean

ImageTargetsRenderer_initRendering(JNIEnv* env, jobject obj) : void

ImageTargetsRenderer_updateRendering(JNIEnv* env, jobject obj, jint width, jint height) : void <<C++ Class>>

ImageTargets

lastTrackableId : int = -1 animationTime : float = 0 textureCount : int = 0 shaderProgramID : int = 0 vertexHandle : GLint = 0 textureCoordHandle : GLint = 0 mvpMatrixHandle : GLint = 0 texSampler2DHandle : GLint = 0 screenWidth : int = 0 screenHeight : int = 0

isActivityInPotraitMode : bool = false projectionMatrix : QCAR::Matrix44f kObjectScale : float = 1500.0f switchDataSetAsap : bool = false <<Java Class>>

ImageTargets

com.qualcomm.QCARSamples.ImageTargets

storeScreenDimensions() : void onCreate(Bundle) : void loadTextures() : void getInitializationFlags() : int initTracker() : int deinitTracker() : void loadTrackerData() : int destroyTrackerData() : void startCamera() : void stopCamera() : void setProjectionMatrix() : void onResume() : void

onConfigurationChanged(Configuration) : void onPause() : void

deinitApplicationNative() : void onDestrooy() : void initApplication() : void initApplicationNative(int) : void initApplicationAR() : void swtichDatasetAsap() : void autofocus() : boolean setFocusMode(int) : boolean getTextureCount() : int loadLibrary(String) : boolean FOCUS_MODE_NORMAL : int = 0 FOCUS_MODE_CONTINUOUS_AUTO : int = 1 APPSTATUS_UNINITED : int = -1 APPSTATUS_INIT_APP : int = 0 APPSTATUS_INIT_QCAR : int = 1 APPSTATUS_INIT_TRACKER : int = 2 APPSTATUS_INIT_APP_AR : int = 3 APPSTATUS_LOAD_TRACKER : int = 4 APPSTATUS_INITED : int = 5 APPSTATUS_CAMERA_STOPPED : int = 6 APPSTATUS_CAMERA_RUNNING : int = 7 NATIVE_LIB_SAMPLE : String = "ImageTargets" NATIVE_LIB_QCAR : String = "QCAR" mGlView : QCARSampleGLView mRenderer : ImageTargetRenderer mScreenWidth : int = 0 mScreenHeight : int = 0

INVALID_SCREEN_ROTATION : int = -1 mAppStatus : int = APPSTATUS_UNINITED mInitQCARTask : InitQCARTask mLoadTrackerTask : LoadTrackerTask mShutdownLock : Object = new Object() mQCARFlags : int = 0

mTextures : Vector<Texture> mFlash : boolean = false mContAutofocus : boolean = false

Gambar 3.5 Class Diagram

3.3 Flowchart

3.3.1 Flowchart Umum Sistem

Flowchart umum sistem yang telah dirancang pada aplikasi ini dapat dilihat pada Gambar 3.6 berikut.

42

43

Gambar 3.6 merupakan proses yang dilakukan oleh aplikasi secara umum mulai dari proses pembuatan objek 3 dimensi sampai proses menampilkan objek 3 dimensi.

3.3.2 Flowchart Proses Identifikasi Marker

Flowchart dari proses identifikasi marker yang telah dirancang pada aplikasi ini dapat dilihat pada Gambar 3.7 berikut.

Mulai

Marker

Identifikasi marker dengan kamera mobile

Apakah marker

valid?

Tampilkan objek baju 3D

T

Y

Selesai

Gambar 3.7 Flowchart Sistem

Gambar 3.7 merupakan proses yang dilakukan oleh aplikasi untuk mendeteksi marker sehingga menghasilkan objek baju 3 dimensi.

44

3.4 Perancangan Antar Muka

Antarmuka merupakan bentuk tampilan grafis yang berhubungan langsung dengan pengguna (user). Perancangan antarmuka akan disesuaikan dengan kebutuhan dan software yang digunakan. Bahasa pemrograman yang digunakan C++ dan Java. Sistem ini dirancang dalam 3 form yaitu form cover, form utama, dan formloading.

3.4.1 FormCover

Form cover merupakan form yang pertama kali muncul saat sistem ini dijalankan. Tampilan rancangan form cover dapat dilihat pada Gambar 3.8.

Judul

Logo Digipro

Nama

Nim 1

2

3

4

Gambar 3.8 InterfaceForm Cover

Komponen yang dipakai ntuk membangun antar muka form cover pada Gambar 3.8 dapat dilihat pada tabel 3.2 di bawah ini.

45

Tabel 3.2 Rincian Rancangan Interface Form Cover

No. Tipe Teks Nama Keterangan

1. TextView Judul splash_title Menampilkan judul aplikasi. 2. ImageView - logo_digipro menampilkan logo Digipro

3. TextView Nama about_me Menampilkan nama.

4. TextView Nim nim_ku Menampilkan nim.

Pada tabel 3.2 di atas merupakan penjelasan dari komponen-koponen yang dipakai untuk membangun antar muka form cover.

3.4.2 Form Menu Utama

Form Menu Utama merupakan form yang akan digunakan pengguna untuk melakukan proses augmentasi. Form Menu Utama ini memiliki 1 (satu) buah

button, yaitu button start. Tampilan rancangan form Menu Utama dapat dilihat pada Gambar 3.9.

About Application

Start

3

2 1

46

Komponen yang dipakai ntuk membangun antar muka form cover pada Gambar 3.9 dapat dilihat pada tabel 3.3 di bawah ini.

Tabel 3.3 Rincian Rancangan Interface Form Menu Utama.

No. Tipe Teks Nama Keterangan

1. TextView About Application about_text Menampilkan keterangan aplikasi.

2. ScrollView - - Untuk menggeser layar

ke atas dan ke bawah. 3. Button Start Button_start Berfungsi untuk memulai

sistem augmentasi.

Pada tabel 3.3 diatas merupakan penjelasan dari komponen-koponen yang dipakai untuk membangun antar muka form Menu Utama.

3.4.3 FormLoading

Form Loading merupakan form yang menampilkan proses loading sebelum

camera mobile menangkap objek. Tampilan rancangan form Proses Loading

47

Simbol Proses Loading 1

Gambar 3.10 InterfaceForm Proses Loading

Komponen yang dipakai untuk membangun antar muka form loading pada Gambar 3.10 dapat dilihat pada tabel 3.4 di bawah ini.

Tabel 3.4 Rincian Rancangan Interface Form Proses Loading.

No. Tipe Teks Nama Keterangan

1. ProgressBar - loading_indicator Menampilkan gambar proses

loading untuk memulai sistem augmentasi

Pada tabel 3.4 diatas merupakan penjelasan dari komponen-koponen yang dipakai untuk membangun antar muka form proses Loading.

48

BAB 4

IMPLEMENTASI DAN PENGUJIAN

4.1 Implementasi Sistem

Pada tahap ini akan dijelaskan tentang implementasi dari sistem yang telah dirancang. Adapun penjelasannya adalah sebagai berikut:

4.1.1 Menampilkan Interface Awal

Gambar 4.1Tampilan Splashscreen

Untuk membuat tampilan splashscreen seperti pada Gambar 4.1, digunakan bahasa pemrograman XML (eXtensible Markup Language).

49

Gambar 4.2 Coding splashscreen menggunakan XML

4.1.2 Registrasi Marker

Untuk dapat menggunakan marker sesuai dengan image yang diinginkan, image

tersebut harus ditracking terlebih dahulu agar dapat teregistrasi dan dapat digunakan untuk menampilkan objek 3 dimensi. Untuk melakukan registrasi marker qualcomm sudah menyediakan fitur registrasi marker. Berikut langkah-langkah untuk registrasi marker :

50

Gambar 4.3Form Login

2. Klik Target Manager

Gambar 4.4 Form Target Manager

3. Pilih Create Database untuk membuat database baru dimana database tersebut akan digunakan sebagai tempat image yang akan diupload.

51

4. Pilih database yang telah dibuat tadi kemudian klik add target untuk meng-upload image yang ingin dijadikan sebagai marker dan kemudian isi form sesuai dengan yang diinginkan.

Gambar 4.6Hasil Create Database

52

5. Setelah melakukan proses tracking, image yang telah diupload akan ditampilkan dalam database seperti pada gambar 4.8

Gambar 4.8Hasil Add Target

Pada gambar 4.8 terlihat perbedaan antara MarkerPertama dan MarkerKedua yaitu pada jumlah bintang yang didapat pada setiap marker. Bintang lima pada MarkerKedua menunjukkan bahwa tracking marker sangat bagus sehingga ketika proses pelacakan objek 3 dimensi menjadi lebih mudah dan lebih cepat ketika menampilkan objek 3 dimensi tersebut. Sedangkan bintang dua pada MarkerPertama menunjukkan bahwa tracking marker lemah (kurang bagus) sehingga marker akan sulit dikenali. Untuk hasil yang maksimal, jumlah bintang yang didapatkan minimal tiga bintang pada marker.

6. Download marker yang sudah teregistrasi ke dalam bentuk Eclipse package

(pilih/select marker yang ingin didownload terlebih dahulu) seperti pada gambar 4.9.

53

Gambar 4.9 FormDownload Marker

Hasil download marker tersebut terdiri dari 2 file yaitu file.dat dan file.xml dimana file tersebut akan digunakan pada Eclipse sebagai load dataset. Code load dataset dapat dilihat pada Gambar 4.10.

Gambar 4.10 Coding Load Dataset

Untuk design marker yang digunakan dapat dilihat pada gambar 4.11 dan gambar 4.12, dimana masing-masing marker ini akan menampilkan objek baju 3 dimensi yang berbeda sesuai dengan apa yang telah diatur didalam program.

54

Gambar 4.11 Marker Pertama

Pada marker pertama ini objek yang ditampilkan adalah baju 3 dimensi berwarna hijau tua dengan logo IMILKOM di bagian dada sebelah kiri.

55

Pada marker kedua ini objek yang ditampilkan adalah baju 3 dimensi berwarna putih dengan kerah dan ujung lengan berwarna kuning, dan dibagian belakang baju terdapat logo Bank SUMUT.

4.1.3 Implementasi Natural Features Tracking

Algoritma ini bekerja setelah potongan semua marker diupload melalui vuforia dan menghasilkan sebuah source code (hasil dari gambar setelah di-generate vuforia) berupa file xml. File xml ini merupakan file konfigurasi dari vuforia terhadap marker - marker yang telah di upload. Prosesnya dapat dilihat pada code berikut

56

4.2 Pengujian Sistem

Pengujian untuk sistem ini dilakukan untuk mendapatkan hasil objek baju 3 dimensi. Kriteria pengujian yang dilakukan adalah sebagai berikut :

1. Marker yang digunakan adalah dua buah marker yang sebelumnya telah diregistrasi.

2. Setiap marker menghasilkan baju 3 dimensi yang berbeda.

4.2.1 Spesifikasi Perangkat Keras Smartphone

Perangkat keras pendukung yang digunakan selama pembuatan aplikasi ini memiliki spesifikasi sebagai berikut:

1. Prosesor 1 Ghz Dual Core 2. OS Android, 4.1 Jelly Bean 3. RAM 1GB

4. Kamera Belakang 5.0 MP 5. Resolusi 480*800(WVGA)

4.2.2 Tampilan Halaman Cover

Halaman Cover merupakan halaman yang muncul pertama sekali pada saat sistem dijalankan. Pada halaman Cover digunakan timer untuk menuju Menu Utama. Tampilan halaman Cover dapat dilihat pada Gambar 4.14

57

Gambar 4.14 Halaman Cover

4.2.3 Tampilan Menu Utama

Halaman Menu Utama terdiri dari 1 (satu) buah button, yaitu button Start. Button Start digunakan untuk memulai proses augmentasi.Pada halaman ini juga terdapat informasi tentang aplikasi dan programmer. Tampilan Menu Utama dapat dilihat pada Gambar 4.15.

58

Gambar 4.15 Halaman Menu Utama

4.2.4 Pengujian Identifikasi Marker Pertama

Setelah button Start dieksekusi, maka proses augmentasi akan dimulai. Pengujian proses identifikasi marker dapat dilakukan dengan mengarahkan kamera mobile

ke marker. Pada saat kamera diarahkan ke marker, maka sistem mengenali marker tersebut dan menampilkan objek baju 3 dimensi. Hasil identifikasi marker pertama dapat dilihat pada Gambar 4.16 dan Gambar 4.17.

59

Gambar 4.16 Tampilan Depan dari Marker Pertama

Gambar 4.16 ini merupakan tampilan dari objek baju 3 dimensi ketika kamera diarahkan ke bagian depan. Pengujian juga dilakukan ketika kamera diarahkan ke bagian samping marker yang dapat dilihat pada Gambar 4.17.

60

Gambar 4.17 ini merupakan tampilan dari objek baju 3 dimensinya ketika kamera kita arahkan ke bagian samping. Dengan demikian konsumen akan lebih mudah dalam melihat atau memilih baju yang akan dibeli.

4.2.5 Pengujian Identifikasi Marker Kedua

Pengujian proses identifikasi marker dapat dilakukan dengan mengarahkan marker ke kamera mobile. Pada saat marker diarahkan ke kamera, maka sistem mengenali marker tersebut dan menampilkan objek baju 3 dimensi. Hasil identifikasi marker kedua dapat dilihat pada Gambar 4.18 dan Gambar 4.19.

Gambar 4.18 Tampilan Depan dari Marker Kedua

Pada gambar 4.18 terlihat bagian depan dari objek baju 3 dimensinya, dimana dapat dilihat apa saja material yang terdapat pada bagian depan baju seperti tulisan, logo dan sebagainya. Pengujian juga dilakukan ketika kamera diarahkan ke bagian samping marker yang dapat dilihat pada Gambar 4.19.

61

Gambar 4.19 Tampilan Samping dari Marker Kedua

Pada gambar 4.19 terlihat bagian samping dari objek baju 3 dimensinya. Dengan demikian konsumen akan lebih puas dalam melihat atau mencari baju yang ingin dibeli.

51

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Pada penelitian ini telah berhasil dibangun sebuah aplikasi katalog baju berbasis

augmented reality yang dapat mempermudah konsumen dalam memilih baju yang diinginkan.

5.2 Saran

Adapun saran-saran yang dapat penulis berikan untuk pengembangan dan perbaikan sistem ini adalah sebagai berikut :

1. Untuk pengembangan kedepannya diharapkan aplikasi ini dapat menampilkan lebih banyak baju 3 dimensi, sehingga pembeli dapat melihat semua baju yang diproduksi oleh Digiprocreative.

2. Untuk pengembangan selanjutnya, diharapkan dapat membuat interface

yang lebih menarik seperti button untuk rotasi baju 3 dimensi dan button zoom in dan zoom out yang terletak pada layar android mobile, sehingga mempermudah pembeli untuk melihat baju secara detail.

3. Untuk pengembangan selanjutnya, diharapkan aplikasi ini menyediakan menu untuk menambahkan objek baju 3 dimensi yang dapat dilakukan oleh konsumen.

52

DAFTAR PUSTAKA

[1] Ardhianto, Eka, Wiwien, Hadikurniawati & Edy, Winarno. 2012.

Augmented Reality Objek 3 Dimensi dengan Perangkat Artoolkit dan Blender. Jurnal Teknologi Informasi DINAMIK Vol.17

No.2: hal.108-109.

[2] Azuma, Ronald T. 1997. A Survey Of Augmented Reality.

Teleoperator and Virtual Environments (355-385), Hughes Research Laboratories, Dept Of Computer Science UNC, Los Angles, US.

[3] Chandra, Robert. 2012. Aplikasi Augmented Reality Untuk Panduan Museum Berbasis Android Menggunakan Frame Marker. Skripsi. Jakarta, Indonesia: Binus.

[4] Craig, Alan B. 2013. Understanding Augmented Reality Concept and Applications. USA: Elsevier Inc.

[5] Fathoni, Mochamad. 2012. Alat Musik Perkusi Augmented Reality Berbasis Android. Skripsi. Malang, Indonesia: Universitas Muhammadiyah.

[6] Fauzi Putra, Fahreza, dkk. 2012. Aplikasi Pembelajaran Metamorfosis Berbasis Android Augmented Reality. Jurnal Teknik Informatika

Vol 1: hal.1-8.

[7] Fernando, Mario. 2013. Membangun AR Android Dengan Vuforia + Unity. Manado: BUKU AR ONLINE.

[8] Fernando Rentor, Mario. 2013. Rancang Bangun Perangkat Lunak Pengenalan Motif Batik Berbasis Augmented Reality. Tesis. Yogyakarta, Indonesia: Universitas Atma Jaya.

[9] Gruber, Lukas, dkk. 2010. Optimization of Target Objects for Natural Feature Tracking. 2010 International Conference on Pattern Recognition. Austria dan California US.

[10]Madden, Lester. 2011. Professional Augmented Reality Browsers for Smartphones. United Kingdom: Wiley Publishing,Inc.

53

[11]Rohmah, Ulfah. 2012. Aplikasi Augmented Reality Tata Surya (Semua Planet Mengelilingi Matahari) Menggunakan Mobile Android.

Skripsi. Depok, Indonesia: Universitas Gunadarma.

[12] Safaat H, Nazruddin. 2012. Pemrograman Aplikasi Mobile Smartphone dan Tablet PC Berbasis Android. Bandung: Penerbit Informatika Bandung.

[13] WK, Nikodemus. 2013. Step By Step Menjadi Programmer Android. Edisi 1. Yogyakarta: Penerbit ANDI: Semarang: WAHANA KOMPUTER.

[14] Zaki, Achmad. 2013. Perancangan dan Implementasi Katalog Interaktif Untuk Media Penjualan Furniture Berbasis Teknologi Augmented Reality. Skripsi. Pamulang, Indonesia: Universitas Pamulang.

54

LISTING PROGRAM

Kode Program splash_screen.xml:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@color/holo_light_blue" android:contentDescription="@string/content_desc_vuforia_backgroun d"> <TextView android:id="@+id/splash_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="24dp" android:gravity="center" android:text="@string/splash_title" android:textColor="@color/white" android:textSize="@dimen/splash_title" android:textStyle="bold" />

<ImageView android:id="@+id/logo_digipro" android:layout_width="200dp" android:layout_height="200dp" android:layout_above="@+id/about_me" android:layout_centerHorizontal="true" android:layout_marginBottom="54dp" android:contentDescription="@string/content_desc_vuforia_logo" android:scaleType="fitEnd"

android:src="@drawable/logo_digipro" />

<TextView android:id="@+id/nim_ku" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:gravity="center" android:text="@string/nim_ku" android:textColor="@color/white" android:textSize="@dimen/about_title" android:textStyle="bold" />

55

android:id="@+id/about_me"

android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/nim_ku" android:layout_centerHorizontal="true" android:layout_marginBottom="17dp" android:gravity="center"

android:text="@string/about_me" android:textColor="@color/white" android:textSize="@dimen/about_title" android:textStyle="bold" />

</RelativeLayout>

Kode Program about_screen.xml:

56 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black" android:orientation="vertical">

<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dip" android:padding="10dip" android:text="@string/about_title" android:textColor="@color/holo_light_blue" android:textSize="@dimen/about_title" />

<View

android:layout_width="match_parent" android:layout_height="1dp"

android:layout_marginTop="10dp"

android:background="@color/holo_light_blue" />

<ScrollView

android:layout_width="match_parent" android:layout_height="match_parent"

android:layout_gravity="center_horizontal" android:layout_weight="1">

<TextView android:id="@+id/about_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="20dp" android:textColor="@color/white"

android:textSize="@dimen/about_text" /> </ScrollView> <Button android:id="@+id/button_start" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal|center_vertical"

android:text="@string/button_start" />

</LinearLayout>

Kode Program camera_overlay.xml:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

57

android:layout_width="match_parent" android:layout_height="match_parent">

<ProgressBar

android:id="@+id/loading_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" />

58

Kode Program AboutScreen.java:

package com.qualcomm.QCARSamples.ImageTargets; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.text.Html; import android.text.method.LinkMovementMethod; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.TextView;

public class AboutScreen extends Activity implements OnClickListener

{

private TextView mAboutText; private Button mStartButton;

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState); setContentView(R.layout.about_screen);

mAboutText = (TextView) findViewById(R.id.about_text); mAboutText.setText(Html.fromHtml(getString(R.string.about_text))); mAboutText.setMovementMethod(LinkMovementMethod.getInstance()); mAboutText.setLinkTextColor(getResources().getColor( R.color.holo_light_blue));

mStartButton = (Button) findViewById(R.id.button_start); mStartButton.setOnClickListener(this);

}

private void startARActivity() {

Intent i = new Intent(this, ImageTargets.class); startActivity(i);

}

public void onClick(View v) { switch (v.getId()) { case R.id.button_start: startARActivity(); break;

59

} }}

Kode Program ImageTargets.java:

package com.qualcomm.QCARSamples.ImageTargets; import java.lang.ref.WeakReference; import java.lang.reflect.Field; import java.util.Vector; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.pm.ActivityInfo; import android.content.res.Configuration; import android.graphics.Color; import android.os.AsyncTask; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.util.DisplayMetrics; import android.view.GestureDetector; import android.view.KeyEvent; import android.view.LayoutInflater; import android.view.MenuItem; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.view.WindowManager; import android.widget.RelativeLayout; import android.widget.Toast; import com.qualcomm.QCAR.QCAR;

public class ImageTargets extends Activity {

private static final int FOCUS_MODE_NORMAL = 0;

private static final int FOCUS_MODE_CONTINUOUS_AUTO = 1;

private static final int APPSTATUS_UNINITED = -1; private static final int APPSTATUS_INIT_APP = 0; private static final int APPSTATUS_INIT_QCAR = 1; private static final int APPSTATUS_INIT_TRACKER = 2; private static final int APPSTATUS_INIT_APP_AR = 3; private static final int APPSTATUS_LOAD_TRACKER = 4; private static final int APPSTATUS_INITED = 5; private static final int APPSTATUS_CAMERA_STOPPED = 6; private static final int APPSTATUS_CAMERA_RUNNING = 7;

private static final String NATIVE_LIB_SAMPLE = "ImageTargets";

85

} }

LOG("Configure Video Background : Video (%d,%d), Screen (%d,%d), mSize (%d,%d)", videoMode.mWidth, videoMode.mHeight, screenWidth, screenHeight, config.mSize.data[0],

config.mSize.data[1]);

QCAR::Renderer::getInstance().setVideoBackgroundConfig(config); }

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_initApplic ationNative(

JNIEnv* env, jobject obj, jint width, jint height)

{

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_initA pplicationNative");

screenWidth = width; screenHeight = height;

jclass activityClass = env->GetObjectClass(obj); jmethodID getTextureCountMethodID =

env->GetMethodID(activityClass, "getTextureCount", "()I");

if (getTextureCountMethodID == 0) {

LOG("Function getTextureCount() not found.");

return; }

textureCount = env->CallIntMethod(obj, getTextureCountMethodID);

if (!textureCount) {

LOG("getTextureCount() returned zero.");

return; }

textures = new Texture*[textureCount];

jmethodID getTextureMethodID = env->GetMethodID(activityClass, "getTexture",

"(I)Lcom/qualcomm/QCARSamples/ImageTargets/Texture;");

if (getTextureMethodID == 0) {

86

return; }

for (int i = 0; i < textureCount; ++i) {

jobject textureObject = env->CallObjectMethod(obj, getTextureMethodID, i);

if (textureObject == NULL) {

LOG("GetTexture() returned zero pointer");

return; }

textures[i] = Texture::create(env, textureObject); }

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_initA pplicationNative finished");

}

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_deinitAppl icationNative(

JNIEnv* env, jobject obj)

{

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_deini tApplicationNative");

if (textures != 0) {

for (int i = 0; i < textureCount; ++i) {

delete textures[i];

textures[i] = NULL; }

delete[]textures;

textures = NULL; textureCount = 0; }

}

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_startCamer a(JNIEnv *,

jobject) {

87

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_start Camera");

QCAR::CameraDevice::CAMERA camera = QCAR::CameraDevice::CAMERA_DEFAULT;

if (!QCAR::CameraDevice::getInstance().init(camera))

return;

configureVideoBackground();

if (!QCAR::CameraDevice::getInstance().selectVideoMode(

QCAR::CameraDevice::MODE_DEFAULT))

return;

if (!QCAR::CameraDevice::getInstance().start())

return;

QCAR::TrackerManager& trackerManager = QCAR::TrackerManager::getInstance();

QCAR::Tracker* imageTracker =

trackerManager.getTracker(QCAR::Tracker::IMAGE_TRACKER);

if(imageTracker != 0)

imageTracker->start(); }

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_stopCamera (JNIEnv *, jobject)

{

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_stopC amera");

QCAR::TrackerManager& trackerManager = QCAR::TrackerManager::getInstance();

QCAR::Tracker* imageTracker =

trackerManager.getTracker(QCAR::Tracker::IMAGE_TRACKER);

if(imageTracker != 0)

imageTracker->stop();

QCAR::CameraDevice::getInstance().stop(); QCAR::CameraDevice::getInstance().deinit(); }

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_setProject ionMatrix(JNIEnv *, jobject)

{

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_setPr ojectionMatrix");

88

const QCAR::CameraCalibration& cameraCalibration =

QCAR::CameraDevice::getInstance().getCameraCalibration(); projectionMatrix =

QCAR::Tool::getProjectionGL(cameraCalibration, 2.0f, 2500.0f); }

JNIEXPORT jboolean JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_activateFl ash(JNIEnv*, jobject, jboolean flash)

{

return

QCAR::CameraDevice::getInstance().setFlashTorchMode((flash==JNI_TR UE)) ? JNI_TRUE : JNI_FALSE;

}

JNIEXPORT jboolean JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_autofocus( JNIEnv*, jobject)

{

return

QCAR::CameraDevice::getInstance().setFocusMode(QCAR::CameraDevice: :FOCUS_MODE_TRIGGERAUTO) ? JNI_TRUE : JNI_FALSE;

}

JNIEXPORT jboolean JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargets_setFocusMo de(JNIEnv*, jobject, jint mode)

{

int qcarFocusMode;

switch ((int)mode) {

case 0:

qcarFocusMode = QCAR::CameraDevice::FOCUS_MODE_NORMAL;

break;

case 1:

qcarFocusMode =

QCAR::CameraDevice::FOCUS_MODE_CONTINUOUSAUTO;

break;

case 2:

qcarFocusMode =

QCAR::CameraDevice::FOCUS_MODE_INFINITY;

break;

case 3:

qcarFocusMode = QCAR::CameraDevice::FOCUS_MODE_MACRO;

break;

89

return JNI_FALSE; }

return

QCAR::CameraDevice::getInstance().setFocusMode(qcarFocusMode) ? JNI_TRUE : JNI_FALSE;

}

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargetsRenderer_in itRendering(

JNIEnv* env, jobject obj)

{

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargetsRender er_initRendering");

glClearColor(0.0f, 0.0f, 0.0f, QCAR::requiresAlpha() ? 0.0f : 1.0f);

for (int i = 0; i < textureCount; ++i) {

glGenTextures(1, &(textures[i]->mTextureID));

glBindTexture(GL_TEXTURE_2D, textures[i]->mTextureID); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textures[i]->mWidth,

textures[i]->mHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE,

(GLvoid*) textures[i]->mData); }

#ifndef USE_OPENGL_ES_1_1 shaderProgramID =

SampleUtils::createProgramFromBuffer(cubeMeshVertexShader, cubeFragmentShader);

vertexHandle = glGetAttribLocation(shaderProgramID, "vertexPosition");

textureCoordHandle = glGetAttribLocation(shaderProgramID, "vertexTexCoord");

mvpMatrixHandle = glGetUniformLocation(shaderProgramID, "modelViewProjectionMatrix");

texSampler2DHandle = glGetUniformLocation(shaderProgramID, "texSampler2D");

90

}

JNIEXPORT void JNICALL

Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargetsRenderer_up dateRendering(

JNIEnv* env, jobject obj, jint width, jint height)

{

LOG("Java_com_qualcomm_QCARSamples_ImageTargets_ImageTargetsRender er_updateRendering");

screenWidth = width; screenHeight = height; configureVideoBackground(); }

#ifdef __cplusplus }