Implementasi Augmented Reality dalam Perancangan Bisnis Produk Kopi Tampan

(1)

LISTING PROGRAM

A. Halaman Splash Screen using UnityEngine;

using System.Collections;

public class SplashScreen : MonoBehaviour {

public float timer = 7; // lama waktu splashscreen sebelum berpindah ke Main Menu

public class LeandingPage : MonoBehaviour { public Canvas namaCanvas;

public bool tampil = false;

(2)

C. Halaman Menu Utama using UnityEngine;

using System.Collections; using UnityEngine.UI;

public class menuutama : MonoBehaviour { public Canvas menuCanvas;

public bool tampil = false;

public void HKT1 (string HKT1){ Application.LoadLevel(HKT1);}

public void LeandingPage (string LeandingPage){ Application.LoadLevel(LeandingPage);}

public void keluar(){ Application.Quit ();}

public void HP(string HP){ Application.LoadLevel(HP);}

public void tampilpopup1(){

public void HARMC (string HARMC) {

Application.LoadLevel(HARMC); }

public void HARG (string HARG) {

Application.LoadLevel(HARG); }

}

D. Halaman Kopi Tampan 1 using UnityEngine;

public class HKT1 : MonoBehaviour {

public void HKT2 (string HKT2) {

Application.LoadLevel(HKT2); }

public void menuutama (string menuutama) {

(3)

E. Halaman Kopi Tampan 2 using UnityEngine;

Application.LoadLevel(menuutama); }

}

F. Halaman Kopi Tampan 3 using UnityEngine;

}

G. Halaman Kopi Tampan 4 using UnityEngine;

(4)

Application.LoadLevel(menuutama); } }

H. Halaman Produk using System.Collections;

public class HP : MonoBehaviour {

public void HARPGayo(string HARPGayo) {

Application.LoadLevel(HARPGayo); }

public void HARPPremium(string HARPPremium) {

Application.LoadLevel(HARPPremium); }

public void HARPJantan(string HARPJantan) {

Application.LoadLevel(HARPJantan); }

}

I. Halaman Augmented Reality using UnityEngine;

public class ARP : MonoBehaviour {

public void HP (string HP) {

Application.LoadLevel(HP); }

}

J. Halaman Canvas Help using UnityEngine;

public class canvashelp : MonoBehaviour { public Canvas menuCanvas;

(5)

tampil = true;

var rotasi = 2.0; //kecepatan perputaran objek

var lerpSpeed = 1.0; //lerp merupakan salah satu komponen pada unity 3D agar gerakan pada objek menjadi halus

private var kecepatan = new Vector3(); private var avg = new Vector3(); private var drag = false;

private var targetSpeedX = new Vector3();

function touchobjek() //ketika gerakan tangan menyetuh maka status drag objek menjadi "true"

{

drag = true; }

function Update() { //menangani perubahan yang terjadi akibat inputan pada layar device ''

if (Input.touchCount == 1) {

var theTouch : Touch = Input.GetTouch(0);

if (theTouch.phase == TouchPhase.Moved) {

touchobjek(); }

if ((theTouch.phase == TouchPhase.Ended) || (theTouch.phase == TouchPhase.Canceled))

if (Input.touchCount > 1) {

drag = false; }

(6)

transform.Rotate( Camera.main.transform.up * kecepatan.x * rotasi, Space.World );

transform.Rotate( Camera.main.transform.right * kecepatan.y * rotasi, Space.World );

public class zoompro : MonoBehaviour {

private float nilaiI = 1.0f; //nilai interval pada slider public GameObject objek; // objek yang akan di zoom

// Inisialisasi void Start () {

nilaiI = 1.0f;//deklarasi interval pada slider

}

// pemanggilan perframe void Update () {

objek.transform.localScale = new Vector3(0.4f, 0.4f, 0.4f) * nilaiI * 0.01f; //perubahan ukuran berdasarkan slide interval

}

void OnGUI() //untuk menampilkan GUI slider {

nilaiI = GUI.HorizontalSlider(new Rect(25, 600, 150.0f,150.0f) , nilaiI,1.0f, 3.0f); //weight,high,sliderkiri,sliderkanan,nilaiI,panjangslider

public class zoommc : MonoBehaviour {

private float nilaiI = 1.5f; //nilai interval pada slider public GameObject objek; // objek yang akan di zoom

//inisialisasi void Start () {

nilaiI = 1.5f;//deklarasi interval pada slider }

(7)

}

nilaiI = GUI.HorizontalSlider(new Rect(25, 600, 150.0f,150.0f) , nilaiI, 1.0f, 3.0f); //weight,high,sliderkiri,sliderkanan,nilaiI,panjangslider

public class zoomger : MonoBehaviour {

private float nilaiI =1.0f; //nilai interval pada slider public GameObject objek; // objek yang akan di zoom

//Inisialisasi

}

public class DefaultTrackableEventHandler : MonoBehaviour,

ITrackableEventHandler {

(8)

#region UNTIY_MONOBEHAVIOUR_METHODS

void Start() {

mTrackableBehaviour=GetComponent<TrackableBehaviour>(); if (mTrackableBehaviour)

{

mTrackableBehaviour.RegisterTrackableEventHandler(this); }

}

#endregion // UNTIY_MONOBEHAVIOUR_METHODS #region PUBLIC_METHODS

(9)

DAFTAR PUSTAKA

Absari, Fattih Rimadhani. 2015. Gambaran Kadar Kalsium Darah Pada Wanita Peminum Kopi. (online) http: //digilib.unimus.ac.id/files/disk1/139/ jtptunimus-gdl-fattihrima-6918-3-babii.pdf (diakses 03 September 2015).

[1]Adam, S. 2014. Implementasi Teknologi Augmented Reality pada Agen Penju alan Rumah. Ejournal Teknik Elektro dan Komputer : 19 – 25. (online) http://download.portalgaruda.org/article.php?article=262898&val=108 &title=Implementasi%20Teknologi%20Augmented%20Reality%20pa da%20Agen%20Penjualan%20Rumah (diakses 24 Mei 2015).

[2]Andriyadi, Anggi. 2011. Augmented Reality with ARToolkit Reality Leaves a Lot To Imgine. Penerbit ARTeam & NulisBuku.com.

[3]Ardhianto, Eka., Hadikurniawati, Wiwien., & Winarto, Edy. 2012. Augmented Reality Objek 3 Dimensi dengan Perangkat Artoolkit dan Blender. Jurnal Teknologi Informasi Dinamik Volume 17, Universitas Stikubank.

[4] Ardiansyah, Chandra. 2013. Permainan Halma Interaktif Dengan Augmented Reality.(Online) http://repository.amikom.ac.id/files/Publikasi_09.11.3 067.pdf (diakses 12 Maret 2015).

[1] Djuniharto. 2013. Augmented Reality Menggunakan Library Artoolkit Dengan Marker Biner. (Online) http://ejurnal.stikombanyuwangi.ac.id/files/file s/2013-08-02-01.pdf (diakses 12 Maret 2015).

[2]Eder, Dwika Rahma Augusta. 2012. Rancang Bangun Aplikasi Kamus Irregular Verb Berbasis Mobile Pada Platform Android. (Online) http://digilib.unila.ac.id/6893/6/BAB%20%20II.pdf (diakses 11 juni 2015).

(10)

[4] Liliana, Gunadi, Ir.Kartika, & Yohan, Andreas. 2012. Aplikasi Deteksi Gerak Dalam Augmented Reality. (Online) http://repository.petra.ac.id/1640 5/1/ Publikasi1_03024_1019.pdf (diakses 12 Maret 2015).

[5] Martono, K.T., & Kridalukmana, R. 2014. Mobile Augmented Reality Jurusan Sistem Komputer Universitas Diponegoro Berbasis Android (MARSIKOM). Jurnal Sistem Komputer Volume 4, Nomor 1, Universitas Diponegoro.

[6] Prasetyo, Septian Adi. 2014. Brosur Interaktif Berbasis Augmented Reality Sebagai Sarana Promosi Produk Furniture PT.OTA INDONESIA. (Online) http://repository.amikom.ac.id/files/Publikasi_09.01.2625.pdf

(diakses 12 Maret 2015).

[7] Pratama, Muhammad Arisandy. 2014. Penerapan Augmented Reality Pada Perancangan Aplikasi Pengenalan Alat Musik Taganing Batak Berbasis Android. Skripsi. Medan: Universitas Sumatera Utara.

[8] Putra, Radhitya Arga. 2013. Penerapan Augmented Reality Dalam Pembuatan Buku Ajar Virtual Ilmu Pengetahuan Alam Kelas IX Sekolah MenengahPertama.(Online) http://eprints.dinus.ac.id/12381/1/jurnal_1 2312.pdf (diakses 12 Maret 2015).

[9] Rentor, Mario Fernando. 2013. Rancang Bangun Perangkat Lunak Pengenalan Motif Batik Berbasis Augmented Reality. Tesis.Yogyakarta : Universitas ATMA JAYA.

[10]Rizki, Yose. 2012. Markerless Augmented Reality Pada Perangkat Android. (Online) http://digilib.its.ac.id/public/ITS-paper-22079-2207100102-Presentation.pdf (diakses 11 juni 2015).

[11]Sulastri. 2007. Transformasi Bangun Ruang Tiga Dimensi menggunakan Visual Basic 6.0. Jurnal Teknologi Informasi DINAMIK Volume XII, No.1, Hal : 88-100, Universitas Stikubank Semarang.

(11)

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1Analisis Sistem

Analisis sistem merupakan langkah 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.

Pada sistem ini, penulis menggunakan booklet sebagai media untuk menjalankan

Augmented Reality. Melalui marker yang terdapat di dalam booklet, objek 3D akan muncul melalui layar smartphone dengan menggunakan aplikasi berbasis Android. Dalam sistem ini, akan membahas bagaimana perancangan bisnis produk dari kopi tampan. 3 Produk kopi, gerobak dan mini cafe yang akan menjadi objek 3D. Objek dibuat menggunakan blender 3D, lalu pembuatan aplikasi Android menggunakan unity 5 dan marker dibuat menggunakan vuforia. Untuk pembuatan booklet di design menggunakan Adobe Photoshop sedemikian rupa agar user dapat lebih mudah mendapatkan informasi yang dibutuhkan.

3.1.1 Analisis Masalah

(12)

Methods User

Gambar 3.1 Diagram Ishikawa Untuk Analisis Masalah

Dari diagram ishikawa pada Gambar 3.1 dapat dijelaskan bahwa masalah yang timbul yaitu kurang jelasnya informasi yang diterima oleh konsumen/ investor dalam mengetahui bisnis yang ditawarkan oleh Kopi Tampan. Beberapa faktor yang menyebabkan masalah ini timbul yaitu mulai dari konsumen/investor yang tidak mengetahui bagaimana bentuk dari bisnis yang ditawarkan seperti membuat gerobak atau pun mini cafe dan produk yang ada. Kesulitan membayangkan bisnis yang ditawarkan. Banyaknya waktu yang terbuang karena tempat pembuatan berbeda – beda.

3.1.2 Analisis Kebutuhan Sistem

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

(13)

3.1.2.1Persyaratan 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 yang sudah didesign di dalam sebuah booklet.

2. Sistem dapat menampilkan objek 3D melalui layar smartphone. 3. Sistem menggunakan sistem operasi berbasis Android.

4. Objek yang ditampilkan memiliki bentuk yangt mendekati aslinya dengan tampilan 3D menggunakan Augmented Reality.

5. Informasi dihasilkan melalui suara/sound.

3.1.2.2Persyaratan 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.

1. Sistem yang akan dibangun harus dapat menunjukkan hasil dari proses yang maksimal.

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

(user) dengan sistem.

3. Sistem yang akan dibangun harus sederhana serta mudah digunakan dan dipahami oleh pengguna (user).

3.2Pemodelan Visual Menggunakan Unified Modeling Language (UML)

3.2.1 Identifikasi Use Case Diagram

Use case diagram adalah suatu diagram yang mendeskripsikan interaksi antara user

(14)

Identifikasi actor dilakukan dengan menjawab pertanyaan-pertanyaan berikut, yaitu:

1. Siapa yang menggunakan sistem? Jawaban:

Yang menggunakan sistem adalah user yang terdiri dari mahasiswa, pekerja dibidang marketing, dan wirausaha.

2. Siapa yang diperlukan untuk melaksanakan fungsi pada sistem? Jawaban:

Yang diperlukan untuk melaksanakan fungsi pada sistem adalah user yang terdiri dari mahasiswa, pekerja dibidang marketing, dan wirausaha.

3. Bagaimana pemakai menggunakan sistem? Jawaban:

Didalam sistem ini yang termasuk user/ pengguna sistem adalah mahasiswa, pekerja dibidang marketing atau wirausaha. Yang dapat dilakukan user pada system adalah memunculkan objek.

Berikut adalah use case diagram berdasarkan actor dan use case yang dapat dilihat pada Gambar 3.2 dan spesifikasi usecase analisis sistem pada Tabel 3.1.

(15)

Tabel 3.1 Spesifikasi Use Case Analisis Sistem Use Case

Name

Muncul Objek

Actors User

Description Use Case mengambarkan tentang bagaimana cara memunculkan objek, user harus mengarahkan kamera ke marker maka objek 3D akan muncul, di dalam objek tersebut memiliki 3 fungsi yaitu perbesar dan perkecil objek, memutar objek, dan memberikan informasi menggunakan sound

Basic Flow Pengguna melihat objek yang muncul

Alternate

Flow

Pengguna dapat mengganti marker

Pre Condition Pengguna dapat memperbesar dan memperkecil objek, memutar objek, dan memberikan informasi menggunakan sound.

Post

Condition

Pengguna dapat melihat hasil dari memperbesar dan memperkecil objek, memutar objek, dan memberikan informasi menggunakan sound.

3.2.2 Identifikasi Activity Diagram

Activity diagram merupakan diagram yang berfungsi untuk menggambarkan logika

(16)

(17)

(18)

b) Flowchart Pembuatan Marker

Flowchart pembuatan marker dapat dilihat pada Gambar 3.6.

Gambar 3.6 Flowchart Pembuatan Marker

c) Flowchart Pembuatan Aplikasi

Flowchart pembuatan aplikasi dapat dilihat pada Gambar 3.7.

Mulai

Download File Image Target (.Unity)

Selesai Gambar.jpg di upload

ke website Vuforia Pilih gambar.jpg yang ingin diupload

menjadi marker

Mulai

1. Marker (Image Target) diimport ke

Unity 5 2. Objek .blend diimport ke Unity 5

Membuat fungsi zoom, rotate, dan sound menggunakan

MonoDevelop

Aplikasi .apk siap di install pada

smartphone Jalankan

Unity 5

(19)

d) Flowchart Sistem

Flowchart sistem dalam penelitian ini dapat dilihat pada Gambar 3.8.

(20)

1

2 3 4

3.4Perancangan Tampilan Antarmuka Aplikasi

Tampilan antarmuka perlu dirancang untuk menggambarkan sistem yang akan dibuat dan membantu mempermudah proses pembangunan sistem. Rancangan tampilan sistem dapat dilihat dan akan dijelaskan sebagai berikut.

3.4.1 Rancangan Halaman Landing Page

Rancanga halaman landing page pada aplikasi kopi tampan bertujuan untuk memulai aplikasi untuk masuk ke dalam halaman home/ menu utama dan sekaligus pengenalan awal dari sistem yang dibuat kepada pengguna dalam menggunakan aplikasi. Dalam rancangan ini halaman landing page terbagi menjadi tiga tombol menu yaitu menu

start , menu about dan menu exit. Untuk rancangan halaman landing page dapat dilihat pada Gambar 3.9 dan Tabel 3.2 untuk keterangan bagian rancangan halaman

landing page.

Gambar 3.9 Rancangan Halaman Landing Page

Tabel 3.2 Keterangan Bagian-Bagian Rancangan Halaman Landing Page

No Jenis Objek Keterangan

1 Picture Logo Kopi Tampan.

(21)

3 Tombol About Tombol popup pemberitahuan tentang aplikasi.

4 Tombol Exit Tombol keluar dari aplikasi.

3.4.2 Rancangan PopUp About

Rancangan popup about pada aplikasi ini bertujuan untuk memberitahukan tujuan dari aplikasi ini dibuat. Rancangan popup about dapat dilihat pada Gambar 3.10 dan Tabel 3.3 untuk keterangan bagian rancangan popup about.

Gambar 3.10 Rancangan PopUp About

Tabel 3.3 Keterangan Bagian-Bagian Rancangan PopUp About

1 Tombol Keluar Tombol keluar dari popup about. 2 Text View Deskripsi tujuan aplikasi dibuat.

3.4.3 Rancangan Halaman Home/Menu Utama

Rancangan halaman home/menu utama pada aplikasi kopi tampan bertujuan untuk memberitahukan isi dari aplikasi dan mempermudah pengguna dalam menggunakan sistem melalui menu yang terlihat pada tampilan halaman home/menu utama yang didesain dengan fitur-fitur yang menarik. Rancangan tampilan halaman home/menu utama memiliki tujuh tombol menu yaitu tampilan kopi tampan, tampilan produk,

1

(22)

1

2

3

4

5 6

7

Gambar 3.11 Rancangan Halaman Home/Menu Utama

Tabel 3.4 Keterangan Bagian-Bagian Rancangan Halaman Home/Menu Utama

1 Tombol Kopi Tampan Tombol informasi tentang kopi tampan. 2 Tombol Produk Tombol untuk melihat jenis produk kopi

tampan.

3 Tombol Gerobak Tombol untuk masuk ke halaman

Augmented Reality Gerobak.

4 Tombol Mini Cafe Tombol untuk masuk ke halaman Augmented Reality Mini Cafe.

5 Tombol Marker Tombol untuk melihat marker yang

digunakan dalam sistem.

6 Tombol Help Tombol untuk membantu user menggunakan

sistem.

7 _Tombol_Home _{Tombol kembali ke halaman}_{landing page.}

3.4.4 Rancangan Halaman Kopi Tampan

(23)

4

1

3

2

a. Rancangan Halaman Kopi Tampan 1

Rancangan pada halaman ini akan berisi tentang visi, misi, produk, dan informasi mengenai perusahaan kopi tampan. Rancangan halaman kopi tampan 1 dapat dilihat pada Gambar 3.12 dan Tabel 3.5 untuk keterangan bagian rancangan halaman kopi tampan 1.

Gambar 3.12 Rancangan Halaman Kopi Tampan 1

Tabel 3.5 Keterangan Bagian-Bagian Rancangan Halaman Kopi Tampan 1

1 Tombol Home Tombol kembali pada halaman home/menu

utama.

2 Text View Deskripsi tentang kopi tampan

3 Text View Judul : Kopi Tampan

4 Tombol Next Tombol menuju ke halaman kopi tampan 2

b. Rancangan Halaman Kopi Tampan 2

(24)

1

3

2

utama.

2 Text View Gambar perancangan bisnis produk kopi

tampan

4 Tombol Back Tombol kembali ke halaman kopi tampan 1 5 Tombol Next Tombol menuju ke halaman kopi tampan 3

c. Rancangan Halaman Kopi Tampan 3

(25)

utama.

2 Text View Gambar perancangan bisnis gerobak

4 Tombol Back Tombol kembali ke halaman kopi tampan 2 5 Tombol Next Tombol menuju ke halaman kopi tampan 4

d. Halaman Kopi Tampan 4

Pada halaman ini akan berisi tentang perancangan bisnis dari mini cafe. Rancangan halaman kopi tampan 4 dapat dilihat pada Gambar 3.15 dan Tabel 3.8 untuk keterangan bagian rancangan halaman kopi tampan 4.

1

4

1

3

(26)

4

1

3

2

utama.

2 Text View Deskripsi Perancangan Bisnis Kopi Tampan.

3 Text View Judul : Kopi Tampan.

4 Tombol Back Tombol kembali ke halaman Kopi Tampan 3.

3.4.5 Rancangan Halaman Produk

Rancangan halaman produk pada aplikasi ini bertujuan untuk memberitahukan informasi tentang produk secara 3D. Pada rancangan halaman produk terdapat 3 tombol produk yaitu tombol Gayo Coffee, Premium Coffee, Jantan Coffee, dan tombol

home. Tombol produk akan langsung terhubung ke fungsi kamera smartphone dan menampilkan halaman Augmented Reality produk. Untuk rancangan halaman

Augmented Reality terdapat tombol home yang digunakan untuk kembali ke halaman

(27)

2

3

4

1

Gambar 3.16 Rancangan Halaman Produk Kopi Tampan

Tabel 3.9 Keterangan Bagian-Bagian Rancangan Halaman Produk Kopi Tampan

utama.

2 Tombol Gayo Coffee Tombol untuk masuk ke halaman Augmented Reality Gayo Coffee.

3 Tombol Premium

Coffee

Tombol untuk masuk ke halaman Augmented Reality Premium Coffee.

(28)

1

a. Halaman Augmented Reality Gayo Coffee

Rancangan halaman Augmented Reality gayo coffee dapat dilihat pada Gambar 3.17 dan Tabel 3.10 untuk keterangan bagian rancangan halaman Augmented Reality gayo coffee.

2

3

Gambar 3.17 Rancangan Halaman Augmented Reality Gayo Coffee

Tabel 3.10 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Gayo Coffee

1 Tombol Home Tombol kembali pada halaman home/menu utama. 2 Camera view Halaman untuk melihat Augmented Reality Gayo

Coffee.

3 Slider Digunakan untuk memperbesar atau memperkecil

objek.

b. Halaman Augmented Reality PremiumCoffee

(29)

1

2

3

Gambar 3.18 Rancangan Halaman Augmented Reality Premium Coffee

Tabel 3.11 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Premium Coffee

utama.

2 Camera view Halaman untuk melihat Augmented Reality

Premium Coffee.

3 Slider Digunakan untuk memperbesar atau memperkecil

objek.

c. Halaman Augmented Reality Jantan Coffee

Rancangan halaman Augmented Reality jantan coffee dapat dilihat pada Gambar 3.19 dan Tabel 3.12 untuk keterangan bagian rancangan halaman Augmented Reality

(30)

1

2

3

Gambar 3.19 Rancangan Halaman Augmented Reality Jantan Coffee

Tabel 3.12 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Jantan Coffee

utama.

2 Camera view Halaman untuk melihat Augmented Reality Jantan Coffee.

3 Slider Digunakan untuk memperbesar atau

memperkecil objek.

3.4.6 Rancangan Halaman Augmented Reality Gerobak

(31)

1

2

3

Gambar 3.20 Rancangan Halaman Augmented Reality Gerobak

Tabel 3.13 Keterangan Bagian-Bagian Rancangan Gerobak

utama.

2 Camera view Halaman untuk melihat Augmented Reality Gerobak Kopi Tampan.

3 Slider Digunakan untuk memperbesar atau memperkecil objek.

3.4.7 Rancangan Halaman Augmented Reality Mini Cafe

Rancangan halaman mini cafe pada aplikasi ini bertujuan untuk memberitahukan informasi tentang mini cafe secara 3D. Pada halaman mini cafe, pengguna bisa langsung terhubung ke fungsi kamera smartphone dan menampilkan halaman

(32)

1

2

3

Gambar 3.21 Rancangan Halaman Augmented Reality Mini Cafe

Tabel 3.14 Keterangan Bagian-Bagian Rancangan Halaman Augmented Reality Mini Cafe

1 Tombol Home Tombol kembali pada halaman home/menu utama. 2 Camera view Halaman untuk melihat Augmented Reality Mini Cafe.

3 Slider Digunakan untuk memperbesar atau memperkecil objek.

3.4.8 Rancangan PopUp Marker

Rancangan PopUp marker bertujuan untuk memberitahukan bagaimana bentuk dari

marker yang akan digunakan dalam sistem. Pada PopUp ini hanya berisi marker

dalam bentuk .jpg. dan tombol exit. Rancangan popup marker dapat dilihat pada Gambar 3.22 dan Tabel 3.15 untuk keterangan bagian rancangan popupmarker.

1

2

(33)

Tabel 3.15 Keterangan Bagian-Bagian Rancangan Marker

1 Tombol Keluar Tombol keluar dari popup marker.

2 Text View Judul : Marker

3 Text View Gambar - gambar Marker

3.4.9 Rancangan PopUp Help

Rancangan PopUp help bertujuan untuk memberitahukan cara penggunaan dari aplikasi. Pada halaman ini hanya berisi informasi untuk menggunakan aplikasi dan tombol exit. Rancangan PopUp help dapat dilihat pada Gambar 3.23 dan Tabel 3.16 untuk keterangan bagian rancangan popuphelp.

Gambar 3.23 Rancangan PopUp Help

Tabel 3.16 Keterangan Bagian-Bagian Rancangan Help

1 Tombol X Tombol keluar dari popup help.

2 Text View Judul : Help

3 Text View Pemberitahuan Help

1

2

(34)

(35)

Seperti pada gambar cube di perbesar untuk dijadikan sebagai lantai pada mini cafe.

3. Lalu ubah mode menjadi edit mode. Setelah itu buat pola garis kotak – kotak sesuai dengan keinginan dengan menekan CTRL + R dan pola mini cafe dapat jelas terlihat pada gambar. Lalu blok face yang akan dinaikkan keatas untuk membuat meja bar dari mini cafe.

4. Setelah meja bar terbentuk, selanjutnya blok face kembali yang akan dinaikkan keatas untuk membuat tiang penyangga atap dan dinding belakang dari mini cafe. Bisa dilihat pada gambar, tiang penyangga atap dan dinding belakang yang sudah terbentuk.

5. Setelah itu tambahkan lagi bagian lantai samping kiri untuk membuat meja dengan cara seperti diatas. Untuk lebih jelasnya bisa dilihat pada gambar.

6. Pada dinding belakang buat pola untuk membuat laci – laci pada dinding dengan cara memblok face yang diinginkan lalu tekan DELETE dan pilih face maka face

akan terhapus dan membentuk seperti laci untuk didinding.

7. Kemudian blok kembali lantai melalui face yang diinginkan, lalu lakukan dengan cara seperti diatas.

8. Setelah itu blok keseluruhan face dari lantai untuk diberi warna sesuai keinginan, cara memberi warna setiap face menggunakan material yang terdapat pada menu di sebelah kanan. Untuk lebih jelasnya bisa dilihat pada gambar.

9. Tahap selanjutnya adalah membuat atap untuk mini cafe, ubah dulu mode ke

object mode lalu tambahkan objek dasar cube dan ubah sesuaikan dengan model yang sudah dibuat. Lalu cocokkan atap dengan model yang sebelumnya telah dibuat. Lihat model atap melalui sisi atas, depan, kiri dan kanan dengan menggunakan menu view yang terletak pada toolbar kiri bawah.

10.Setelah pas, buat pola pada atap untuk membuat atap yang miring disebelah kanan dan kiri. Setelah pola terbuat maka blok face akan ditarik untuk membuat atap yang miring. Setelah itu tarik face yang sudah di blok dan atur kemiringannya. 11.Beri warna pada atap yang sudah di terbentuk dengan cara yang masih sama yaitu

(36)

(37)

4.1.1.1. Program Untuk Rotate

function touchobjek()

//ketika gerakan tangan menyetuh maka status drag objek menjadi "true" {

drag = true; }

function Update() {

//menangani perubahan yang terjadi akibat inputan pada layar device ''

if (Input.touchCount == 1) //jika disentuh hanya 1 {

var theTouch : Touch = Input.GetTouch(0);

if (theTouch.phase == TouchPhase.Moved) //jika sentuhan berpindah {

touchobjek(); }

if ((theTouch.phase == TouchPhase.Ended) || (theTouch.phase == TouchPhase. Canceled)) //jika berhenti menyentuh atau batal menyentuk

{

drag = false; }

}

if (Input.touchCount > 1) //jika disentuh lebih dari 1 {

drag = false; }

if ((theTouch.phase == TouchPhase.Moved) && drag) //jika proses sentuh dan berpindah {

kecepatan = new Vector3(theTouch.position.x,theTouch.position.y, 0); avg = Vector3.Lerp(avg,kecepatan,Time.deltaTime * 5);

}

transform.Rotate ( Camera.main.transform.up*kecepatan.x* rotasi, Space.World ); //rotasi keatas

transform.Rotate ( Camera.main.transform.right*kecepatan.y*rotasi, Space.World ); //rotasi kekanan

}

4.1.1.2Program Untuk Zoom

void Update () {

(38)

(39)

(40)

Gambar 4.5 Tampilan PopUp About

4.1.2.4Tampilan Home/Menu Utama

Tampilan ini merupakan tampilan utama di dalam aplikasi ini. Pada halaman

home/menu utama ini terdiri dari tombol kopi tampan untuk melihat bagaimana visi, misi, produk, dan informasi mengenai perancangan bisnis kopi tampan. Produk untuk melihat produk kopi tampansecara 3D, gerobak untuk melihat

Augmented Reality darigerobak kopi tampan, mini cafe untuk melihat Augmented Reality dari mini cafe, marker digunakan untuk memberi informasi mengenai

(41)

4.1.2.5Tampilan Halaman Kopi tampan

Pada tampilan halaman kopi tampan dibagi menjadi 4 bagian. Halaman Kopi Tampan 1 berisi deskripsi mengenai kopi tampan, dan visi misi dan dapat dilihat pada Gambar 4.7. Halaman Kopi Tampan 2 berisi tentang perancangan bisnis dari 3 produk yaitu gayo, premium, dan jantan coffee dan dapat dilihat pada Gambar 4.8. Halaman Kopi Tampan 3 berisi tentang perancangan bisnis dari gerobak dan dapat dilihat pada Gambar 4.9. Halaman Kopi Tampan 4 berisi tentang perancangan bisnis dari mini cafe dan dapat dilihat pada Gambar 4.10.

Gambar 4.7 Tampilan Kopi Tampan 1

(42)

(43)

(44)

(45)

(46)

(47)

(48)

Tabel 4.1 Hasil Pengujian Tekan Tombol Start

No. Pengujian Hasil yang Diharapkan Hasil

Pengujian

1 Cek Tombol Kopi Tampan Tombol Kopi Tampan akan menuju ke halaman Kopi Tampan 1

Baik

2 Cek Tombol Produk Tombol Produk akan menuju ke halaman produk

Baik

3 Cek Tombol Gerobak Tombol Gerobak akan menuju ke halaman Augmented Reality

Gerobak

Baik

4 Cek Tombol Mini Cafe Tombol Mini Cafe akan menuju ke halaman Augmented Reality Mini Cafe

Baik

5 Cek Tombol Marker Tombol Marker akan menuju ke

popup marker

Baik

6 Cek Tombol Help Tombol Help akan menuju ke

popup help

Baik

7 Cek Tombol Home Tombol Home akan menuju ke halaman landing page

Baik

4.2.1.2Proses Tekan Tombol About

Hasil pengujian pada proses Tekan Tombol About diperlihatkan pada Tabel 4.2.

Tabel 4.2 Hasil Pengujian Tekan Tombol About

Pengujian

(49)

4.2.1.3Proses Tekan Tombol Kopi Tampan

Hasil pengujian pada proses Tekan Tombol Kopi Tampan diperlihatkan pada Tabel 4.3.

Tabel 4.3 Hasil Pengujian Tekan Tombol Kopi Tampan

Pengujian

1 Cek Tombol Next Tombol Next akan menuju ke halaman Kopi Tampan 2

Baik

2 Cek Tombol Home Tombol Home akan menuju ke halaman home/menu utama

Baik

4.2.1.4Proses Tekan Tombol Next Pada Halaman Kopi Tampan 1

Hasil pengujian pada proses Tekan Tombol Next Pada Halaman Kopi Tampan 1 diperlihatkan pada Tabel 4.4.

Tabel 4.4 Hasil Pengujian Tekan Tombol Next Pada Halaman Kopi Tampan 1

Pengujian

Baik

2 Cek Tombol Back Tombol Back akan menuju ke halaman Kopi Tampan 1

Baik

(50)

Pengujian

Baik

Hasil pengujian pada proses Tekan Tombol Next Pada Halaman Kopi Tampan 3 diperlihatkan pada Tabel 4.6.

Pengujian

Baik

4.2.1.7Proses Tekan Tombol Produk

Hasil pengujian pada proses Tekan Tombol Produk diperlihatkan pada Tabel 4.7.

Tabel 4.7 Hasil Pengujian Tekan Tombol Produk

Pengujian

(51)

Gayo Coffee

2 Cek Tombol Premium Coffee

Tombol Premium Coffee akan menuju ke halaman Augmented RealityPremiumCoffee

Baik

3 Cek Tombol Jantan Coffee Tombol Jantan Coffee akan menuju ke halaman Augmented Reality

Jantan Coffee

Baik

4.2.1.8Proses Tekan Tombol Gerobak

Hasil pengujian pada proses Tekan Tombol Gerobak diperlihatkan pada Tabel 4.8. Tabel 4.8 Hasil Pengujian Tekan Tombol Gerobak

Pengujian

Baik

4.2.1.9Proses Tekan Tombol Mini Cafe

Hasil pengujian pada proses Tekan Tombol Mini Cafe diperlihatkan pada Tabel 4.9.

Tabel 4.9 Hasil Pengujian Tekan Tombol Mini Cafe

Pengujian

(52)

Tabel 4.10 Hasil Pengujian Tekan Tombol Marker

Pengujian

1 Cek Tombol Keluar Keluar dari popup marker Baik

4.2.1.11 Proses Tekan Tombol Help

Hasil pengujian pada proses Tekan Tombol Help diperlihatkan pada Tabel 4.11.

Tabel 4.11 Hasil Pengujian Tekan Tombol Help

Pengujian

1 Cek Tombol Keluar Keluar dari popup help Baik

4.2.1.12 Proses Tekan Tombol Gayo Coffee

Hasil pengujian pada proses Tekan Tombol Gayo Coffee diperlihatkan pada Tabel 4.12.

Tabel 4.12 Hasil Pengujian Tekan Tombol Gayo Coffee

Pengujian

1 Cek Tombol Home Tombol Home akan menuju ke halaman produk

Baik

4.2.1.13 Proses Tekan Tombol Premium Coffee

(53)

Tabel 4.13 Hasil Pengujian Tekan Tombol Premium Coffee

Pengujian

Baik

4.2.1.14 Proses Tekan Tombol Jantan Coffee

Hasil pengujian pada proses Tekan Tombol Jantan Coffee diperlihatkan pada Tabel 4.14.

Tabel 4.14 Hasil Pengujian Tekan Tombol Jantan Coffee

Pengujian

Baik

4.3 Pengujian Objek

4.3.1 Pengujian Rotasi

(54)

(55)

4.3.3 Pengujian Sound

Pada tahap pengujian sound ini menggunakan library yang sudah disediakan oleh unity untuk menampilkan objek 3D yang menggunakan fungsi audio. Dalam melakukan pengujian, pengguna melakukan scan marker yang sudah ditentukan dan kamera smartphone akan mentracking marker agar dapat memunculkan objek. Setelah objek muncul pengguna dapat menyentuh objek 3D untuk mendengarkan sound yang terdapat di objek 3D tersebut. Pengujian sound dilakukan langsung melalui kueisoner yang diberikan kepada responden yang menggunakan aplikasi AROPITAM. Hasil pengujian sound dapat dilihat pada Tabel 4.15.

Tabel 4.15 Hasil Kuesioner Pengujian Sound

4.4 Pengujian Langsung Kepada Pengguna AROPITAM

Pengujian aplikasi langsung dilakukan kepada pengguna AROPITAM, dilakukan dengan menggunakan metode kuesioner yang diberikan setelah menggunakan aplikasi ini. Jumlah responden adalah sebanyak 20 orang, yang terdiri dari 10 mahasiswa dan 10 pekerja/wirausaha. Kuesioner berisi pertanyaan berkaitan dengan aplikasi. Aspek yang di nilai pada aplikasi adalah aspek menggunakan sistem dan aspek penggunaan suara. Daftar pertanyaan dan daftar peserta kuesioner dapat dilihat pada Lampiran A. Kedua aspek tersebut yang akan dihasilkan sebagai bahan evaluasi.

Penilaian untuk setiap pertanyaan pada kuesioner digolongkan menjadi empat kategori yaitu kurang baik, cukup baik, baik dan sangat baik. Jika digolongkan ke dalam bentuk presentase maka 0-25% diinterpretasikan dalam kategori kurang baik, 26-50% diinterpretasikan dalam kategori cukup baik, 51-75% diinterpretasikan dalam

No. Pertanyaan Kurang

Baik

Cukup

Baik Baik

Sangat Baik 1 Output suara ketika objek 3D muncul 0 5 13 2 2 Kejelasan kata – kata yang disampaikan 0 5 13 2

3 Kejernihan suara 0 7 11 2

(56)

P

k = (f/N) * Ikb ……….. (16) Dimana:

Pk = persentase untuk k kondisi dalam hal kurang baik, cukup baik, baik dan sangat baik

f = total respon dalam k kondisi

N = jumlah total pertanyaan dikalikan total responden I

kb = Interpertasi k kondisi terbesar (dalam hal ini kurang baik 25%, cukup baik 50%, baik 75% dan sangat baik 100%)

4.4.1 Hasil Evaluasi Aspek Penggunaan Sistem

Evaluasi aspek penggunakan sistem digunakan untuk menilai aplikasi berkaitan dengan kemudahan penggunaan aplikasi dan tombol-tombol aplikasi, keinginan dalam menggunakan aplikasi dan kemudahan pengaksesan aplikasi. Hasil evaluasi pada aspek penggunaan sistem dapat dilihat pada Tabel 4.16 berikut:

Tabel 4.16 Hasil Kuesioner Pengujian Sistem

Dari hasil kuesioner evaluasi aspek penggunaan sistem pada tabel 4.16 diatas, maka diagram hasil evaluasi aspek penggunaan sistem dapat dilihat pada Gambar 4.23 berikut:

No. Pertanyaan Kurang

(57)

0

Gambar 4.23 Diagram Evaluasi Berdasarkan Penggunaan Sistem

(58)

0

Kurang Baik Cukup Baik Baik Sangat Baik 0

Kurang Baik Cukup Baik Baik Sangat Baik

penggunaan sebesar 75.21% atau diinterpretasikan baik. Diagram penilaian aspek penggunaan secara keseluruhan diperlihatkan pada Gambar 4.24 berikut:

Gambar 4.24 Diagram Hasil Evaluasi Berdasarkan Penggunaan Sistem

4.4.2 Hasil Evaluasi Aspek Penggunaan Suara

(59)

Maka secara keseluruhan penilaian kualitas dari aspek penggunaan sistem ini dapat dihitung dengan menggunakan rumus (16) sehingga untuk masing-masing kondisi diperoleh presentase sebagai berikut:

Diketahui :

- f kurang baik = 0 - fcukup baik = 22

- fbaik = 43 - f sangat baik = 15

- N = 4 pertanyaan x 20 responden = 80 buah Maka :

1. Pkurang baik = (0 / 80) * 25% = 0 % 2. Pcukup baik = (22 / 80) * 50% = 13.75 % 3. Pbaik = (43 / 80) * 75% = 40.32 % 4. Psangat baik = (15 / 80) * 100% = 18.75%

Maka total presentase aspek penggunaan sistem didapat dengan menjumlahkan Pkurang baik + Pcukup baik + Pbaik + Psangat baik, sehingga didapat nilai aspek penggunaan sebesar 72.82% atau diinterpretasikan baik. Diagram penilaian aspek penggunaan secara keseluruhan diperlihatkan pada Gambar 4.26 berikut:

(60)

BAB 5

KESIMPULAN DAN SARAN

5.1. Kesimpulan

Berdasarkan hasil studi literatur, analisis perancangan, implementasi dan pengujian sistem ini,

maka didapatkanlah kesimpulan seperti berikut ini :

1. Augmented Reality Of Kopi Tampan (AROPITAM) membantu dalam proses

menjelaskan perancangan bisnis kopi tampan. Dengan menggunakan augmented reality,

perancangan bisnis dari kopi tampan yaitu 3 objek, gerobak dan mini cafe bisa tampil

secara 3D dengan fungsi zoom, rotate, dan sound sebagai informasi.

2. Aplikasi ini menggunakan library vuforia dan menggunakan booklet sebagai marker

yang sudah di rancang.

3. Pembuatan aplikasi ini menggunakan Android OS v4.2 Jelly Bean, dan Random Access

Memory (RAM) sebesar 1 GB. Setelah melakukan percobaan aplikasi, waktu yang

diperlukan untuk menjalankan halaman Augmented Reality adalah 12 detik dan hal

tersebut menjadi kelemahan dari aplikasi ini, lamanya muncul halaman Augmented

Reality dikarenakan proses meload model bangunan 3D yang telah tersimpan, susahnya

camera mendeteksi marker dikarenakan posisi, jarak dan intensitas cahaya dan

tergantungdengan spesifikasidari smartphone yang digunakan.

5.2. Saran

Adapun saran yang diberikan penulis untuk pengembangan dan perbaikan pada sistem ini

selanjutnya adalah sebagai berikut :

1. Pada penelitian selanjutnya diharapkan mampu mengembangkan aplikasi dalam versi ios

dan windows phone.

2. Dalam pembuatan model 3D pada Blender atau software 3D lainnya disarankan agar

peneliti dapat menguasai penggunaan aplikasi tersebut untuk menghasilkan model 3D

yang baik.

3. Dalam pembuatan sound informasidisarankan agar membuat function seperti musik yang

memiliki tombol mulai, berhenti, dan jeda agar penggunaan sound lebih terarah.

(61)

(62)

(63)

Pada Gambar 2.2, suatu marker yang besar diletakkan pada daerah pembangunan, kemudian dilakukan pengambilan gambar dengan helikopter. Dari imput yang didapat kemudian dilakukan suatu simulasi perencanaan pembangunan gedung yang baru.

Bidang-bidang yang pernah menerapkan teknologi Augmented Reality adalah: 1. Kedokteran (Medical)

Teknologi pencitraan sangat dibutuhkan di dunia kedokteran, seperti misanya untuk simulasi operasi, simulasi pembuatan vaksin virus, dll. Untuk itu, bidang kedokteran menerapkan Augmented Reality pada visualisasi penelitian mereka.

2. Hiburan (Entertainment)

Dunia hiburan membutuhkan Augmented Reality sebagai penunjang efek-efek yang akan dihasilkan oleh hiburan tersebut. Sebagai contoh, ketika seorang wartawan cuaca memperkirakan ramalan cuaca, dia berdiri di depan layar hijau atau biru, kemudian dengan teknologi augmented reality, layar hijau atau biru tersebut berubah menjadi gambar animasi tentang cuaca tersebut, sehingga seolah-olah wartawan tersebut, masuk ke dalam animasi tersebut.

3. Latihan Militer (Military Training)

Militer telah menerapkan Augmented Reality pada latihan tempur mereka. Sebagai contoh, militer menggunakan Augmented Reality untuk membuat sebuah permainan perang, dimana prajurit akan masuk kedalam dunia game tersebut, dan seolah-olah seperti melakukan perang sesungguhnya.

4. Engineering Design

Seorang engineering design membutuhkan Augmented Reality untuk menampilkan hasil design mereka secara nyata terhadap clien. Dengan Augmented Reality klien akan tahu, tentang spesifikasi yang lebih detail tentang desain mereka.

(64)

6. Consumer Design

Virtual reality telah digunakan dalam mempromosikan produk. Sebagai contoh, seorang pengembang menggunakan brosur virtual untuk memberikan informasi yang lengkap secara 3D, sehingga pelanggan dapat mengetahui secara jelas produk yang ditawarkan. (Andriyadi, 2011).

2.2.1 Sejarah Augmented Reality

Morton Heilig, seorang sinematografer, pada tahun 1962, membangun "The Cinema Of The Future," bernama Sensorama, sebelum digital komputasi. Selanjutnya, Ivan Sutherland menemukan “Head Mounted Display” pada tahun 1966.

Pada tahun 1975, Myron Krueger menciptakan “Videoplace”, ruang yang memungkinkan pengguna untuk berinteraksi dengan objek virtual untuk pertama kalinya. Pada tahun 1999, Hirokazu Kato, mengembangkan “ArToolkit” di HITLab dan didemonstrasikan di SIGGRAPH. Outdoor mobile pertama AR permainan, yaitu ARQuake, dikembangkan oleh Bruce Thomas pada tahun 2000 dan ditunjukkan di Symposiumon Wearable Internasional Komputer. Tahun-tahun berikutnya, semakin banyak aplikasi AR dikembangkan terutama dengan aplikasi mobile, seperti pengembangan aplikasi medis pada tahun 2007. Pada tahun 2008, Wikitude AR Travel Guide, memperkenalkan Android G1 Telephone yang berteknologi AR, tahun 2009, Saqoosha memperkenalkan “FLARToolkit” yang merupakan perkembangan dari ArToolkit. Ditahun yang sama, Wikitude Drive meluncurkan sistem navigasi berteknologi AR di Platform Android. Tahun 2010, Acrossair menggunakan teknologi AR pada I-Phone 3GS. Saat ini, dengan kemajuan baru dalam teknologi, peningkatan jumlah AR sistem dan aplikasi yang dihasilkan, terutama dengan prototipe rasa MIT 6 dan pelepasan iPad 2 dan penerus dan pesaing, khususnya Eee Pad, dan iPhone 4, yang menjanjikan untuk merevolusi ponsel AR (Putra, 2013).

Beberapa komponen yang diperlukan dalam pembuatan dan pengembangan aplikasi AR adalah sebagai berikut :

(65)

Komputer akan mengenali posisi dan orientasi dari marker dan akan menciptakan objek virtual yang berupa objek 3D yaitu pada titik (0,0,0) dan 3 sumbu (X,Y,Z).

3. Kamera, berfungsi sebagai perangkat yang merecording sensor. Kamera tersebut terhubung ke komputer yang akan memproses image yang mendukung marker

(Pratama, 2014).

Berikut merupakan contoh Augmented Reality pada Platform Android ysng dapat dilihat pada Gambar 2.3.

Gambar 2.3 Augmented Reality pada Platform Android

(Sumber gambar : http://cdn2.ubergizmo.com/wp-content/uploads/2011/05/smartar.jpg).

2.3Blender 3D

Blender adalah salah satu software open source yang digunakan untuk membuat konten multi objek khususnya 3 Dimensi. Ada beberapa kelebihan yang dimiliki blender dibandingkan software sejenis. Berikut kelebihannya :

1. Open Source, Blender merupakan salah satu software open source, dimana kita bisa bebas memodifikasi source code untuk keperluan pribadi maupun komersial, asal tidak melanggar General Public License (GNU) yang digunakan Blender.

(66)

4. Free, Blender merupakan sebuah software yang gratis. Blender gratis bukan karena tidak laku, melainkan karena luar biasanya fitur yang mungkin tak dapat dibeli dengan uang, selain itu dengan digratiskannya software ini, siapapun bisa berpartisipasi dalam mengembangkannya untuk menjadi lebih baik.

5. Lengkap, Blender memiliki fitur yang lebih lengkap dari software 3D lainnya. Blender tersedia fitur Video editing, Game Engine, Node Compositing, Sculpting. Dan bukan lagi plugin, tapi sudah include atau di bundling.

6. Ringan, Blender relatif ringan jika dibandingkan software sejenis. Hal ini terbuti dengan sistem minimal untuk menjalankan Blender. Hanya dengan RAM 512 dan prosesor Pentium 4 dan VGA on board, Blender sudah dapat berjalan dengan baik.

7. Komunitas Terbuka, Tidak perlu membayar untuk bergabung dengan komunitas Blender yang sudah tersebar di dunia. Dari yang baru sampai yang sudah ahli terbuka untuk menerima masukan dari siapapun, selain itu mereka juga saling berbagi tutorial dan file secara terbuka (Adam, 2014).

2.4Unity 5

Unity 5 adalah perangkat lunak game engine untuk membangun permainan 3 Dimensi (3D). Game engine merupakan komponen yang ada di balik layar setiap video game.

Selain itu unity juga dikatakan sebagai game engine yang populer karena memiliki fitur – fitur yang mencakup semua aspek dalam proses pembuatan game.

Adapun fitur - fitur yang dimiliki oleh unity 3D antara lain sebagai berikut:

1. Integrated development environment (IDE) atau lingkungan pengembangan terpadu.

2. Penyebaran hasil aplikasi pada banyak platform.

3. Engine grafis menggunakan Direct3D (windows), OpenGL (Mac, Windows), OpenGL ES (Android, iOS), dan Proprietary API (Wii)

(67)

Selain itu, Unity juga menyediakan dokumntasi melalui script API, secara manual dan melalui sebuah tutorial yang digunakan untuk menciptakan suatu interaksi didalam aplikasi yang diciptakan. Biasanya dokumentasi digunakan untuk pengembangan aplikasi yang akan diciptakan. Unity mendukung bahasa pemrograman C#, Javascript, dan Boo.

1. Transformasi 3 dimensi

merupakan suatu metode yang dapat digunakan untuk memanipulasi lokasi sebuah titik. Apabila transformasi dikenakan terhadap sekumpulan titik yang membentuk sebuah benda (obyek) maka benda tersebut akan mengalami perubahan. Perubahan dalam hal ini adalah perubahan dari lokasi awal suatu benda menuju lokasi yang baru dari benda tersebut. Pada transformasi tiga dimensi sumbu yang dipergunakan adalah sumbu x, sumbu y, dan sumbu z. Sumbu z berfungsi untuk menampilkan kesan kedalaman yang akan dilihat oleh mata manusia (Sulastri, 2007).

a. Rotasi

Rotasi dapat diartikan dengan perpindahan lokasi awal dari sebuah benda (objek) dengan cara diputar terhadap sumbu koordinat sebagai pusat perputaran. Sumbu koorinat tersebut adalah sumbu x, sumbu y, sumbu z (Sulastri, 2007). Berikut contoh dokumentasi yang digunakan untuk rotasi.

void Update() {

transform.Rotate(Vector3.right, Time.deltaTime);

transform.Rotate(Vector3.up, Time.deltaTime, Space.World); }

}

b. Penskalaan

(68)

2. Audio

merupakan suara atau bunyi yang dihasilkan dari suatu benda. Berikut contoh dokumentasi yang digunakan untuk audio.

void Start() {

AudioSource audio = GetComponent<AudioSource>();

audio.Play();

}

Mesh merupakan bentuk dasar dari objek 3D. Game Objek adalah kontainer untuk semua komponen lainnya. Material digunakan dan dihubungkan dengan mesh atau

renderer partikel yang melekat pada game objek. Material berhubungan dengan penyaji mesh atau partikel yang melekat pada game objek tersebut. Mesh atau partikel tidak dapat ditampilkan tanpa material karena material meliputi referensi untuk

Shader yang digunakan untuk membuat mesh partikel. Material digunakan untuk menempatkan tekstur ke Game Objects.

Sebelum menjalankan aplikasi unity, download dan instal SDK Android lalu tambahkan perangkat fisik ke sistem. Unity memungkinkan pemanggilan fungsi

custom yang ditulis dalam C / C ++ secara langsung dan Java secara tidak langsung dari script C #.QCAR SDK membutuhkan renderer untuk menampilkan objek virtual kedalam lingkungan nyata. Proses pelacakan posisi dan orientasi hingga mengenali target sebagai tempat memunculkan objek dilakukan dengan sistem QCAR. Sedangkan Unity 3D berperan dalam menciptakan objek maya 3D dan proses

renderinggrafis sama seperti yang dilakukan pada lingkungan antarmuka Unity 3D. Perbedaan mendasar antar Unity desktop dan Unity Android yaitu :

a) Dynamic typing pada JavaScript tidak diperbolehkan dalam Unity Android. b) Terrain Engine tidak didukung pada perangkat Android.

c) ETC sebagai Texture Compression di Persatuan Android tidak mendukung PVRTC/ ATC.

(69)

Gambar 2.4 Diagram rendering Unity 3D Sumber : (Rizki, 2012).

Pada Gambar 2.4 terlihat hasil akhir objek yang akan dimunculkan setelah pelacakan. Setiap objek yang akan dimunculkan memiliki bentuk dan tekstur masing-masing. Objek juga tidak selalu bersifat statis. Seringkali objek yang diinginkan adalah objek bergerak. Unity bertugas memproses ini sehingga objek-objek tersebut dapat muncul dengan baik pada perangkat android (Rizki, 2012).

2.5Vuforia SDK

Vuforia adalah Augmented Reality Software Development Kit (SDK) untuk perangkat mobile yang memungkinkan pembuatan aplikasi Augmented Reality. Dulunya lebih dikenal dengan QCAR (Qualcomm Company Augmentend Reality). Ini menggunakan teknologi Computer Vision untuk mengenali dan melacak gambar planar (Target Image) dan objek 3D sederhana, seperti kotak, bola dan lainnya secara real-time. Kemampuan registrasi citra memungkinkan pengembang untuk mengatur posisi dan

(70)

dari SDK termasuk Deteksi Oklusi lokal menggunakan 'Tombol Virtual', runtime

pemilihan gambar target, dan 27 kemampuan untuk membuat dan mengkonfigurasi ulang set pemrograman pada saat runtime. Vuforia menyediakan Application Programming Interfaces (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 :

1. Teknologi computer vision untuk menyelaraskan gambar yang tercetak dan

object 3D.

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

3. QCAR juga menawarkan development dan distribusi yang gratis (Rentor, 2013).

2.5.1 Arsitektur Vuforia

Vuforia SDK memerlukan beberapa komponen penting agar dapat bekerja dengan baik. Komponen - 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

(71)

d. Video Background

Renderer Me-render gambar dari kamera yang tersimpan di dalam stateobject. Performa dari video background renderer sangat bergantung pada device yang digunakan.

e. Application Code Menginisialisasi semua komponen di atas dan melakukan tiga tahapan penting dalam application 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 (Rentor, 2013).

Detail Kerja Vuforia adalah sebagai berikut :

1. Kamera akan menangkap gambar dari dunia nyata untuk melacak marker dan kemudian melakukan registrasi marker.

2. Gambar yang ditangkap sebagai marker di konversikan dari format YUV 12 ke format RGB565 untuk OpenGL ES kemudian mengatur pencahayaan untuk pelacakan marker.

3. Setelah itu marker dikonversikan menjadi beberapa frame, dengan menggunakan algoritma computer vision untuk mendeteksi dan melakukan pelacakan objek nyata yang diambil dari kamera. Objek tersebut dievaluasi dan hasilnya akan disimpan yang kemudian akan diakses oleh aplikasi.

4. Berikutnya, setelah mendapat posisi kamera yang tepat maka objek yang telah ditangkap oleh kamera tadi akan di render dan divisualisasikan dalam bentuk video secara realtime.

5. Objek yang ada pada video akan tampak menempel diatas marker.

(72)

(73)

Dengan perkembangan pembuat aplikasi, marker berwarna lebih sering digunakan, tidak harus memiliki frame hitam dan dasar putih. Dengan file gambar.jpg sudah bisa menjadi sebuah marker. Metode pada marker tersebut disebut metode markerless.

2.6.1 Metode Markerless Augmented Reality .

Metode Markerless Augmented Reality merupakan salah satu metode Augmented Reality tanpa menggunakan frame marker sebagai obyek yang dideteksi. Pengguna tidak perlu lagi menggunakan sebuah marker yang berbentuk kotak dan berwarna hitam putih untuk menampilkan elemen-elemen digital. Dengan adanya Markerless Augmented Reality, penggunaan marker sebagai tracking object yang selama ini menghabiskan ruang, akan digantikan dengan gambar, atau permukaan apapun yang berisi dengan tulisan, logo, atau gambar sebagai tracking object (objek yang dilacak) agar dapat langsung melibatkan objek yang dilacak tersebut sehingga dapat terlihat hidup dan interaktif, juga tidak lagi mengurangi efisiensi ruang dengan adanya

marker. Saat ini markerless dikembangkan oleh perusahaan Augmented Reality

terbesar di dunia yaitu Total Immersion, mereka telah membuat berbagai macam teknik MarkerlessTracking sebagai teknologi andalan mereka, seperti Face Tracking, 3D Object Tracking, dan Motion Tracking, serta GPS Based Tracking (Rizki, 2012).

Dalam pembuatan marker markerless diperlukan sebuah file gambar.JPG yang nantinya akan di-upload ke vuforia, marker yang telah di-upload akan dinilai kualitasnya oleh system. Marker yang akan dibuat bernama image target, Image target adalah gambar yang dapat di deteksi dan di lacak oleh vuforia SDK. Jenis gambar tidak seperti marker tradisional seperti data matrix code dan QR codes,

marker juga tidak perlu warna hitam dan putih yang berdesain khusus untuk di kenali. Pola marker dapat dibuat dengan menggunakan Photoshop.

Teknik Markerless adalah : 1. Face Tracking

(74)

2. 3D Objek Tracking

Berbeda dengan Face Tracking yang hanya mengenali wajah manusia secara umum, teknik 3D Object Tracking dapat mengenali semua bentuk benda yang ada disekitar, seperti mobil, meja, televisi, dan lain-lain.

3. Motion Tracking

Teknik Augmented Reality yang dapat menangkap gerakan. Biasanya digunakan dalam industri perfilman seperti karakter dan tokoh yang sesuai dengan peran dan kebutuhan film tersebut.

4. GPS Based Tracking

Global Positioning System (GPS) Based Tracking adalah teknik Augmented Reality

yang diintegrasikan dengan GPS yang terdapat pada ponsel pintar menampikan informasi data dari GPS kemudian menampilkannya dalam bentuk arah sesuai dengan yang kita inginkan secara realtime (Rentor, 2013).

Gambar 2.7 Metode Markerless Sumber : (Rizki, 2012 ).

Pada Gambar 2.7 merupakan contoh gambar yang menggunakan metode markerless. Berikut ini adalah proses deteksi marker ke smartphone. Langkah-langkah deteksi

marker yaitu :

1. Kamera ponsel pintar mengambil gambar marker pada dunia nyata ke dalam komputer.

(75)

3. Jika marker telah terdeteksi maka aplikasi perangkat lunak akan menghitung posisi kamera terhadap marker sesuai persamaan yang dimasukkan oleh perancang program.

4. Ketika pendeteksi marker telah mendeteksi maka objek benda akan tampil seperti yang terlihat pada akhir Gambar 2.8.

Gambar 2.8 Proses Mendeteksi Marker

(Sumber gambar : http://brightsideofnews.com/Data/2009_10_26/Zombies-nVidia-Tegra-Augmented-Reality/Zombies_AR_Marker_675.jpg).

2.7Android

Android adalah software untuk perangkat mobile yang meliputi sistem operasi,

middleware dan aplikasi inti. Android dilengkapi dengan Android SDK (Software